Help:CSS

From Support Wiki
Jump to navigation Jump to search

CSS (Cascading Style Sheets) is the tool you use to style your wiki. You might find some of our useful CSS snippets, well, useful.

Help! I want a theme I can easily modify

Okay!

If you want a dark theme (only)

Edit the section of variables that starts like this: 

:root, 
.theme-dark {
    --wiki-body-background-image: none;
    --wiki-body-background-color: #171717;
    --wiki-body-background-color--rgb: 23, 23, 23;
    --wiki-body-dynamic-color: #ffffff;
    --wiki-body-dynamic-color--rgb: 255,255,255;
    --wiki-body-dynamic-color--inverted: #000000;
    --wiki-body-dynamic-color--inverted--rgb: 0,0,0;
    --wiki-body-dynamic-color--secondary: #dddddd;
    --wiki-body-dynamic-color--secondary--rgb: 221,221,221;
    --wiki-body-dynamic-color--secondary--inverted: #333333;
    --wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;

   /* a bunch more definitions here */
}

You can delete the entire block that starts like this: 

.theme-light {
   /* a bunch of definitions here */
}

If you want a light theme (only)

DELETE the section that starts like this: 

:root, 
.theme-dark {
   /* a bunch of definitions here */
}

Then READD :root, before the .theme-light section, like this: 

:root,
.theme-light {
    --wiki-body-background-image: none;
    --wiki-body-background-color: #D2F0F5;
    --wiki-body-background-color--rgb: 210,240,245;
    --wiki-body-dynamic-color: #000000;
    --wiki-body-dynamic-color--rgb: 0,0,0;
    --wiki-body-dynamic-color--inverted: #ffffff;
    --wiki-body-dynamic-color--inverted--rgb: 255,255,255;
    --wiki-body-dynamic-color--secondary: #333333;
    --wiki-body-dynamic-color--secondary--rgb: 51,51,51;
    --wiki-body-dynamic-color--secondary--inverted: #dddddd;
    --wiki-body-dynamic-color--secondary--inverted--rgb: 221,221,221;

   /* a bunch more definitions here */
}

If you want both light AND dark themes

Edit the document as-is, keeping the .theme-light & .theme-dark sections. Place :root, before the theme that you want to be default. Configure ThemeToggle to support themes dark and light (keep them lowercase).

More about CSS

You can edit the pages MediaWiki:Common.css and MediaWiki:Vector.css on your wiki to customize your wiki's design. If you want to try previewing your changes, you can edit Special:MyPage/common.css or Special:MyPage/vector.css (these will redirect to your very own personal stylesheets if you are logged in).

These pages use "CSS" to tell the browser engine how to make your wiki look pretty. A CSS stylesheet is made up of several individual rules. A rule consists of three parts:

  • The selector - for example "all links" (a), "all divs" (div), "all elements with class="my-class"" (.my-class), "the element with id="my-unique-element" (#my-unique-element)
  • The property - for example "background color" (background-color:), "color" (color:), "border size/style/color" (border:), the amount of spacing between the edge of the element and its content (padding:)
  • The value of a property - for example "red" (red or #ED2727 or hsl(0, 84, 93)), a bit of whitespace (1px or 1em or .125rem)

An example rule might look like this: 

div.fancy-text {
    color:magenta;
}

This will turn every link with the class "fancy" magenta.

Often, you will see several declarations (pairings of a property and value) that all use the same selector combined into one block of code, like this: 

div.fancy-text {
    color:magenta;
    border:1px dashed magenta;
    padding:3px;
}

Try editing Special:MyPage/common.css and see if you can change the styles on this text:

Change me!!!!

CSS is an expansive language, and almost no one ever fully masters it - but with knowledge of a few properties you can do quite a bit! There are a ton of resources on the internet for learning CSS, so check out the following sections to learn more.

Resources for learning CSS

Prompting ChatGPT

ChatGPT or another LLM will likely be able to explain many CSS concepts for you. An example prompt might be something like this: 

I see this code in my website's CSS:

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
    border-color: rgb(80, 82, 79);
}

I don't understand what's going on here. Can you explain it to me? Thanks!

Or this: 

I am trying to make links on my website purple (specifically, #A527ED). Can you help me write a rule for that? Thanks!

Then if that doesn't work, follow up with: 

That doesn't seem to have worked. There is already some CSS present that might be interfering. Can you help me figure out what's going on? Thanks!

When interacting with an LLM, it's important to remember that it will always sound confident, even when it's completely wrong. So, make sure to TEST anything that comes out of an LLM before applying it and make sure it works. You can also use its answers to inspire further searches using Google or another search engine. I also recommend including words like "thanks!" and asking it the same way you would ask a person, this can actually help your output.

General documentation resources

  • W3Schools CSS documentation - w3 schools documentation is very straightforward, but it sometimes doesn't describe all the intricacies of a particular property. Generally start here and then go to MDN if you don't get your answer here.
  • MDN documentation - explanations here may be a bit more complicated, but they'll be a lot more expansive
  • caniuse.com - tells you the current browser support of a particular CSS property. Generally, you should make sure that something is available in the current version of Chrome, Firefox, and Safari; and that it has at least 97% overall support before using it.
  • Contrast checker - is your design accessible? Make sure your contrast levels between text (color) and background (background-color) are big enough.

wiki.gg resources

See also

Retrieved from "https://support.wiki.gg/index.php?title=Help:CSS&oldid=4157"