Help:Theme Designer

The Theme Designer is an easy to use admin tool that allows you to quickly customize your wikia's theme and wordmark. Choose from a pre-set theme or design your own unique theme that fits your wikia's topic and community.

Step-by-Step

 * As an admin of a wikia, you can find a link to Theme Designer in the My Tools menu on the toolbar, or in the Admin Dashboard. You can also navigate to it directly by visiting the page, Special:ThemeDesigner, on your wikia.


 * You can access three tabs:
 * Themes: Choose from a variety of pre-set themes, which can be used in whole or modified.
 * Customize: Define background and page attributes.
 * Wordmark: Design how the wikia's name displays, upload a unique graphic wordmark, or add a favicon.


 * Every change made is immediately seen on the preview below, so you can see how your theme will look before you save it.


 * Theme_designer.png

Themes

 * You can choose from eleven pre-set themes by clicking on the theme you want. This will show you a preview of the theme below the designer.
 * If you want to change parts of the theme you choose, simply click on the customize tab, and modify links, button colors, and more.
 * Theme_designer_-_theme_tab.png

Customize

 * Background: The background is the area outside of the content area and appears on all pages of your wikia.
 * Select the background color of your choice in the color picker.
 * Depending on other settings you choose, a "middle" background color can be seen at larger screen sizes.
 * You can choose to add a background design by choosing one of the images in the graphic picker. Some of these are transparent images, and will use whatever background color you have already set.
 * If you would like to add your own background image, click on the graphic picker and use the upload tool available. You can upload a .jpg, .png or .gif. The maximum file size is 300 kilobytes. Background images may be divided in half on larger screens (most of the division is covered by the site's content area). This allows the same portions of the background image to remain aligned with the edges of the content area, no matter what display size the viewer has.
 * Help:Background has further information and recommendations related to creating a custom background image for your community.
 * You can tile the background image (so that it repeats across the page) by checking the "tile" box.
 * If you do not wish to tile the graphic, it will appear once, and the background color will appear in the remaining space.
 * You can fix the image (so it stays in place as you scroll down the page) by selecting "fix".
 * For non-tiled background images wider than 2000px, a "no split" option is available. Using the "no split" option will prevent the splitting in half (mentioned above), and may be helpful if you add transparency to your content area. With this option selected, the content area will cover different parts of the background image, depending on the viewer's display size.
 * Page: Page controls the colors of the buttons, links, header and content.
 * Click on the color swatch under each category to change the color. A color picker will appear to let you choose a color or add in a hex code.
 * You can change the transparency of the content area by moving the transparency slider.
 * Theme_designer_-_customize_tab.png

Wordmark

 * The wordmark can be either text or a graphic and appears on every page. Users can navigate to the main page of the wikia by clicking on the wordmark on any page.
 * Text wordmark:
 * The wordmark text is originally set to the wikia's sitename. To change it, click the edit button.
 * Text wordmarks are limited to 50 characters.
 * To modify the font, choose from the dropdown menu of fifteen font options, along with the size of small, medium or large.
 * Graphic wordmark:
 * You can create and upload your own graphic wordmark.
 * Graphic wordmarks can only be .png files and must be 250x65 pixels or less.
 * The wordmark graphic is stored at File:Wiki-wordmark.png.
 * Favicon:
 * Favicons are small icons appear at the top of your browser, and are frequently used in tabs and bookmarks.
 * You can upload a favicon using the upload tool. Select Choose File and then select "Upload" to complete the process.
 * Your favicon must be 16 x 16px with a .ico extension. You can learn more about Favicons here.
 * Theme_designer_-_wordmark_tab.png

Saving and past revisions

 * When you are finished, click Save and your new theme will appear to users instantly!
 * If you would like to see or revert to a past version, you can do so in Theme Designer. Click on a past version and it will load in preview mode.
 * Theme_designer_-_history.png

Tips
If you would like to explore freely while using Theme Designer, implement this code onto your Special:CSS.

/***************************************/ /* Free Explore mode on Theme Designer */ /***************************************/

.clickmask { visibility: ; }

To enable it, change the visibility value to "hidden" to navigate to another page besides the Example page. It can be disabled by changing it back to visible.

Notes: You cannot access any special pages (aside from Theme Designer) nor edit pages through it. This also goes with the comment editing for threads, but you can create a new comment on the page and on the message wall. Full-screen for videos especially the one's embedded from YouTube cannot be used. Once you refresh the page, you will be taken back to the example page. Have fun!

Next pages

 * Learn more about how to create a custom background image for your community
 * Learn how to edit the Community Corner
 * Learn how to edit the navigation bar
 * Learn how to edit your My Tools

Further help and feedback
ca:Ajuda:Dissenyador de temes de:Hilfe:Theme-Designer es:Ayuda:Diseñador de temas fr:Aide:Concepteur de thème it:Aiuto:Theme Designer ja:ヘルプ:テーマデザイナー ko:도움말:테마 디자이너 nl:Help:Themaontwerper pl:Pomoc:Kreator motywu pt:Ajuda:Designer de temas ru:Справка:Конструктор тем vi:Trợ giúp:Thiết kế chủ đề zh:Help:主題設計器