Xeno Series Wiki:Custom theming
This wiki's default appearance is a neutral blue-tinted white. We also have a dark theme available to logged-in users, which is settable in Special:Preferences, and is primarily dark blue. However, due to how these themes are set up, it is fairly easy for users to create their own theme.
Setting up a custom theme[edit]
It is fairly easy to create a custom theme.
- Go to Special:MyPage/common.css. (The actual page name is
User:[username]/common.css
, but MyPage redirects there for us.) - Edit the page and paste in the block of text in the below "Boilerplate" section.
- If you want to only change the colours of some things, take the blank boilerplate, and add only the lines you care about from the full one.
- If you want to change everything, take the full boilerplate.
- Edit the colours in the code however you like.
- Use the Show Preview button to test your work.
- Once satisfied, Save the page.
Warning! There are no safeties to stop you from, for example, making both the text and the background black so you can't read or edit anything. If you mess up this bad, you'll have to ask a staff member for help (they're allowed to edit other users' CSS). If in doubt, just close the tab without saving your changes.
Boilerplate[edit]
Blank | :root { } |
---|---|
Filled |
:root { --rgb-root-bg:rgb(239,239,255); --rgb-page-bg:rgb(247,247,255); --rgb-input-bg:rgb(255,255,255); --raw-root-bg:239,239,255; --raw-page-bg:247,247,255; --raw-input-bg:255,255,255; --rgb-shadow-light:var(--rgb-page-bg); --rgb-shadow-dark:rgb(47,47,79); --raw-shadow-light:var(--raw-page-bg); --raw-shadow-dark:47,47,79; --rgb-fill-emp:rgb(191,191,223); --rgb-fill-table:rgb(239,239,247); --rgb-fill-table-alt:rgb(247,247,251); --raw-fill-emp:191,191,223; --raw-fill-table:239,239,247; --raw-fill-table-alt:247,247,251; --rgb-accent:rgb(63,127,191); --rgb-accent-hover:rgb(95,143,223); --raw-accent:63,127,191; --rgb-text:rgb(31,31,31); --rgb-text-deemp:rgb(127,127,127); --rgb-text-input:rgb(0,0,0); --rgb-text-inv:rgb(255,255,255); --rgb-link-nml-unv:rgb(15,79,175); --rgb-link-nml-hov:rgb(31,111,191); --rgb-link-nml-vst:rgb(15,15,143); --rgb-link-nml-act:rgb(223,223,0); --rgb-link-new-unv:rgb(191,0,0); --rgb-link-new-hov:rgb(223,63,63); --rgb-link-new-vst:rgb(175,95,95); --rgb-link-new-act:rgb(223,127,0); --rgb-link-ext-unv:rgb(95,111,191); --rgb-link-ext-hov:rgb(111,127,223); --rgb-link-ext-vst:rgb(63,79,143); --rgb-link-ext-act:rgb(191,223,0); --rgb-link-dis-unv:rgb(15,175,175); --rgb-link-dis-hov:rgb(31,191,191); --rgb-link-dis-vst:rgb(15,143,143); --rgb-link-dis-act:rgb(127,223,0); --rgb-page-border:rgb(95,95,127); --rgb-faint-border:rgb(223,223,239); --raw-page-border:95,95,127; --rgb-diff-add:rgb(127,207,255); --rgb-diff-del:rgb(255,207,127); --raw-diff-add:127,207,255; --raw-diff-del:255,207,127; --rgb-vector-pagetop:rgb(255,255,255); --raw-vector-pagetop:255,255,255; } |
Blank | :root { } |
---|---|
Filled |
:root { --rgb-root-bg:rgb(31,31,63); --rgb-page-bg:rgb(47,47,79); --rgb-input-bg:rgb(15,15,31); --raw-root-bg:31,31,63; --raw-page-bg:47,47,79; --raw-input-bg:15,15,31; --rgb-shadow-light:rgb(247,247,255); --rgb-shadow-dark:var(--rgb-page-bg); --raw-shadow-light:247,247,255; --raw-shadow-dark:var(--raw-page-bg); --rgb-fill-emp:rgb(47,47,63); --rgb-fill-table:rgb(63,63,111); --rgb-fill-table-alt:rgb(55,55,103); --raw-fill-emp:47,47,63; --raw-fill-table:63,63,111; --raw-fill-table-alt:55,55,103; --rgb-accent:rgb(95,127,255); --rgb-accent-hover:rgb(143,191,255); --raw-accent:95,127,255; --rgb-text:rgb(223,223,239); --rgb-text-deemp:rgb(127,127,127); --rgb-text-input:rgb(255,255,255); --rgb-text-inv:rgb(0,0,0); --rgb-link-nml-unv:rgb(239,175,63); --rgb-link-nml-hov:rgb(255,191,95); --rgb-link-nml-vst:rgb(159,143,47); --rgb-link-nml-act:rgb(239,239,191); --rgb-link-new-unv:rgb(223,63,63); --rgb-link-new-hov:rgb(239,95,95); --rgb-link-new-vst:rgb(239,127,127); --rgb-link-new-act:rgb(223,127,0); --rgb-link-ext-unv:rgb(159,239,111); --rgb-link-ext-hov:rgb(207,255,127); --rgb-link-ext-vst:rgb(159,207,63); --rgb-link-ext-act:rgb(159,255,127); --rgb-link-dis-unv:rgb(63,175,175); --rgb-link-dis-hov:rgb(111,191,191); --rgb-link-dis-vst:rgb(47,143,143); --rgb-link-dis-act:rgb(127,223,47); --rgb-page-border:rgb(111,111,143); --rgb-faint-border:rgb(79,79,95); --raw-page-border:111,111,143; --rgb-diff-add:rgb(63,159,223); --rgb-diff-del:rgb(223,159,63); --raw-diff-add:63,159,223; --raw-diff-del:223,159,63; --rgb-vector-pagetop:rgb(63,63,127); --raw-vector-pagetop:63,63,127; } |
More details[edit]
What's going on here? Basically, you're editing the variables that the wiki is using to determine what colour to make things.
- root-bg is the colour of the "deepest" background of the page.
- page-bg is the colour of the pages themselves.
- input-bg is the colour of the edit box.
- shadow-light is the colour of the light-coloured shadow that makes dark images visible against dark backgrounds, and should ideally be equal to the page-bg so it's invisible when it isn't needed.
- shadow-dark is the opposite of the above.
- fill-emp is an "empahsis" colour, usually used for the headers of tables.
- fill-table and fill-table-alt are used for table rows.
- accent is the colour used for the save page button and a few other limited things.
- text is...well, the colour of text.
- text-deemp is a fainter text colour for things that should be de-emphasized.
- text-input is the colour of text in the edit box.
- text-inv is an "inverted" text colour: if normal text is dark, it should be light, and vice versa.
- The various "link" colours are for hyperlinks.
- nml, new, ext, and dis are for normal, non-existing, external, and disambiguation links.
- unv, hov, vst, and act are for unvisited, hovered, visited, and active links.
- page-border is the general border of most elements.
- faint-border is a more faint border.
- diff-add and diff-del are the colours for the "line added" and "line removed" boxes when comparing edits.
- Other variables are for very specific uses, which are hopefully evident by their name.
If you're more technically-inclined, you can use your browser developer tools to edit these variables in real-time to see what changes without having to show preview.
Notes and gotchas[edit]
- You can do all kinds of other customization in your .css besides using the given variables; these are just the "officially-sanctioned" ones.
- Some of the "rgb" colours also have a matching "raw" colour. You should set these to be the same, or things will look funny/wrong. Sometimes we need the code to be something like
rgba(95,95,127,0.25)
, which you can't get if the input isrgb(95,95,127)
, so95,95,127
needs to be available. - If you're making a dark theme, you should set dark theme in your preferences and customize from there, rather than making your dark theme on top of the light theme. This is because the dark theme does some extra work, such as inverting the colour of icons in the editing toolbar so they're visible on a dark background.
- If something on the wiki looks wrong or broken, check to make sure it's not the fault of your .css before raising any alarms.
- Be aware that if something changes on the wiki side, your customization might not work properly anymore. We'll try to avoid breaking changes, but sometimes it's unavoidable.
What if I don't have an account?[edit]
MediaWiki requires an account to set what theme you're looking at, and there's nothing we can do about it. You can preview the dark theme with URLs such as this one, but you have to manually type this sort of syntax with every page you wish to read. Custom themeing requires a userpage, which you can't have without an account.
Helpful pages
| |
---|---|
Policies | Copyrights • Deletion policy • Featured articles • New game process • Spoiler policy • Talk pages • Username policy • Userspace content • YouTube channel |
Guidlines | Block guidelines • Manual of Style |
User groups | Administrators • Autoconfirmed users • Bots • Bureaucrats • Established users • Knights • Users |
Requests | for Adminship • for Bureaucratship • for Knighthood |
Help | Advanced editing • Basic editing and syntax • Data templates • FAQ • New editor welcome |
Other | April Fools • Custom theming • Sandbox • To-do list • Tools |