FANDOM


  • As we developed fluid layout, one of the bigger questions that had to be addressed was the behavior of the site background. We wanted to find a solution that wouldn’t make the creation of a background image more difficult, and would not force every single community to update their background when fluid layout was released to everyone. Below are some details about how the background will operate as the size of the screen (or browser window) increases.

    These screen shots show the background of Muppet Wiki at a "medium" screen size, similar to how Wikia's fixed width looks today.

    Here’s what happens as things get bigger – the background file is split down the center, at which point the solid background color (as set in Theme Designer) appears. A gradient transition is added between the image halves and the solid color. You can see that the edge of the content space’s background tracks consistently to the same places on the image background, as the size changes. (These images show the same background at the largest fluid size, 1270px wide.)

    For some communities, choosing a solid background color that works well with the background image's color (like the example above) will be the best way to have a more "seamless" background experience in the small portion that shows below the Wikia header.

    Another option may be to choose an image that holds up well when it's split. For example, with any color chosen (black, in the example below), Muppet wiki's background still gives the effect of a curtain "opening".  If a skin design uses transparency in the content area, the entire background is visible most of the time, so careful image selection is even more important.

    The background image will still be uploaded in the same way via Theme Designer. Some communities may not even need to update their background at all, if it’s an image that won’t look odd when it’s split down the middle.

    Fixed backgrounds smaller than 1030px will not be split. The behavior for tiled backgrounds won’t change, and tiled may indeed be easiest solution for fluid backgrounds.

    When the site/browser scales small enough to where no background is visible (as is the case on most tablets), the background image and stops being loaded altogether and the inner content area's background color takes over.

      Loading editor
    • As an example I have a 1920x1080 BG here w:c:thiefgame and I just tested it on the community test, and it looks bad. I'm on a 1920x1080 monitor and an image of that size should not be expanded. You need to rethink how this function operates.

      Edit: here is another one with a slightly different problem. w:c:knj the BG is only vertically tiled via css and the article BG is transparent to give the look of a notebook. The only way I can think to fix this one would be to move the grid texture to the article BG and not have it transparent, but then I would need the main BG image to be 2 images that "grip" the left and right edges of the article page, maybe that can be done in .js ??????

        Loading editor
    • While I like the idea of it splitting, a lot of wikis use a semi-transparent background on the content of the page, and a background that has a centered image that appears underneath it. As such, I think allowing there to be a second (separate) background that is centered behind the article -- that wouldn't expand past the content -- would be a great way to allow this effect to remain.

        Loading editor
    • Ah, I wondered how backgrounds would be affected with this change. It's great that you guys addressed it instead of just letting every Wiki figure it out themselves. The automatic split looks amazing, most Wikis only have graphic images on the side of the pages and then just a plain color in the middle, so this is perfect for those, as well as my main Wiki. However, some Wikis use a background with a transparent content area, if that makes sense. The relevant background content stretches from left to right, so if that is split in the middle, it wouldn't look good at all. I guess having that fixed, making it not split, would be the best solution...?

      Also, that last paragraph is good news, it's not needed and it'll make loading times faster, so good thinking.

        Loading editor
    • Thanks for your replies, we definitely want hear more on this subject. Feedback and suggestions will help to determine if we make changes or do further development in this area.

        Loading editor
    • My wiki has multi-background JavaScript and uses this CSS code.

      body {
      background-position-y: top !important;
      background-size: 100% 100% !important;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      }
      

      Question is, what would be affected?

        Loading editor
    • Great idea ! 

        Loading editor
    • It looks like the test I did on the community test wiki now has different results, and the split keeps the BG image "edged" to the article which is good. This was different from what I originally saw.

      Wikis use backgrounds in a lot of different ways, so it's kinda hard to come up with suggestions that work with all of them.

      Most problems occur with transparent articles and custom css with things like centered or vertical tiling.

      Is there a "?useskin=darwin" option we can use to test on our own wikis instead of copying stuff to the community test wiki? It would make it easier to find solutions.

        Loading editor
    • How will this affect a wiki that has a transparency on only the main page?

        Loading editor
    • Sxerks wrote:
      Is there a "?useskin=darwin" option we can use to test on our own wikis instead of copying stuff to the community test wiki? It would make it easier to find solutions.

      We don't have that option set up. Note that we're not introducing a new skin, this is the current Wikia skin simply evolving. It's also possible that some of the changes in Darwin's future stages would not be possible to enable with a URL parameter.  However, we're discussing ways that we can make fluid layout available for wider testing, so it's good to know that users are interested in doing that.

        Loading editor
    • Thailog wrote:
      How will this affect a wiki that has a transparency on only the main page?

      I expect that there would be no change there.  Adjustments to your custom CSS (at least minor ones) will probably be needed for fluid layout, but transparency only for the main page should be no problem.

        Loading editor
    • How will this affect headers (images behind top navigation)? Whatever splitting them or leaving the edges with different than the desired background, I guess it will screw them over too...

      Overall I'm not liking what I'm hearing and seeing from this fluid layout. It will mess for sure quite a lot article styles and custom css. Pages will look differently on different wides, and presumably a lot of people will edit the page to look good on their wide, ignoring how will look on different wides (even now there are a lot of people now using "Preview" button).

        Loading editor
    • Unok wrote: How will this affect headers (images behind top navigation)? Whatever splitting them or leaving the edges with different than the desired background, I guess it will screw them over too...

      I just test your header on the test wiki and it is aligned left by default, and then repeats horizontally. So in your case it still looks good but other wiki many have to edit their images to look good repeated, or make a header that is 1562px wide.

        Loading editor
    • Ahm when is the change gonna be impemented?

        Loading editor
    • So this basically means: Every wiki that uses a bg-picture with only one object in the center (to look more organized) is going to be f***ed. Just perfect. Brilliant idea.

        Loading editor
    • Nightmarecorporation wrote: So this basically means: Every wiki that uses a bg-picture with only one object in the center (to look more organized) is going to be f***ed. Just perfect. Brilliant idea.

      If you use Wikia.css instead of the Theme designer and use something like this:

      body {
      background: url("http://images1.wikia.nocookie.net/bindingofisaac/images/5/50/Wiki-background") no-repeat scroll center top #000 !important;
      background-attachment: fixed !important;
      }
      .WikiaPage {
          opacity: .8;
      }
      

      the background image will not be split. I just tested this on the community test wiki.

        Loading editor
    • Thanks for testing it. I'm not with wide screen, so I had to ask a friend to make me a screenshot. It doesn't look bad, but it will still need adjustments (and some others on other wiki where I put similar thing).

      Talking about adding background through wikia.css, on most wikis I'm part, the background it set through it, because it's hard to make desired background with decent quality and 150kb. If it's not splitting when it's added through wikia.css, does that mean the background will stay behind the content page and won't move with the edges (this is for wikis that don't use opacity)? If that's the case, this is even more bad than being split...

        Loading editor
    • Unok wrote: Thanks for testing it. I'm not with wide screen, so I had to ask a friend to make me a screenshot. It doesn't look bad, but it will still need adjustments (and some others on other wiki where I put similar thing).

      Talking about adding background through wikia.css, on most wikis I'm part, the background it set through it, because it's hard to make desired background with decent quality and 150kb. If it's not splitting when it's added through wikia.css, does that mean the background will stay behind the content page and won't move with the edges (this is for wikis that don't use opacity)? If that's the case, this is even more bad than being split...

      I'm with you in this.

      I'm wondering the exact same thing: if we use .css to add the bg, it won't split, so what happens if someone with a wider screen browses the wiki?

      Is there any way for an option in css or whatever to upload different sizes of the same pic to accommodate different widths?

        Loading editor
    • 452

      I don't see why splitting the background is better than using "background-size: 100%;" to ensure it displays the same at all resolutions.

      Perhaps the split background should be an option: Tiled, As-is, Stretch, Split. Set Split as default, if you want, but give people the choice to opt-out.

      I would also like the opportunity to enable Darwin in my preferences - right next to monobook - before compulsory rollout, in order to ensure that existing CSS is compatible ahead of time.

        Loading editor
    • 452 wrote: I don't see why splitting the background is better than using "background-size: 100%;" to ensure it displays the same at all resolutions.

      Perhaps the split background should be an option: Tiled, As-is, Stretch, Split. Set Split as default, if you want, but give people the choice to opt-out.

      I would also like the opportunity to enable Darwin in my preferences - right next to monobook - before compulsory rollout, in order to ensure that existing CSS is compatible ahead of time.

      Having such an option would be nice, some backgrounds are not implemented to be split and should thus not be split.

      Wikia is going to provide a skin for Darwin, when the time comes, but before Darwin releases, you will have enough time to test your configuration.

        Loading editor
    • 452

      BertH wrote:

      Sxerks wrote:
      Is there a "?useskin=darwin" option we can use to test on our own wikis instead of copying stuff to the community test wiki?

      We don't have that option set up. Note that we're not introducing a new skin, this is the current Wikia skin simply evolving. It's also possible that some of the changes in Darwin's future stages would not be possible to enable with a URL parameter.  However, we're discussing ways that we can make fluid layout available for wider testing, so it's good to know that users are interested in doing that.

        Loading editor
    • 452 wrote:

      BertH wrote:

      Sxerks wrote:
      Is there a "?useskin=darwin" option we can use to test on our own wikis instead of copying stuff to the community test wiki?

      We don't have that option set up. Note that we're not introducing a new skin, this is the current Wikia skin simply evolving. It's also possible that some of the changes in Darwin's future stages would not be possible to enable with a URL parameter.  However, we're discussing ways that we can make fluid layout available for wider testing, so it's good to know that users are interested in doing that.

      Oh... Okay, I misunderstood something then, apologies.

        Loading editor
    • I have a question...why we can't look at the background if you bigger it,it can't seen?

      And if you bigger it,the background will be a non-sense if you do that because it cannot be seen,am I right?

        Loading editor
    • Wes Jaren 23 wrote:
      I have a question...why we can't look at the background if you bigger it,it can't seen?

      And if you bigger it,the background will be a non-sense if you do that because it cannot be seen,am I right?

      With Darwin's fluid layout, you won't start to see more of the background until you've reached the maximum width of the content area (1270px for the article space; 1600px for the entire content area including the right rail and margins).

        Loading editor
    • I hv a question=

      how do you get acsess to the theme desiner? I know you need special privlages and all, but how do I get them?

        Loading editor
    • @Silky, you must be admin priveledges to access theme designer. Getting adminship is different on each wiki.

        Loading editor
    • What are the specs for a background?

        Loading editor
    • Ok, it seems it is 1700 wide by 801 high.

        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.