FANDOM


  • I’m having issues with the CSS at the bottom of the page linked below:

    https://cartoonnetwork.fandom.com/wiki/MediaWiki:Wikia.css

      Loading editor
    • You're missng a semi-colon...

      width:60px;

        Loading editor
    • Is the href part also causing problems?

        Loading editor
    • Unless you are targeting something that was inserted using custom JS, yes. That selector will select elements with an href value that is exactly "UpnCbs06"; nothing more and nothing less. Take a look at the various selectors to figure out which one is best for what you are trying to do.

      selectors reference

        Loading editor
    • I looked at the link you provided and tried using it

      The code below doesn’t seem to do anything:

      a[href$="UpnCbs06"]::after
       
      {
      display:inline-block;
      width:60px;
      background:url(https://vignette.wikia.nocookie.net/logopedia/images/2/27/Cartoon_Network_1992.svg/revision/latest?cb=20190305210028);
      }
        Loading editor
    • I think you might also need to specify a height. But that is just a guess; I haven't tested it.

        Loading editor
    • Here’s an example of what I’m looking for:

      (Username) [[File:Cartoon Network logo.svg|60px]]

      (Username) Cartoon Network logo

        Loading editor
    • Okay. I am dumb. This is so obvious, I can't believe I missed it. The issue is not that you didn't have a height. The issue is that you didn't have any content. You need to have "content: "";" to get it to work. For some reason, it doesn't work on MS Edge unless there are actual characters in the content but that trick should work for other browsers.


      Edit:

      Here is a workaround for the MS Edge issue. Set the content to something simple like "a". Then set the color of the pseudo-element to "transparent". This will provide the content MS Edge is looking for when deciding whether or not to display the pseudo-element but render the content transparent so as to visually not be there.

        Loading editor
    • a[href="/wiki/User:UpnCbs06"]::after {
      display:inline-block;
      background:url('https://vignette.wikia.nocookie.net/logopedia/images/2/27/Cartoon_Network_1992.svg/revision/latest?cb=20190305210028') no-repeat center;
      background-size:contain;
      content:"";
      height:18px;
      margin-left:0.25em;
      }
        Loading editor
    • I will say, adding this graphic by your username is misleading and gives the false appearance of association with Cartoon Network. Now if it had a small "Wiki" as part of the graphic, that would be better.

        Loading editor
    • Since there have been two new posts, I am going to add this edit as a new post instead. I was correct with regards to there being an issue on MS Edge but the issue was also that the height was set to 0. You can resolve the MS Edge issue by either adding transparent text as I previously described or by setting the height to something non-zero. However, if you set the height, you need to make sure to set it to a value that makes sense given the height of the surrounding text.

        Loading editor
    • Random User123 wrote:

      a[href="/wiki/User:UpnCbs06"]::after {
      display:inline-block;
      background:url('https://vignette.wikia.nocookie.net/logopedia/images/2/27/Cartoon_Network_1992.svg/revision/latest?cb=20190305210028') no-repeat center;
      background-size:contain;
      content:"";
      height:18px;
      margin-left:0.25em;
      }

      I’m not exactly looking for the file to be the background, instead have the file being placed next to the username.

        Loading editor
    • Doing the image as the background to an empty (or containing transparent text) pseudo-element is the most backwards-compatible method. Older browsers to not support anything but text for the value of "content". Also, as you can see, you run into size issues.

        Loading editor
    • Hi

        Loading editor
    • UpnCbs06 wrote:

      I’m not exactly looking for the file to be the background, instead have the file being placed next to the username.

      That's what it does, and looks like this: [1] The image also works as part of the link to your profile. If you're seeing something else (when you decide to test it), please include your browser & version.

        Loading editor
    • Hi

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.