Background & Banner - Access to the world
After you have chosen a template from the WA catalog, it would be time to coordinate the background and your banner to your world in order to stand out from the original templates. You should pay attention to the following things:
1st The content of the article is in the foreground!
The background and banners should support your topic and articles without distracting them or creating a completely different mood than you want. Very often I see articles in which the background and banner are so intrusive that they completely disturb the flow of reading. It gets even worse if the content of the article is additionally bloated by many pictures or all sorts of "colorful" CSS in order to withdraw the content from the background and banner - a vicious circle!
Please also remember that some of your readers could have AD(H)D (attention deficit (hyperactivity) disorder) or RSW (reading spelling weakness), who will not read your articles if there are too many distractions.
Tips:
- keep backgrounds simple and avoid colorful, repeating patterns
- if you do not want to do without patterns, the pattern should not play a major role, it should flow symmetrically to the right and left starting from the text panel and transitions, if the image is too small and repeats, must be blended
- use solid or monochrome backgrounds with lower color saturation
- you should darken or brighten your background images depending on your world mood and the theme - set the article panel apart from the background image by color or by changing the brightness
- if you animate background images, use the animation sparingly and
- if you use a background image, use either no or only very slight transparency for the article panel.
2nd Use narrow and meaningful
banners for your articles!
Another problem is if you are literally overwhelmed by the article banner after opening an article because it takes up almost the entire browser size. Then you have to scroll a bit first to start reading. Please use narrow banners. What recommends a pixel size of 1,920 x 480. If you do not want to "cut" your article image with a machining software, you can also adapt the size to CSS. However, note that CSS has no influence on the loading time. I would always advise against it.
Some authors use individual article banners for just one article or for different categories, e.g. landscapes, fauna, flora, etc. You don't have to do that, of course. For my world Naharin, I only use the world banner. In contrast, in my world Elaqitan, there are many different banners that refer to the individual elements of my world theme. However, if you use different banners, compare the banner with your headline. Do the headline and your banner match or can you give us a preview of the article content? If you can't answer yes to either of these questions, then the banner may not be suitable for the article and you should reconsider your selection.
And if you are looking for some inspiration, you will find lots of banners on all sorts of topics here on the site of Alan Byers Maybe you will find something suitable for you:
3. Calculate your pictures to a web -safe size to avoid long loading times.
Sometimes it happens that the selected images (regardless of type) have a too high resolution and therefore your article takes some time to be fully displayed for a reader. Images on the web require a resolution of less than 100 dpi. In comparison, a resolution of at least 300 dpi or higher would be recommended for prints.
Many drawing and photo programs offer what is known as web-based saving, which reduces the resolution and file size of your images without "shrinking" the original file. If you have such options, use them. This also allows you to upload more images to WA, as the image library allows different storage options depending on the membership you have.
First steps
Once you have selected the images for the background and banner and uploaded them to the gallery, go to the gear wheel in the WA menu and then to the color palette. You will already find your chosen theme under Basic. You can also add the world banner and the world background here.
If you want the article banner to be displayed when using your article blocks in reading challenges or in links in your worlds, or if you want to disable it, go to the submenu with the two smaller gears for the Configuration in the menu with the large gear wheel and then to the Display tab. Check or uncheck "Display Block Headers".
If you want to use individual article banners, upload each header to your gallery. I have created a special gallery for this. Now switch to Design tab in the article. You are now directly on Basic. Enter the first three letters of the title and click to select the correct header.
CSS adjustments
If you now want to adjust your original world CSS for the article panel, find the following line in your World CSS.
.user-css, .user-css-extended .page
Use this to change the entire "text environment". For example, light gray "paper", which allows something from the image of the world background to show through. You are welcome to copy the simple CSS, insert in your World Styling Editor (right: black button with the color palette) and experiment a little with it.
.user-css, .user-css-extended .page {
background-image: none;
background: RGBA(210, 210, 210, 0.8 ) ;
}
Please remove the two spaces after 0.8 and the bracket and the semicolon.
This was really helpful, thanks!
Thank you very much, I'm very happy to hear that.