FANDOM


NOTE #1: The dimensions of the background image will have to be exactly the same as the wiki's current background image for this to work, or so I was told by the Huddler designer (Peter Galletta) who figured it out. To find the dimensions of the wiki's background image, go to File:Wiki-background.

NOTE #2: This solution will not work if the "no split" option is selected on the wiki's theme designer.

.page-This_Is_The_Title_Of_The_Page.background-dynamic.skin-oasis {
    background-color: #______;
}
.page-This_Is_The_Title_Of_The_Page.background-dynamic.skin-oasis:after, 
.page-This_Is_The_Title_Of_The_Page.background-dynamic.skin-oasis:before {
    background-color: #______;
    background-image: url("http://");
    background-repeat: no-repeat;
}

.page-This_Is_The_Title_Of_The_Page.background-dynamic.skin-oasis::before {
    margin-left: -1000px;    
}

.page-This_Is_The_Title_Of_The_Page.background-dynamic.skin-oasis::after {
    margin-right: -1000px;
}

NOTE #3: If the page's URL has special characters, such as a blog post, then the special characters have to be replaced with an underscore. See the example below.

.page-User_blog_Username_This_is_the_blog_post_title {

Making the edges of the background image "disappear"

In most extra-wide browser widths, the edges of a background image can clearly be seen, usually to the detriment of page design. An easy trick to avoid this problem is to make sure that the edges of the design fade to the color of the "infinite" background. Most background designs tend to be on a dark background, like black or a deep blue.

Generally, you'll have to take two steps:

  1. Fade the background design in Photoshop or similar programs, usually by the use of a gradient mask (See this very brief tutorial for one possible way to do this.)
  2. Assuming that you're fading to black, add the following to the Method #1 code, above:
html body.background-dynamic.skin-oasis { 
     background-color: #000000; 
     }
Or, if you prefer Method #2, do this, instead:
html body.page-This_is_the_title_of_the_page.background-dynamic.skin-oasis {
     background-color: #000000;
     } 
Note, however, that — due to caching — you're usually able to see the results of Method #1 faster than Method #2

Making the "middle" bend to your will

Most page-specific backgrounds have a wholly different background color than other pages on the wiki. That's why the previous section is necessary. And while it's obvious how to change the main part of the background, that "middle" strip — the bit which expands in width as the browser does — is a slightly harder thing to get right.

It's comprised of three different classes — or rather one class and two pseudo-classes. The two pseudos are ::before and ::after elements of the main class, and they are comprised of a gradient. The true class is just a background color, even though the class name includes the word "gradient". Since gradients are technically images, you have to first remove the image, and then apply the background, like this:

body.background-dynamic.skin-oasis .background-image-gradient::before,
body.background-dynamic.skin-oasis .background-image-gradient::after,
body.background-dynamic.skin-oasis .background-image-gradient {
    background-image:none;
    background-color: #6d9918;
}

Another trick you can do is to limit the height of the gradient in the middle. This will allow the gradient to exist at the top of the page, but eliminate it at the bottom. That way, there's no odd "streak" in the middle of the page when you scroll alllll the way down. This is particularly helpful on wikis with very dark, even black, backgrounds. So, in lieu of the above code, use this:

body.background-dynamic.skin-oasis .background-image-gradient::before,
body.background-dynamic.skin-oasis .background-image-gradient::after,
body.background-dynamic.skin-oasis .background-image-gradient {
    height:50%;
}

No background? You could have a WikiFactory problem.

On very rare occasion, you may find that you've entered the code on this page precisely correctly and yet you're not seeing your page-specific design show up. This could mean that something is screwed up, deep within the bowels of your target wiki's code.

It's always worth trying this method:

  1. Go to WikiFactory
  2. Look up your target wiki
  3. Go to the Variables | General tab
  4. Look up wgOasisThemeSettings
  5. Click on it, then scroll down to the Variable value section
  6. In the array, look for the parameter background-dynamic
  7. If you don't see that variable, this is not the cause of your problem.
  8. If you see the variable and it reads 'background-dynamic' => 'true', this is not the cause of your problem
  9. However, if it reads 'background-dynamic' => 'false', this is very definitely the problem. Change false to true, save your change, and you should find that you now have a page-specific background!

Of course, there could be other WF variables that could be set in such a way that prevents this code from working, and there have definitely been cases reported of this method not working in the most modern versions of Safari.

If nothing is wrong in wgOasisThemeSettings, you may have to look more deeply into the WF variable list. Consider going to Variables | Compare and contrasting your target wiki against june-11-2015 (or, ID 1206904). This wiki was created on 11.06.2015 and has a working page-specific background. Its WF variable list is thus a pristine example that you can use to discover flaws in your target wiki's variable list.

For reasons not yet understood, however, 11 June does not work in Safari, whereas E3 does, despite having exactly the same code in their respective E3Background CSS files.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.