BluesidraLoreWiki/UI Documentation

CSS

Everything to do with the publicly visible css is here: Timeless.css

Files used: If you want to update something, simply change these:

• File:LogoLight.png: The main logo for light mode
• File:LogoDark.png: The main logo for dark mode

• File:Texture-light.png: The paper-like texture used as background for the main content in light mode
• Dark mode doesn't use texture

• File:Pencil-darkmode.png: The edit-icon for dark mode
• File:Clock-darkmode.png: The history-icon for dark mode
• File:Page-misc-darkmode.png: The purge-icon for dark mode
• File:Talk-darkmode.png: The discussion-icon for dark mode
• File:Page-darkmode.png: The page-icon for dark mode
• File:Puzzle-darkmode.png: The puzzle-icon for dark mode

Color Scheme: The color scheme is changed directly in Timeless.css, within the parameters (The ones that start with --) ColorScheme shows the current color scheme. Potenial new parameters have to be added manually.

JS

pageBackgroundImages() in Common.js is the function that hooks the backgrounds to the category of the articles

Questions

How do I add new background images?

• Open Common.js and go to var locationHeaders
• Copy-Paste one of the existing lines to the end of the array. Please make sure that every line of the array has a "," at the end, except the last line. That one must not have a ","
• Adjust the new entry according to the new location you want:

'London': {'link':'/w/images/8/8d/LondonBG.jpg','priority': 0},
'Category Name': {'link':'link to the art','priority': a number},

• Category Name: The exact name of the category, with the correct capitalization
• Link: The link to the art
• Priority: A number indicating the priority of the location. Locations with higher priority will be chosen over those with low priorities. This is for entries that have two locations linked to them, eg. 'The High Wilderness' and 'The Reach'. In that case, the Reach would get priority, since it has the higher number in the priority entry.

How do I change the colors in the UI?

• Open Timeless.css and edit the hex-code of the parameter you want to change. There's a block for light-mode and dark-mode. Be sure to pick the right one.

How do I modify the design of the infobox template?

• The Infobox is targeted via .portable-infobox in Timeless.css.
• Targeting elements means you need to go into the css properly. If you only want to change colors, you can do so by changing --table-bg-color and --table-border-color. Note that this will also change how the normal tables look.

I want to update an icon or background image. Do I need to touch the css or js?

• No. To update an image, simply add a new version to the image the css pulls. Which ones are used are detailed above.

The default background image doesn't change no matter what I do in the JS.

• The default background image (pulled for everything that does not have a category matching the things in the JS) is not set via in common.js, but in Timeless.css as the parameter body-bg-image