(Adding categories) Tag: Help |
(-be) Tag: Help |
||
| (18 intermediate revisions by 13 users not shown) | |||
| Line 1: | Line 1: | ||
| ⚫ | |||
| − | <jwplayer media-id="U38WGVTm" /> |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | The background image |
||
| ⚫ | |||
| − | The final appearance of the background will depend on several factors, the most important of which are the '''display''' and the background's '''dimensions''': |
||
| + | 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. |
||
| + | === Image === |
||
| − | * On smaller displays (1065px wide or smaller), the layout will automatically size the content area to fill the whole screen and use the background base color (''main'' in the Theme Designer) instead of the 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. |
||
| − | * 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 the maximum width of 1240px. |
||
| + | There are two ways to display the background image: |
||
| − | The background image can be set to ''tile'', which will cause it to repeat and fill the whole background area. Unless you create an image specifically to seamlessly blend edges, it might result in an awkward display and jarring edges between the repeating images. |
||
| + | *'''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: |
||
| − | Otherwise, the image will be displayed once, aligned to the center-top of the background, according to the dimensions. If its width is less than 2000px, then the wiki will automatically split it in half so that it can display to the left and to the right of the content area. If larger than 2000px, then Theme Designer will display an option to ''no split'' the image, which will cause the image to display intact as part of the background. |
||
| + | *'''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. |
||
| − | === Creating the background skin === |
||
| − | Creating a background skin that can look good in all of these situations can be tricky, so here are a few tips. Most importantly, a background diagram to use as a reference when editing an image in GIMP, Paint, Photoshop, or other image editing software: |
||
| + | === Color === |
||
| − | [[File:BackgroundDiagram.png|center|700px]] |
||
| + | 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. |
||
| − | * '''Image Space''': Areas outside the grey content area, which 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. |
||
| + | == Tips == |
||
| − | It may be helpful to use a background template to make your own creative background skin! You can download a simple template as a PSD file from [[w:File:Background template.psd|here]]. The PSD format is compatible with most image editing programs, like the aforementioned Photoshop or GIMP. |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| − | ==Theme Designer tips== |
||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| − | * 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. |
||
| ⚫ | |||
| − | * It's possible to make the background image ''cover'' the whole visible background area. To do this, edit [[Mediawiki:Wikia.css]] on your local wiki and add: |
||
| − | <pre> |
||
| − | body.skin-oasis, |
||
| − | body.background-dynamic.skin-oasis::after, |
||
| − | body.background-dynamic.skin-oasis::before { |
||
| − | background-size: cover; |
||
| − | } |
||
| − | </pre> |
||
| − | * If you're editing a legacy, non-UCP wiki, the code is a little different: |
||
| − | <pre> |
||
| − | body { |
||
| − | background-size: cover; |
||
| − | } |
||
| − | </pre> |
||
== Further reading == |
== Further reading == |
||
* Learn more about using [[Help:Theme designer|Theme Designer]] |
* Learn more about using [[Help:Theme designer|Theme Designer]] |
||
| − | * Learn more about |
+ | * Learn more about [[Help:Background/gradients|gradients]] |
| − | * Learn |
+ | * Learn more about using [[Help:Color|color]]s in your community's design |
| + | * Learn how to edit the [[Help:Navigation|wiki navigation]] |
||
| + | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
[[de:Hilfe:Hintergrund]] |
[[de:Hilfe:Hintergrund]] |
||
[[es:Ayuda:Fondo]] |
[[es:Ayuda:Fondo]] |
||
[[fi:Ohje:Tausta]] |
[[fi:Ohje:Tausta]] |
||
[[fr:Aide:Arrière-plan]] |
[[fr:Aide:Arrière-plan]] |
||
| + | [[hi:सहायता:बैकग्राउंड]] |
||
[[it:Aiuto:Sfondo]] |
[[it:Aiuto:Sfondo]] |
||
[[ja:ヘルプ:背景画像]] |
[[ja:ヘルプ:背景画像]] |
||
| Line 65: | 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]] |
| − | [[Category:Candidates for deletion]] |
||
| − | [[Category:Candidates for speedy deletion]] |
||
Latest revision as of 20:20, 28 April 2022
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