The upcoming layout change, showing more of the custom background skin.
Over the past few months we have been exploring ways to make the site layout more consistent to support easy development of new features and functionality. As a result, on October 3 we will be releasing a sitewide update to a few aspects of the Wikia skin. Since many of you have customized your wiki's layout, you will likely want to adjust your background and customizations to account for these changes. The backgrounds provided in Theme Designer will be updated to accomodate these changes. If your wiki has a custom background, it may need to be updated.
We know that any change to the look and feel of your wiki needs to be considered carefully, so we have grouped these updates together into one release so that you only have to make one round of changes. To help with this, we have created a way for you to preview how your wiki will look with these updates, allowing you time to adjust your wiki before these changes are live.
A quick summary (tl;dr)[]
- Site width is increasing to 1030 pixels, and more of the background will become visible at the top center and bottom center, which means background files may need updating
- Expanded Wiki Navigation will be enabled on all wikis, which means navigation menu items may need to be reviewed
What's changing[]
Layout width increase[]
The upcoming layout change gives 10px of extra width for the content area.
The full page width will increase by 30 pixels, to 1030 pixels. One result of this change will be an additional 10 pixels of space for article content. The breakout of this 1030 pixel space will be (from left to right):
- A 10 pixel margin at the left edge
- 670 pixels of space for article content (i.e., in the main namespace or any other namespace where the right rail is visible)
- A 10 pixel margin
- The right rail, when visible, will be 330 pixels wide
- A 10 pixel margin at the right edge
These changes may seem subtle, but they allow our engineers and designers to work with a more consistent grid layout when new features are being built. In the coming weeks, you will see another blog post from the Wikia Design team that will provide a more detailed description of the grid-based layout and why these adjustments are beneficial. (Update: this post is now live at User blog:Eric!/The Wikia Grid layout)
Wikia header and toolbar[]
The header bar that contains the Wikia logo, Wikia-managed links, your avatar and username, will change to span the full width of your browser window. There will now be a space between this header and the top of the wiki page. The reason for this change is to provide better visual separation between Wikia-wide content (the header), ads, and the wiki-specific content. This new space will show part of your wiki's background. Currently some wikis have a background where the central portion is empty of image content, since that has never been visible before. So our suggestion is to fill out the central portion of the background with image content or a solid color. Note that the vertical size of this space may vary depending on the height of ads that are placed there.
The updated Wikia Header
The toolbar at the bottom of the site will also change to span the full width of the browser window, mirroring the top header. It will remain anchored to the bottom of the window and will no longer be "pushed up" by the footer content at the bottom of every page. Users will now have the option to collapsible the toolbar via a button at the lower right corner. When the bar is in the collapsed state, 25 pixels of the background will be visible between the bottom of the content and the bottom of the browser window.
[]
The wiki navigation -- the menu that shows to the right of your wordmark -- will change to the newer style for all wikis. This style, to date, has been known as "Expanded Wiki Navigation". There are two main reasons for this change:
- Site performance: With both the older and newer styles as an option, the JavaScript for both styles must be loaded regardless of which one is enabled. With a single option, loading time will be reduced and site performance will be improved.
- Better user interaction: Our click tracking shows more frequent use of the custom items on the wiki navigation for wikis with this newer style.
The newer wiki navigation style
This change means that "Expanded Wiki Navigation" will be removed from Special:WikiFeatures altogether on October 3. We strongly recommend that admins enable Expanded Wiki Navigation before that date, in order to make any adjustments that might be needed to headings or custom CSS. Help for using this style of wiki navigation can be found here.
How to preview the changes[]
You can preview the wider layout and wider header on any wiki page, by adding ?wikiagrid=1&wikiafullheader=1 at the end of the URL in your browser's address bar and then reloading the page. Example: http://community.wikia.com/wiki/Community_Central?wikiagrid=1&wikiafullheader=1
These URL parameters will not remain if you browse to another page via a link, they will need to be manually entered in the address bar each time. Note: The change for the bottom toolbar will not be visible using the preview method. When using this method, you may see the a few bugs around the position of specific elements in the overall site layout. These bugs will be resolved by October 3, so fear not!
Our design team has created files that will help you prepare updated background by October 3, if needed. We know that any change to the look and feel of your wiki needs to be carefully handled, and it is our hope that the information above and the previewing options will make this change as easy and painless as possible.
These .jpg files can serve as a guide for creating updated backgrounds. The file size must be 150KB or less, and the suggested dimensions are 1700x800.
Update: For Photoshop users, we have also updated this .psd template that some of you may have used in the past.