CSS

From Support Wiki
Jump to navigation Jump to search

CSS (short for Cascading Style Sheets) is the tool you use to style your wiki. You might find some of our useful CSS snippets, well, useful. You can also find instructions to center your logo at the top of the page or import Google fonts.

Modifying the default theme

New wiki.gg wikis (including imports) come preloaded with some pages that make it very easy for you to customize the appearance of your wiki:

  • MediaWiki:Common.css (edit the values of theming variables in this, but leave other local customizations at the end of the file)
  • MediaWiki:Vector.css (only edit this if you have a bunch of css experience, this would be for modifying theme-specific rules (as opposed to content rules). If you modify this, please put all customizations at the end of the file so that we can push automatic updates by replacing the first part of the stylesheet

Light & dark theme

Your MediaWiki:Common.css page has support for two themes by default, dark and light. Please make sure you are editing the correct one! If you want to have only one theme, you can remove the one you don't want, just keep that :root, selector attached to the one you're keeping. You should also delete the one you're not using from MediaWiki:Theme-definitions . If you need help please ask wiki.gg staff!

For more information on themes, please see ThemeToggle.

A list of wiki.gg variables

Each theme has three sections of variables:

  1. "Probably edit these"
  2. "Maybe edit these"
  3. "Likely do not need to edit these"

If you are new to CSS, you can ignore sections 2 and 3 (but please don't delete them!!!)

Here is a gallery of the variables you likely will be interested in & what they control (you can click each image to enlarge it). These images are not exhaustive, they only point out a few obvious places that these variables are used:

--wiki-body-background-imageCss-wiki-body-background-image.jpg
--wiki-content-background-colorCss-wiki-content-background-color.jpg
--wiki-content-background-color--secondaryCss-wiki-content-background-color--secondary.jpg
--wiki-content-border-colorCss-wiki-content-border-color.jpg
--wiki-content-link-colorCss-wiki-content-link-color.jpg
--wiki-accent-colorCss-wiki-accent-color.jpg
--wiki-accent-label-colorCss-wiki-accent-label-color.jpg
--wiki-accent-link-colorCss-wiki-accent-link-color.jpg
--wiki-icon-to-link-filterCss-wiki-icon-to-link-filter.jpg

You can also see diagrams including all variables at once:

  • All of the most important wiki.gg CSS variables, dark mode
    All of the most important wiki.gg CSS variables, dark mode
  • All of the most important wiki.gg CSS variables, light mode
    All of the most important wiki.gg CSS variables, light mode

More about CSS

This section goes over the basics of CSS with simple examples so you can understand the concepts. Following "best practice" CSS principles is a lot more complicated than this, and we do NOT recommend using any of these code blocks in your wiki's 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). You can add the query string ?usesitecss=0 to the end of a URL to preview your changes without site CSS conflicting.

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 the text in every div 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 (remember to cache-refresh with ctrl+F5):

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

Please keep in mind our AI policy, which is that you can use AI tools as an assistant but not as a replacement for your own work.

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!

Again, please understand these examples are for illustration purpose only. We would NOT recommend you to change styles in this fashion, please use the variables documented with screenshots above.

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

Troubleshooting

Cache

  • Did you remember to run a local cache refresh? Ctrl/Cmd+F5 or Ctrl/Cmd+Shift+R or hold down Shift while clicking the Refresh button, depending on your browser.
  • If you are editing a gadget, you may need to append ?debug=2 to the end of your URL (or &debug=2 if there's already a ? present).

Specificity

MediaWiki-specific issues

  • Writing url() with an empty argument will result in a parsing error, please use the keyword unset instead.

See also

Retrieved from "https://support.wiki.gg/wiki/CSS?oldid=8659"