Help:Theme Designer

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

Step-by-step

 * As an admin of a community, you can find a link to the Theme Designer in the My Tools menu on the toolbar or in the Admin Dashboard. You can also navigate to it directly by visiting Special:ThemeDesigner on your wiki.
 * There are three sections for customizing the wiki:
 * Community Identity: Set the wiki's name, logo, and favicon.
 * Header and Background: Define the wiki background and color the navigation.
 * Article Styles: Define the colors for the article background and links, plus choose a font for headings.
 * Every change made is immediately seen on the preview below, so you can see how your theme will look before you save it.

When you are finished, click "Save" and your new theme will appear to users instantly!

Community Identity

 * Community name:: You see the Community name in the header next to the logo. Note that this does not change the sitename of the wiki.
 * Community logo: The community logo is a graphical addition to the community name. Users can navigate to their preferred landing page of the wiki by clicking the logo on any page.
 * Logos can only be .png files and can have a maximum size of 500px x 500px.
 * The logo is stored at File:Site-logo.png.
 * Use in sticky nav: will include the logo on the far left of the sticky nav, visible after scrolling down.
 * Favicon graphic: Favicons are small icons that 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.
 * Favicons can only be .ico files and must be 16 × 16 pixels in size. You can learn more about Favicons here.
 * Theme designer.png

Header and Background
The background is the area outside of the content area and appears on all pages of your wiki. It can be a solid color, an image, or both.
 * Background image: If you'd like your wiki to have a background image, click in this area to upload one. You can upload a .jpg, .png, or .gif. The maximum file size is 1 MB.
 * Help:Background has further information and recommendations related to creating a custom background image for your community.
 * Image display controls whether the image covers the entire screen or just the header area above the article.
 * Background image style contains various options for how to display the image. Most wikis will use the first option, "cover", which stretches the smaller dimension of the image as much as needed to fill the full screen (equivalent to CSS ).
 * You can tile the background image (so that it repeats across the page) by selecting one of the "tile" options.
 * If you choose one of the "fit" options, the image will be aligned to the selected area, and the larger dimension of the image will be stretched to fit (equivalent to CSS ).
 * Image opacity sets how see-through the background image is against the background color.
 * Community background color: sets a solid background for the wiki.
 * Sticky nav background color: sets the background color of the sticky nav, visible at the top of the screen after scrolling down. Text color is automatically determined for contrast.
 * Community header color: sets the text color of the community header nav. Try to pick something that's legible against the background image and color.

Article Styles

 * Headings font: provides some options for changing the font family of headings within articles.
 * Accent color: sets the background color of the quickbar, certain buttons, infobox headings, and other details of the wiki.
 * Link color: is the color of most links. Try to pick something that has good contrast with the article background, is distinct from normal text, and avoid red colors as red links denote missing pages.
 * Article background color: is the background color of the main content area. The text color will be automatically determined for contrast.
 * Changing this will also change the background color of menu dropdowns (such as the navigation and "Edit" button dropdowns).

Theme History

 * If you would like to see or revert to a past version, you can do so. Click on a past version and it will load in the preview area.
 * Only the last 10 versions are saved. Minimizing the amount of times you save by making all your changes at once will keep the history informative and usable.
 * Theme designer - history.png

Next pages

 * Learn more about how to create a custom background image for your community
 * Learn more about your wiki's light and dark themes
 * Learn how to edit the navigation bar
 * Learn how to edit your My Tools

Further help and feedback
ar:مساعدة:مصمم المظهر ca:Ajuda:Dissenyador de temes de:Hilfe:Theme-Designer es:Ayuda:Diseñador de temas fi:Ohje:Teemansuunnittelija 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:Справка:Конструктор тем tr:Yardım:Tema Tasarımcısı uk:Довідка:Конструктор тем vi:Trợ giúp:Thiết kế chủ đề zh:Help:主題設計器