FFXIV Wiki:Update site CSS, main page, & sidebar
Jump to navigation
Jump to search
- Project description
- Refresh the wiki's CSS, update the sidebar, and make the landing page more functional.
- Members
- Cryebunnie (talk), Erin Umbreon (talk)
- Status
- In progress
- Last updated
- 26 August
- Discussion
- Talk page
- Discord threads
- Update default Vector Skin CSS, Update wiki Main Page & sidebar
Goals
- Update the wiki's main page:
- Feature commonly looked for links
- Include a clear 'How to Help' section on the main page
- Update the wiki's sidebar navigation to:
- Reduce length
- Contain high-use links
- Be more accessible to site users
- Update the wiki's overall look through CSS to:
- Create a consistent visual cohesion across the wiki
- Be easily adaptable between light and dark mode
- Convey a clear relation to FFXIV through color & style
Resources
Tasks
Site CSS
Dark theme
- ☐ Add dark theme tweaks for interfaces added by the user profile extension
Assignee: Erin Umbreon (talk) - ☐ Move CSS for {{Recipe}} to templatestyles
Assignee: Erin Umbreon (talk) - ☐ Update {{Recipe}} dark theme colors to more closely match light theme
- ☐ Make weapon/armor/accessory params compatable with Meteor Dark
- ☐ Update new {{STDT}} dark theme colors to more closely match the old colors
Assignee: Tempest Dawn (talk)- Old colors can be previewed at User:Tempest Dawn/Table Examples (old) (viewing this requires the Legacy Dark theme)
Mobile
- ☐ Sort out the mobile dark theme
Assignee: Erin Umbreon (talk)
This is complicated because the Theme Toggle extension uses a different set of CSS classes for light/dark/etc theme presentation from the classes adopted by Minerva/Vector 2022.
- Theme toggle:
.view-light,.view-dark, OS pref → light/dark class is applied for you - Minerva:
.skin-theme-clientpref-night, OS pref →.skin-theme-clientpref-os(manual media query is required) - Currently our template stylesheets are mostly standardized around
.theme-darkfor setting dark theme styles, I think.
Potential solution: a gadget that translates all these classes and ensures the one set we standardize on is always present on the page when appropriate
- this probably takes the form of a custom minerva-specific theme picker gadget that implements the Theme Picker API + hiding Minerva/MobileFrontend's theme picker controls from the settings menu entirely
Erin Umbreon (she/it • talk) 22:47, 25 August 2026 (UTC)
Sidebar
- ☐ Additional gadget configuration options for right sidebar and other new Vector features
Assignee: Erin Umbreon (talk)
Mainpage Tasks
Mainpage prototype: User:Erin_Umbreon/Sandbox/Main_page_rewrite
Mainpage content: User:Erin_Umbreon/Sandbox/Main_page_rewrite/Content
- ☐ Finish the event carousel
Assignee: Erin Umbreon (talk) - ☐ Finish the header section
Assignee: Erin Umbreon (talk) - ☐ Get feedback on new Main Page format
Assignee: Erin Umbreon (talk), Cryebunnie (talk) - ☐ Get admin final approval on new Main Page
Assignee: Erin Umbreon (talk), Cryebunnie (talk)
Additional Followup
- ☐ Add collapsible functionality to sidebar sections, similar to Minecraft Wiki
- ☐ Investigate skin usage and potentially remove some skins from the wiki
Assignee: Erin Umbreon (talk)- This is inspired by wiki.gg only supporting Vector Legacy on their wikis, and even using custom CSS to make it responsive rather than using Minerva Neue. Less skins means less CSS edge cases and less nitpicking which styles should go in Common.css / Vector.css / etc
- This would also greatly simplify the mobile/dark theme issues above if we can get rid of Minerva completely. However I don't think that's going to happen - Erin Umbreon (she/it • talk) 22:47, 25 August 2026 (UTC)
- ☐ Make navboxes compatible with mobile, similar to Minecraft Wiki
- ☐ Update navbox and infobox styles to be more congruent with the Meteor theme
Completed tasks
- 🗹
Create prototype
Assignee: Cryebunnie (talk) - 🗹
Test prototype by implementing on UserWiki page
Assignee: Erin Umbreon (talk) - 🗹
Get admin approval of initial prototype
Assignee: Cryebunnie (talk) - 🗹
Create new theme as a toggle for editors to try, gather feedback and implement.
Assignee: Erin Umbreon (talk)- Implemented for the
interface-admingroup for limited testing; can be enabled for all editors by removing the `user-groups` parameter from Mediawiki:theme-definitions. Erin Umbreon (she/it • talk) 01:28, 20 May 2026 (UTC)
- Implemented for the
CSS tasks
- 🗹
Fix Watch/Unwatch formatting to be a star icon again instead of text.
Assignee: Erin Umbreon (talk) - 🗹
Decide on header font.
Assignee: Erin Umbreon (talk) - 🗹
Make dark mode verison.
Assignee: Erin Umbreon (talk) - 🗹
Make alternate tab bar style mimicking the in-game light theme.
Assignee: Erin Umbreon (talk)- This wasn't originally on the list but i did it anyway lol. Erin Umbreon (she/it • talk) 01:28, 20 May 2026 (UTC)
- 🗹
Experiment with dropshadow/other formatting on icon to make it stand out from background.
Assignee: Erin Umbreon (talk) - ☒
Tweak formatting on sidebar, try out pins and allowing for collapsing groups.
Assignee: Erin Umbreon (talk), Cryebunnie (talk)- Rye made an SVG pin icon, see discord
- Collapsing groups will require additional JS; look into theme-specific JS in wiki.gg docs
- Not going with the pins for now because it makes the sidebar a bit too busy and doesn't add much. Look into collapsible groups widget after theme is finished. Discord discussion Erin Umbreon (she/it • talk) 19:30, 27 May 2026 (UTC)
- 🗹
Get admin final approval on CSS
Assignee: Erin Umbreon (talk), Cryebunnie (talk) - 🗹
Implement as default theme, make old theme an option for editors to use.
Assignee: Erin Umbreon (talk)
Dark theme stuff
- 🗹
Fix recipe infobox in dark themes
Assignee: Erin Umbreon (talk) - 🗹
Fix relic quest step table styles (e.g. Phantom Weapons Umbrae/Quest)
Assignee: Erin Umbreon (talk)
Sidebar Tasks
- 🗹
Rearrange content of sidebar links to be more useful (have high access links at top like Main/Random/Special, etc.)
Assignee: Cryebunnie (talk) - 🗹
Implement right sidebar gadget
Assignee: Erin Umbreon (talk) - 🗹
Fix fixed-width toggle CSS to not conflict with right sidebar gadget's styles
Assignee: Erin Umbreon (talk)
Mainpage Tasks
- 🗹
Create images for expansion buttons discord
Assignee: Cryebunnie (talk) - 🗹
Create functional expansion buttons
Assignee: Erin Umbreon (talk) - 🗹
Finish populating expansion buttons
Assignee: Cryebunnie (talk)