CSS Policy

The following policy concerns CSS themes, primarily those that are self-contained and may be imported onto other pages, but much of this policy also applies to embedded CSS on individual pages.

Creation

A CSS theme should be drafted on a sandbox page.

Once you feel the theme is ready, you may move it to the Wiki proper. Once you have recieved permission from a member of the Tech Team (#site11 on IRC, or on Discord), who will make sure that your theme is compliant with this policy, you may create a new page on the wiki in the theme: category with the theme tag.

Some older themes have been posted to the component: category. Please use the theme: category.

The theme must be compliant with the following restrictions, listed below.

Restrictions

In order to be allowed on the site, there are a few restrictions that your theme must abide by.

Licensing

The theme must be released under the same Creative Commons license as the rest of the wiki.

What you can and can't change

You may change any of the style components of the wiki other than stuff that's specified in this policy.

You can't remove, hide, alter, or "break" any navigation elements of the wiki, or the rating module, or the Adult Content Warning.

You can't break the structure or look of the wiki beyond realistic expectations. The site should still be recognisable and readable.

You can style the translation module (.scpnet-interwiki-frame) using the Interwiki Style component. You are not allowed to alter or remove its contents.

Basic functionality

Your CSS theme must work well in the major browsers (Chromium, Firefox, Safari) and be at least functional in minor ones (IE 11 etc).

Your CSS theme must work well on mobile as well as desktop.

Setting up the theme's page

The theme's page is where the source code of your CSS theme is kept.

You must instruct users to add your theme to their page using Wikidot's [[include]] method (and set up your theme page accordingly. Here's a template.

You may not instruct users to add your theme to their page via CSS's @import method.1

You may not instruct users to use any Wikidot syntax which uses HTTP links, they must be HTTPS.

You must provide usage instructions on your theme's page. Note that this only refers to telling users what to type to get the theme to show up on their article. If your theme has any special features that an author should know how to use, these must be documented as well. You do not need to include examples of your theme's formatting — although you totally can, and definitely should!

Your theme's page must have your theme applied to it — i.e. your page must act as a preview of your theme. If you used the template linked above, this will be done for you.

The Tech Team member who's approving your theme will expect to see not only your CSS source code, but a draft of your theme's page.

Bloat code

A CSS theme cannot contain huge amounts of code that doesn't do anything. A CSS theme's source code should contain little, if anything, other than what this theme changes from Sigma-10 (the wiki's base CSS theme). Vast sections copy-pasted from Sigma are strictly not allowed.

Someone familiar with CSS should be able to look at your theme and know exactly what your intent is. At the very least, you should be able to justify why you have chosen to include any given line.

Additionally, you should try to avoid using the !important marker unless you really need it, e.g. to provide compatibility with other CSS where increasing the specificity would not suffice.

Accessibility

Accessibility concerns should be considered when composing a CSS theme. For example:

  • Is this theme readable for colorblind people? (e.g. it employs bad color combinations like red + green which make it difficult for colorblind users to navigate the site)
  • Does this theme hamper the ability to use screen readers? (e.g. it adds 'invisible' content which gets read by screen readers but not sighted users)
  • Are the fonts it uses legible for all users? (e.g. the body font size is too small, the font itself is difficult to read)
  • Could the theme induce a photosensitive epileptic seizure? (e.g. it has rapidly flashing colors or alternating patterns) If so, these elements must be removed.

and so on. Best practices and recommendations to address all of these potential issues are easily available with a cursory Google search.

Hotlinking

Hotlinking is the practice of linking to files on another site, and is both incredibly bad practice and against site rules. It is incredibly bad manners to force someone's site to load images for your theme, and also introduces a degree of unreliability to your theme — what if that site disappears?

To prevent hotlinking, all images, fonts and miscellaneous files used in a CSS theme must be files uploaded to the theme's page rather than linked from elsewhere on the internet.

However, you are permitted to use certain sites that explicitly encourage hotlinking for serving files to users. Notable examples include Google Fonts and Lorem Picsum. If in doubt, play it safe and ask the Tech Team.

Additionally, CSS may not be linked from sandbox pages or anywhere that isn't the main site (outside of workbenches). You must use a theme: page on the wiki for CSS themes.

HTTPS

Your CSS theme must be completely functional on the HTTPS version of the site (https://scp-wiki.wikidot.com/). This means any internal @imports or url(…) references must refer to HTTPS URLs. For Wikidot, this means that the link takes the form https://scp-wiki.wdfiles.com/local--files/SLUG-OF-PAGE/FILENAME.

Note that HTTPS wdfiles links work even on sandboxes without general HTTPS support.

Approval

Before being posted, your theme must be approved by a member of the Tech Team. They will take a look at your theme and ascertain whether or not it is compliant with this policy.

You can find the Tech Team in #site11 on IRC, on Discord or via Wikidot PM.

Only Operational Staff and up can approve a CSS theme. The Technical Team Captains get final say in any approvals. Members of the Technical Team must get themes they created approved by another Technical Team member.

An approval from the Tech Team comes with the expectation that your theme will be posted in the next few days at the latest and with only minimal changes; if you are posting a theme long after getting approval or if you've made major changes, please re-seek approval.

Be sure to give the Tech Team plenty of time (i.e. a couple of days) to look over your theme.

Deletion policy for CSS themes

CSS themes are treated like normal pages in that other users are not permitted to make major changes to your work. Small mistakes are considered equivalent to spelling and grammar errors and may be corrected by any well-meaning user.

CSS themes are affected by the regular deletion policy, and are eligible for deletion once they fall under -10 votes.

Remediating non-compliant themes

If your theme doesn't function in the major browsers (Chromium, Firefox, Safari, mobile, IE11) in a way that completely breaks navigation, function, or accessibility, it needs to be removed (or at bare minimum, removed from include blocks) from the site, then fixed, in that order. Our first priority is compatibility, function, and accessibility.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License