FANDOM


  • Hello,

    Could I please have some help on my wiki with CSS? Currently still learning it.

    No, I'm not asking for a person to type all the CSS - in fact, much of my other CSS works the way it should - but one thing I'm attempting to do is to set specific backgrounds for specific pages. This is a link to the wiki: http://video-game-adaptation.wikia.com/wiki/Video_Game_Adaptation_Wiki (specific page I'm trying for it to work on is Sleet)

    Curently, this is what I have got:


    .page-Sleet.background-dynamic.skin-oasis {
    background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/c/cc/Sleet_Fanart.png/revision/latest) !important;
    background-attachment: fixed;
    }


    I've tried lots of stuff, but none of it works, no matter how much I bypass the cache or pull up the Incognito Browser (I'm on Google Chrome).  

    I've also seen on other wikis where it does work that after latest, there's "?cb=" and then a whole bunch of at first sight random numbers. What does this mean exactly? And is it vital for the code to work?

    If need, here's a link to the CSS page: http://video-game-adaptation.wikia.com/wiki/MediaWiki:Common.css

    Thanks in advance,

    Wither.

      Loading editor
    • CavaX
      CavaX removed this reply because:
      Nevermind, so long.
      16:19, December 17, 2017
      This reply has been removed
    • To get right to the answer, the following is all you should need.

      .page-Sleet.skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/c/cc/Sleet_Fanart.png);
      }

      However, it appears that the image is not loaded properly. You are not the only user to have this issue and I suspect Wikia may be having issues with their image server.


      A few additional notes if you care to know. show/hide FYI

      1. Using ".background-dynamic" is what caused the issue. The reason is that the page body did not include that in the list of classes. Because your selector required all 3 classes to be possessed by an element, the body was not selected and the background was not applied.
      2. "background-attachment: fixed;" is redundant. That is the value already set by the default CSS.
      3. Using "!important" is generally not a good idea is it prevents both preceding and proceeding CSS. This means that personal CSS will be overridden by site CSS.
      4. If you want to apply the background just to oasis, you can put this CSS on MediaWiki:Wikia.css instead and ditch ".skin-oasis".
      5. In terms of the image URL, what I have should be enough. However, the extra parts (including the "?cb=#####") shouldn't hurt. The only time you need to use the extra parts is if a new version of the image has been uploaded but you want to still use the old version.
      6. When linking to another Wikia community, you can use interwiki links instead of the full URL. For an example, see my link in #4.
        Loading editor
    • Ok then.

        Loading editor
    • Andrewds1021 wrote:
      To get right to the answer, the following is all you should need.
      .page-Sleet.skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/c/cc/Sleet_Fanart.png);
      }

      However, it appears that the image is not loaded properly. You are not the only user to have this issue and I suspect Wikia may be having issues with their image server.


      A few additional notes if you care to know.

      1. Using ".background-dynamic" is what caused the issue. The reason is that the page body did not include that in the list of classes. Because your selector required all 3 classes to be possessed by an element, the body was not selected and the background was not applied.
      2. "background-attachment: fixed;" is redundant. That is the value already set by the default CSS.
      3. Using "!important" is generally not a good idea is it prevents both preceding and proceeding CSS. This means that personal CSS will be overridden by site CSS.
      4. If you want to apply the background just to oasis, you can put this CSS on MediaWiki:Wikia.css instead and ditch ".skin-oasis".
      5. In terms of the image URL, what I have should be enough. However, the extra parts (including the "?cb=#####") shouldn't hurt. The only time you need to use the extra parts is if a new version of the image has been uploaded but you want to still use the old version.
      6. When linking to another Wikia community, you can use interwiki links instead of the full URL. For an example, see my link in #4.

      Thanks! I'll try it out.

        Loading editor
    • Withersoul 235 wrote:
      Andrewds1021 wrote:
      To get right to the answer, the following is all you should need.
      .page-Sleet.skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/c/cc/Sleet_Fanart.png);
      }

      However, it appears that the image is not loaded properly. You are not the only user to have this issue and I suspect Wikia may be having issues with their image server.


      A few additional notes if you care to know.

      1. Using ".background-dynamic" is what caused the issue. The reason is that the page body did not include that in the list of classes. Because your selector required all 3 classes to be possessed by an element, the body was not selected and the background was not applied.
      2. "background-attachment: fixed;" is redundant. That is the value already set by the default CSS.
      3. Using "!important" is generally not a good idea is it prevents both preceding and proceeding CSS. This means that personal CSS will be overridden by site CSS.
      4. If you want to apply the background just to oasis, you can put this CSS on MediaWiki:Wikia.css instead and ditch ".skin-oasis".
      5. In terms of the image URL, what I have should be enough. However, the extra parts (including the "?cb=#####") shouldn't hurt. The only time you need to use the extra parts is if a new version of the image has been uploaded but you want to still use the old version.
      6. When linking to another Wikia community, you can use interwiki links instead of the full URL. For an example, see my link in #4.
      Thanks! I'll try it out.

      No problem!

        Loading editor
    • The image doesn't load, presumably due to the glitch you mentioned.

        Loading editor
    • Withersoul 235 wrote:
      The image doesn't load, presumably due to the glitch you mentioned.

      I think the staff will fix this glitch soon.

        Loading editor
    • All right.

        Loading editor
    • How do I target pages that have brackets [ "( and )" ] and a "/" in their name?

        Loading editor
    • Withersoul 235 wrote:
      How do I target pages that have brackets [ "( and )" ] and a "/" in their name?

      Maybe you should contact the staff. I don't know about it.

        Loading editor
    • As I have already mentioned in the thread I linked to, it seems the issue is now resolved. However, your image is still not showing because the URL you are using is incorrect. You can always check the URL of the actual file by using Special:FilePath, clicking the "download" link on the file page, or using your browser's context menu to check the properties of an instance of the image (such as the one below and including the one displayed on Special:Images).

      Sleet_Fanart.png


      Also, if you care to know, there are several different tags you can use when you want to display actual code/markup. show/hide tag list

      1. source or syntaxhighlight
        • pretty similar if not identical
          I use syntaxhighlight
        • displays as a block element
        • offers language-specific text formatting
        • requires lang="some language"
          For example: <syntaxhighlight lang="css"></syntaxhighlight>
      2. pre
        • displays as a block element
        • simply enclose content
        • has "built-in" nowiki
      3. nowiki
        • displays as inline text
        • prevents parsing of MediaWiki and Wikia-specific markup
      4. code
        • displays as inline text
        • provides font different from regular text
        • can be used together with nowiki by enclosing nowiki as used in example for syntaxhighlight

      Example of pre:

      <source lang="css">
      .page-Sleet.skin-oasis {
          background-image: url(URL);
      }
      </source>
      <syntaxhighlight lang="css">
      .page-Sleet.skin-oasis {
          background-image: url(URL);
      }
      </syntaxhighlight>
      <code>.page-Sleet.skin-oasis { background-image: url(URL); }</code>
      

      The above produces:

      .page-Sleet.skin-oasis {
          background-image: url(URL);
      }
      .page-Sleet.skin-oasis {
          background-image: url(URL);
      }

      .page-Sleet.skin-oasis { background-image: url(URL); }

        Loading editor
    • It still doesn't show up even after copying the FilePath URL.

        Loading editor
    • Nevermind, it finally works! Thanks a lot!

        Loading editor
    • Ok then.

        Loading editor
    • Just one more thing: How do I target pages that have brackets [ "( and )" ] and a "/" in their name?

        Loading editor
    • And how do I use the image multiple times? Sorry if I ask a lot of questions.

        Loading editor
    • It may be easier if we can discuss this on chat.

        Loading editor
    • Withersoul 235 wrote:
      It may be easier if we can discuss this on chat.


      I don't know. But you should ask staff.

        Loading editor
    • But there's a professional CSS expert here (Andrewds1021), I'll wait for them.

      If I still can't solve the problem, I can give them temporary Content Moderator status to apply the CSS, or contact Staff.

        Loading editor
    • Not a problem. By the way, I made some edits to the code tags section in my previous post if you care to look.

      From what I can tell, parenthesis (I am assuming brackets are treated the same way) get dropped and slashes are converted to underscores. For example, the way to target a subpage of "Megatron (20)" called "Weapon" would be to use .page-Megatron_20_Weapon.

      To target multiple pages with the same CSS, just use multiple selectors.

      .page-Name_1,
      .page-Name_2,
      .page-Name_3 {
          background-image: url(URL);
      }
        Loading editor
    • OK, thanks. I'll try it.

        Loading editor
    • It's working (currently the image doesn't pop up, but it fixes itself), but there's another thing.

      How do I make sure that the image only appears once and engulfs the entire screen (no black or white around it)? Because my images pop up two times, next to each other.

        Loading editor
    • If you want to target a page and its subpages (I am guessing that is why you are asking):

      .page-Root_Page_Name,
      [class*=page-Root_Page_Name_] {
          background-image: url(URL);
      }
        Loading editor
    • Thanks.

      Seeing as we posted at the same time, here's another question in the case you did not see it:

      How do I make sure that the image only appears once and engulfs the entire screen (no black or white around it)? Because my images pop up two times, next to each other.

        Loading editor
    • Unfortunately, you can only have one or the other. Either you will have no empty space, in which case your image will be tiled; or you will not have the image tiled, in which case you will have empty space. This is because the image is only so big. To avoid tiling, add the following to your CSS.

          background-repeat: no-repeat;
        Loading editor
    • Ah, OK. Thanks. I'll try enlarging the image.

      Thank you for your help. If I need anything, I'll reply to this thread.

        Loading editor
    • When using multiple selectors, make sure to have a comma at the end of each selector except the last one. You are missing the comma so the CSS isn't working as expected.

        Loading editor
    • OK, thanks.

        Loading editor
    • Thanks.

        Loading editor
    • Some more unsolicited advice. Since your image is now very large, consider adding one (but not both) of the following to allow the image size to be adjusted for the view window size of the reader (obviously maxing out at the actual image size).

          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;

      This adjusts the image size to cover the entire page body. This may cause the image to be skewed and/or cropped.

          -webkit-background-size: contain;
          -moz-background-size: contain;
          -o-background-size: contain;
          background-size: contain;

      This adjusts the image size to fit within the page body. This may cause empty space either above/below or left/right of the image depending on the view window's aspect ratio.

        Loading editor
    • Well, ok.

        Loading editor
    • Thanks, but how do I apply it? It seems not to work.

        Loading editor
    • Right now, in MediaWiki:Common.css, you have:

      .page-Sleet.skin-oasis,
      .page-Sleet_Underground.skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/e/e5/Sleet_Fanart_big.v2.png/revision/latest?cb=20171218102239);
      }

      Assuming you want to implement my suggestions, this is one of the possabilities you want:

      .page-Sleet.skin-oasis,
      .page-Sleet_Underground.skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/e/e5/Sleet_Fanart_big.v2.png/revision/latest?cb=20171218102239);
          background-repeat: no-repeat;
          background-position: center;
          -webkit-background-size: contain;
          -moz-background-size: contain;
          -o-background-size: contain;
          background-size: contain;
      }

      The following should also work and would select all subpages incase you add more. Otherwise, you would need to add each subpage individually. Of course, it is up to you whether or not to use it.

      .page-Sleet.skin-oasis,
      [class*=page-Sleet_].skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/e/e5/Sleet_Fanart_big.v2.png);
          background-repeat: no-repeat;
          background-position: center;
          -webkit-background-size: contain;
          -moz-background-size: contain;
          -o-background-size: contain;
          background-size: contain;
      }
        Loading editor
    • The subpage selector doesn't work for some reason.

        Loading editor
    • Some times it takes time for CSS changes to take effect. It seems fine to me now. The only thing is you need to update your URL. You know, instead of uploading under different names, you could just update the old image. Then you don't have to keep changing the url. To do that, just upload with the same name and the old image will be overwritten.

        Loading editor
    • All right. Thx!

        Loading editor
    • I removed the class thing because it still doesn't work even after thirty minutes. I might request a bot to auto-update the CSS with each subpage.

        Loading editor
    • Seems to be working now; although your URL is incorrect again.

        Loading editor
    • Ok.

        Loading editor
    • I'll check.

        Loading editor
    • I'm using https://www.photoenlarger.com/ to enlarge my pictures so that they wouldn't repeat or leave empty space, like on the Glitchtale Wiki. What would be an ideal size?

        Loading editor
    • Withersoul 235 wrote:
      I'm using https://www.photoenlarger.com/ to enlarge my pictures so that they wouldn't repeat or leave empty space, like on the Glitchtale Wiki. What would be an ideal size?

      500px?

        Loading editor
    • http://glitchtale.wikia.com/wiki/Papyrus

      I mean like that, where the size is literally perfect.

        Loading editor
    • It isn't perfect, they use background-size: cover;; one of the options I mentioned in #31.

        Loading editor
    • Ah, I see.

        Loading editor
    • It's working very well (on another wiki of mine, the Character Stats and Profiles Wiki) ! Thank you for your help!

        Loading editor
    • Withersoul 235 wrote:
      It's working very well (on another wiki of mine, the Character Stats and Profiles Wiki) ! Thank you for your help!

      Alright, good luck!

        Loading editor
    • Thx!

        Loading editor
    • Withersoul 235 wrote:
      Thx!


      No problem.

        Loading editor
    • Another question; how do I target specific parts of a page? I tried applying a custom font to my userpage but it did the opposite of what I was aiming for; overwriting all things of which customization would violate the Customization Policy and leaving the rest intact. So I had to take the code out.

        Loading editor
    • Also, how do I import fonts that aren't from Google Fonts?

        Loading editor
    • For your first question, I would need more details to give a decent response. For your second, see if the following meet your needs.

      Thread:1336561

      Thread:1311510

      Thread:1299460

        Loading editor
    • Ok.

        Loading editor
    • Thanks.

      I would like to target the entire userpage, sans blacklisted stuff like the WikiNavigation.

        Loading editor
    • Try:

      .page-User_Withersoul_235 .WikiaArticle .mw-content-text <other selectors> {
      <desired CSS>
      }
        Loading editor
    • Ok.

        Loading editor
    • I'll give it a shot.

        Loading editor
    • Withersoul 235 wrote:
      I'll give it a shot.


      Thanks.

        Loading editor
    • It works! Thank you very much!

        Loading editor
    • Withersoul 235 wrote:
      It works! Thank you very much!


      No problem.

        Loading editor
    • How do you specifically target pages with a certain template/category?

      And how do you put up a wiki-wide background w/ CSS? I'm aiming to set a script so that the looping background of my wiki would take up the screen, as I did with individual pages.

        Loading editor
    • I think I found the answer to question 2.

        Loading editor
    • The first is not possible with CSS alone. You would need to use JS which I unfortunately cannot help you with. If FANDOM Open Source Library already has something for this, it would be easiest to use their solution. Typically, basic setup involves simply adding an import statement to MediaWiki:ImportJS. You can see and example here. If that wiki doesn't already have a solution, you will likely have to write your own JS (or have someone do it for you). In that case, it would go on MediaWiki:Common.js. Note that this would require the JS to go through the review process.

      The second, just to be sure, is done using the theme designer and File:Wiki-background.

      For the second:

      body.skin-oasis {
          background-repeat: no-repeat;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }

      Note that this solution is for your current settings in the theme designer. If you change those, this CSS will need to change as well. Also note that once you do this, your other CSS just needs to be the following.

      .page-Sleet.skin-oasis,
      [class*=page-Sleet_].skin-oasis {
          background-image: url(https://vignette.wikia.nocookie.net/video-game-adaptation/images/e/e5/Sleet_Fanart_big.v2.png);
      }
        Loading editor
    • Alright, thanks.

        Loading editor
    • Two questions.

      1. How do I insert exceptions within CSS? As in, "target all of that, but not that"?

      2. How do I target this page?

        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