(file size limit is not "advice" it is a hardcoded restriction, should be with the rest of the "size" related content) |
|||
| (24 intermediate revisions by 19 users not shown) | |||
| Line 1: | Line 1: | ||
| + | A '''background''' can help build a wiki's visual identity and make it stand out. This page explains the various customization options available to your community. |
||
| − | <jwplayer media-id="U38WGVTm" />This page has recommendations on how to create an optimal background skin for your community. The background image is uploaded via [[Help:ThemeDesigner|Theme Designer]]. |
||
| − | == |
+ | == Overview == |
| + | A wiki's background is set through the [[Help:Theme Designer|Theme Designer]]. There are two components to the background: an image and a color, both of which can be different for the wiki's light or dark theme. |
||
| − | Here are some details about the layout and the way a Fandom site behaves on different displays: |
||
| + | === Image === |
||
| − | * On smaller displays, such as on iPads with their 1024px-wide screens, the layout will automatically size the content area to fill the whole screen so the background will not be visible. |
||
| + | The background image can be uploaded in PNG or JPG formats, as long as the file isn't larger than 1 MB. If it's larger, you can try reducing its size by increasing the compression, reducing the quality, or lowering the dimensions. If the image is a PNG file, you can convert it to a JPG file to lower the file size. |
||
| − | * On larger displays (over 1066px), the background will be visible on either side of the content area. |
||
| − | * The content area stops expanding once it reaches its maximum width of 1240px. |
||
| + | There are two ways to display the background image: |
||
| − | To make the single background image show correctly at all these various sizes, the image is split in half and the center space (mostly covered up by the content area) is filled with a solid color. You can choose this color in Theme Designer. A solid color will also be seen beyond the edge of the background image, on the bottom and sides, for very large screens. |
||
| + | *'''Header''' will display the image in the wiki's header area at the top. This is best for banners and other horizontal images. The recommended dimensions for header images are 2880x656 pixels. |
||
| + | *'''Full-screen''' will display the image through the entire background area. This is best for larger designs. The recommended dimensions for full-screen images are 2880x2880 pixels. |
||
| + | Both display types can further be customized by a background image style: |
||
| − | '''Note:''' If you do not want your background skin to be split, you must upload an image that is at least 2000px wide, at which point a Theme Designer option ("no split") will become available that allows the background skin to remain in one piece, no matter what size the content area is. |
||
| + | *'''Cover''' will stretch the image to fill as much of the browser height as possible. This is best for very large images. |
||
| + | *'''Tile''' will repeat the image either vertically, horizontally, or both. This is best for smaller images designed to be repeated. |
||
| + | *'''Fit''' will confine the image to the width of the browser. With the header display type, the fit style also positions the image in the top-left corner, the top-right corner, or the middle. |
||
| + | Regardless of the display and style, the background image will stay in a fixed position and remain visible while scrolling up or down on the page. |
||
| − | The image cannot be larger than 300 kilobytes (KB) in file size. You may need to reduce image quality when saving the file to achieve this size. |
||
| + | The opacity of the image can also be changed by moving the slider below the style selection. 100% is fully opaque and 0% is fully transparent. |
||
| − | Creating a background skin that can adapt to these different sizes may seem like a challenge, but don't worry. We have some tips to help you. |
||
| − | === |
+ | === Color === |
| + | The '''community background color''' option in the Theme Designer allows you to change the color of the background area. By default, when no background image is uploaded, the color is the only thing that appears. If an image is uploaded, depending on the display and style selected, some sides of the image will fade into the color. Lowering the image's opacity will also display the color through the entire image. |
||
| − | To create the best possible skin, it's helpful to use a program that allows you to edit images, such as Photoshop, GIMP or Paint. |
||
| + | The '''community header color''' option allows you to change the color of the text and icons in the header area. This should be changed if the default option does not appear readable against the background image and/or color. |
||
| − | Here is a background diagram to use as a reference: |
||
| ⚫ | |||
| − | [[File:BackgroundDiagram.png|center|700px]] |
||
| ⚫ | |||
| ⚫ | |||
| + | * Consider the whole of the site when making the background. A busy, vibrant wallpaper may draw readers' attention away from your wiki's content. Conversely, a muted, subtle background can be the finishing touch your wiki needs. |
||
| + | * In general, Theme Designer is recommended for uploading background images and designing your wiki. Backgrounds added through custom CSS can cause adverse effects after platform updates or changes. |
||
| ⚫ | |||
| − | * '''Image Space''': The areas outside the grey content area will always show the background image. The parts in dark grey only sometimes do, depending on the visitor's screen size. Make sure your image looks good in the darker areas. |
||
| ⚫ | |||
| − | * '''Content Space''': The light grey area in the middle of the template is where the wiki page content will go. By default, the background will not be visible at all behind this area, but transparency can be added via the Theme Designer. |
||
| + | * Learn more about [[Help:Background/gradients|gradients]] |
||
| ⚫ | |||
| ⚫ | |||
| + | == Further help and feedback == |
||
| − | It may be helpful to use a background template to make your own creative background skin! If you'd like, you can download a simple template as a PSD file, which can be used in Photoshop or GIMP, [[w:File:Background template.psd|here]]. |
||
| ⚫ | |||
| + | [[be:Help:Фон]] |
||
| − | == Some advice for Theme Designer == |
||
| − | * The wider the color blend/gradient on the skin, the smoother the transition will be to the background color. See [[Help:Theme Designer/gradients]] for more details on how to create gradients on a background image. |
||
| − | * You should not make the content space highly transparent, because this will make it harder to read the content. |
||
| ⚫ | |||
| ⚫ | |||
| − | * Always try to use the Theme Designer to upload your background image and to design your wiki. Backgrounds added via custom CSS may be unexpectedly affected by system updates from Fandom and may also increase the time it takes to load a page on your community. |
||
| − | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| − | |||
| ⚫ | |||
| ⚫ | |||
[[de:Hilfe:Hintergrund]] |
[[de:Hilfe:Hintergrund]] |
||
[[es:Ayuda:Fondo]] |
[[es:Ayuda:Fondo]] |
||
| Line 55: | Line 54: | ||
[[vi:Trợ giúp:Ảnh nền]] |
[[vi:Trợ giúp:Ảnh nền]] |
||
[[zh:Help:背景]] |
[[zh:Help:背景]] |
||
| + | |||
[[Category:Help]] |
[[Category:Help]] |
||
[[Category:Administration help]] |
[[Category:Administration help]] |
||
| − | [[Category:Customization basics |
+ | [[Category:Customization basics]] |
Revision as of 13:02, 4 November 2021
A background can help build a wiki's visual identity and make it stand out. This page explains the various customization options available to your community.
Overview
A wiki's background is set through the Theme Designer. There are two components to the background: an image and a color, both of which can be different for the wiki's light or dark theme.
Image
The background image can be uploaded in PNG or JPG formats, as long as the file isn't larger than 1 MB. If it's larger, you can try reducing its size by increasing the compression, reducing the quality, or lowering the dimensions. If the image is a PNG file, you can convert it to a JPG file to lower the file size.
There are two ways to display the background image:
- Header will display the image in the wiki's header area at the top. This is best for banners and other horizontal images. The recommended dimensions for header images are 2880x656 pixels.
- Full-screen will display the image through the entire background area. This is best for larger designs. The recommended dimensions for full-screen images are 2880x2880 pixels.
Both display types can further be customized by a background image style:
- Cover will stretch the image to fill as much of the browser height as possible. This is best for very large images.
- Tile will repeat the image either vertically, horizontally, or both. This is best for smaller images designed to be repeated.
- Fit will confine the image to the width of the browser. With the header display type, the fit style also positions the image in the top-left corner, the top-right corner, or the middle.
Regardless of the display and style, the background image will stay in a fixed position and remain visible while scrolling up or down on the page.
The opacity of the image can also be changed by moving the slider below the style selection. 100% is fully opaque and 0% is fully transparent.
Color
The community background color option in the Theme Designer allows you to change the color of the background area. By default, when no background image is uploaded, the color is the only thing that appears. If an image is uploaded, depending on the display and style selected, some sides of the image will fade into the color. Lowering the image's opacity will also display the color through the entire image.
The community header color option allows you to change the color of the text and icons in the header area. This should be changed if the default option does not appear readable against the background image and/or color.
Tips
- When making a skin, always consider the wide range of possible screen resolutions. The better your image is adapted to fit various screen resolutions, the happier your community will be.
- Wallpapers, key art, and image searches based on your community's topic can be a good idea to find some creative inspiration for your background.
- Consider the whole of the site when making the background. A busy, vibrant wallpaper may draw readers' attention away from your wiki's content. Conversely, a muted, subtle background can be the finishing touch your wiki needs.
- In general, Theme Designer is recommended for uploading background images and designing your wiki. Backgrounds added through custom CSS can cause adverse effects after platform updates or changes.
Further reading
- Learn more about using Theme Designer
- Learn more about gradients
- Learn more about using colors in your community's design
- Learn how to edit the wiki navigation
Further help and feedback
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article