|
Tags: Mobile edit Mobile web edit |
| (30 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| {{inuse}} | | {{Lock}} |
| '''Background images''' are those image files which appear literally in the background of this and every page on this wiki. The bulk of these images is seen outside the page margins, but in reality the image extends underneath the entire page. If you look carefully, you can probably see that the image is dimly visible underneath the page. This unusual behaviour means that images proposed for our background must be prepared in a special way. This tutorial will first explain how the background image works, and then provide an explanation of how these images should be prepared by the user. | | '''Background images''' are those image files which appear literally in the background of this and every page on this wiki. Many wikis regularly use -- and change -- such images. However, we abandoned the use of background images at around the time of the broadcast of ''[[A Christmas Carol (TV story)|A Christmas Carol]]''. |
| ==How backgrounds work here==
| |
| Our wiki uses a special bit of CSS coding to ensure a couple of interesting dynamics.
| |
|
| |
|
| First, as already discussed, there is a distinct difference between the visibility of the image outside the page margin and the way it appears underneath the page. This is achieved by covering the entirety of the page with a translucent white background that sits between the page and the background image. Effectively, we've put a thin "gauze layer" in front of the background image. This improves readability of the foreground text, while also allowing the background image to offer subtle texturing.
| | In most page views, background images are not seen on Tardis. The main reason is because of the rise in tablet and phone usage -- where background images '''never''' show -- as well as page views containing background advertisements. Most people simply never see the background, so we've adopted a cleaner background look. |
|
| |
|
| Second, The picture remains in the same position, no matter how far down one scrolls on the page. If you'd like to see the difference between our page and that of the typical Wikia wiki, go to [[starwars:Yoda]] and scroll down. You'll note that their top-border image of [[starwars:Coruscant|Coruscant]] disappears when you scroll down the page. Our backgrounds, by contrast, stay put.
| | Therefore, it's the general design policy of the wiki '''not''' to have a background. |
| | | |
| What this means is that our page height shrinks from theoretically infinite to something much shorter — something governed by the actual height of your browser window. This eliminates the ''need'' to do tiled backgrounds, which are seen on most wikis that have background images, and allows us to create a single, unrepeated background that appears as a strip at the top of the page. It also gives us the flexibility to make something longer, if we choose. In essence, the page fits our design, not the other way around.
| | [[Category:Outdated policies|Background images]] |
| | |
| ==Parts of the page==
| |
| In order to understand how to make a background, we must first examine a page in detail. Consider the following example:
| |
| [[file:BackgroundExample.jpg|center|675px|thumb|This tutorial shall use the following terms to describe the various areas of the page. The width of the dark grey bit is the '''"page width"'''. The area where you see the lower [[Robot Yeti|Yeti]]'s left hand is the '''"left gutter"'''. The area where you see the upper Yeti's right hand is the '''"right gutter"'''. The blue line between the dark and light grety areas is the '''"margin"''', further defined as "left margin" or "right margin", as appropriate. The dark blue stripe at the top with the wikia logo is the '''"wikia header"'''. The distance from the top of the wikia header to the bottom of the dark grey bit is the '''"background image height"'''. '''"Background image width"''' is the width of the graphic you're placing behind the page.]]
| |
| ===Page width===
| |
| The page width is 1000px in the Wikia (sometimes called Oasis) skin. Since we had no CSS formatting prior to the advent of the Wikia skin, our site is automatically optimised for that skin. We do not, on this wiki, even pretend to support monaco, monobook or anything that came before. If you want to use your own, personal CSS style sheet, feel free. But we support Wikia Central's use of the Wikia skin and will not be developing stylesheets for other skins, until and unless Wikia moves own from Wikia skin. This means a fixed with of 1000 px.
| |
| ===Background image width===
| |
| The background image is not just the two [[Robot Yeti|Yeti]]. It's actually the entire browser width. The reason you can't see any difference between the grey towards the bottom of the pae and the grey around the Yeti is because the image is 1500px wide, but on a transparent background.
| |
| ===Gutters==
| |
| The main area of your design will almost certainly be the bit people see in the gutter. There are varying approaches on how you might fill the gutter. We might call the Yeti example above the "peek-a-boo" approach. Here, the aim is to make an image look like it's "peeking out" from behing the page. The '''background image width''' in such a case is quite deceptive. You might think that these two Yeti have individually been place on the page. In fact, they're on a 1500px X 400px ''transparent'' rectangle.
| |
| | |
| Another approach is to have a continuous strip of background imagery. A good example of this type of background is, as discussed before, at [[starwars:Han Solo|Wookieepedia]].
| |
| | |
| An important thing to remember about gutters is that they completely disappear if the user chooses to zoom his or her browser. Some users therefore never see this element of the design. For this reason, unless your background image is essentially a pattern, you don't want to have an image occupying over 250px of the gutter. In fact, much over 150px is stretching it.
| |
| | |
| ===Wikia header===
| |
| Although background images technically start at the very top of the wikia header region, the ''bottom'' of the wiki header should be considered our top margins. Note that the right Yeti's head is below the bottom of the wikia header. To make this happen, give your background images a 50px header of blank, transparent background.
| |
| ===Background image height===
| |
| The background height can really be anything you want it to be, but 400px is a good number to shoot for. It's not too short or too tall. Page backgrounds generally work better when they're occupying the top third of a page, which 400px would, on most computer broswers. The only real restriction with height is that you don't want it to be ridiculously tall, like 800+ px.
| |
| ==Technical specifications==
| |
| ===File format===
| |
| Background images ''must'' be in [[wikipedia:PNG|PNG]] format. It's the only allowed format. Background images ''must'' contain transparent elements, and the PNG format is the only transparency-enabled format which wikia allows for backgrounds. Unfortunately, if you do not have software which allows you to create PNG files, you cannot submit backgrounds to our wiki.
| |
| ===File size===
| |
| Wikia restricts the size of the file to 100mb. Please try to submit files which are less than this. If you find, however, that you just can't make it work, go ahead and submit it, as long as it's in the PNG format. We may be able to compress it or crop it, or put it into a different variety of PNG. '''Still it is preferred that you present us with a file that we can use without alteration.'''
| |
| | |
| [[category:TARDIS Index File Wiki]]
| |
