All branches besides DE and INT which are already using some of the following improvements, and RU (and UA, using RU’s theme) who made lots of changes to the general layout, use a copy of EN’s theme. But as EN’s theme is regularly updated, all these copies will always be outdated. Also, as soon as you make modifications, you will have trouble finding your changes.
Originally, I recommended to import EN's theme, instead of copying it, to always be up to date, but as some changes on EN broke changes on some branches, I recommend to use the Common Theme instead. It is a project, to have multiple branches use the same basic theme, containing all modifications they all are using. It is only changed if all branches using it have agreed. To see its current version and status, look here. If your wiki starts using the Common Theme, please add yourself to the list in above link, so you will get consulted before changes are made.
Of course, this leads to an increase in the page’s loading time, but as to my analysis, the impact is irrelevant. There are two ways to do so, depending on whether you want to make modifications or not:
Just let your wiki use the Common Theme instead of the one in your component:theme page. You can leave that blank, delete it or write a note that it is unused.
Go to your admin panel, therein to Appearance & Behaviour -> Themes. Let the page load, which may take a moment. Go to the External tab, enter the following line and apply the changes.
http://o5command-int.wdfiles.com/local--code/tech-team:common-theme/1
Make sure all categories are set to
Inherit from _default.
Go to your component:theme page, delete its content and add the following:
[[code type="css"]]
@import url('http://o5command-int.wdfiles.com/local--code/tech-team:common-theme/1');
/*
SCP Sigma 9
[2014 Wikidot Theme]
Created for the SCP Foundation by Aelanna
Edited for SCP Foundation by Dr Devan
Here go your credits!
External extensions:
- Interwiki block by Resure
... Extend as you see fit, e.g. with credit-module, colmod, etc ...
*/
[[/code]]
This first line imports the Common Theme, then within
/* and
*/ there is a comment which is just displayed in the code but not read by the browser. Below
*/ go your modifications.
You probably already have copied the credit module and the colmod to your wiki. If not, they are strongly suggested; instructions are here for the credit module and here for the colmod.
You can import their CSS directly to your theme; this is useful when you have them on most pages, especially when you use the colmod in your sidebar (see big modifications section). You can also copy the CSS code to your theme instead of importing them. To import them, add one or both of the following lines to the very top of your theme (but below the line importing the theme):
@import url('http://scp-wiki-de.wdfiles.com/local--code/credit:style/1');
@import url('http://scp-int.wdfiles.com/local--code/component:colstyle/1');
In the credit-module line, replace
scp-wiki-de with your wiki’s subdomain. Remove the CSS-module from your
credit:start,
credit:start-standalone and/or
component:coltop pages.
If you want to add all these fixes to your wiki at once, you can import them by adding this line to the top of your theme, below importing the theme. To add them manually, you can pick them individually from here.
@import url('http://o5command-int.wdfiles.com/local--code/component:common-theme-bugfixes/1');
You also must make these changes to your sidebar nav:side:
At the top, above the first [[div class="side-block"]]:
[[div class="side-bar-container"]]
At the bottom but above [[a href="#" class="close-menu"]]:
It is crucial you place these right!
To ensure your users find the exact same CSS environment in your sandbox that they find in your wiki, I strongly suggest you import your theme (or the Common Theme if you have no modifications) to your sandbox. You can also use this for your O5-Wiki or so. Then just apply the header images and unless you want a red search button like EN has, apply the green color to it, as explained below. To make it easier for you, you can go to your sandboxes theme, delete everything and add the following (The text between /* and */ are comments with instructions and explanations for you. You can but do not have to delete these if you want, just keep the credit block):
[[code type="css"]]
/* Adjust the URL to your wiki’s subdomain */
@import url('http://scp-wiki-de.wdfiles.com/local--code/component:theme/1');
/*
SCP Sigma 9
[2014 Wikidot Theme]
Created for the SCP Foundation by Aelanna
Edited for SCP Foundation by Dr Devan
Here go your credits!
External extensions:
- Interwiki block by Resure
... Extend as you see fit, e.g. with credit-module, colmod etc ...
*/
/* This changes the header images */
div#container-wrap {
background: url(/local--files/component:theme/body_bg.png) top left repeat-x;
}
#header {
background: url(/local--files/component:theme/logo.png) 10px 40px no-repeat;
}
/* This adjusts the search box's color */
#search-top-box-input {
background-color: #063830;
}
#search-top-box-input:hover,
#search-top-box-input:focus {
background-color: #126657;
}
#search-top-box-form input[type=submit] {
background-color: #34685F;
background: linear-gradient(to bottom, #228977,#126657,#063830);
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
background-color: #228977;
background: linear-gradient(to bottom, #2B9885,#228977,#34685F);
}
/* This fixes the header for different windows sizes, as the properties
given to #header above are overwriting the existing @media based
settings for this ID. This fix is needed for all themes that bring own
header styles, also GOI themes and so on. */
@media (max-width: 479px) {
#header {
background-position: 0 5.5em;
background-size: 55px 55px;
}
}
@media (min-width: 480px) and (max-width: 580px) {
#header {
background-position: 0.5em 4.5em;
background-size: 66px 66px;
}
}
@media (min-width: 581px) and (max-width: 767px) {
#header {
background-position: 1em 4em;
background-size: 77px 77px;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#header {
background-position: 1em 4em;
background-size: 88px 88px;
}
}
[[/code]]
@media is a selector that makes that the settings inside it are only applied when the browser window has the defined width. These override other settings made before them and should be placed at the bottom of a theme, or at least of a set of settings.
And now, a modification for sandboxes: A reference box that can be added to an article and then is displayed in the sidebar (not on mobile for technical reasons). Your users can store notes, links and so on there if they want to use it:
.ref-box {
background: #e5ffe5;
border: 1px solid #660000;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(102,0,0,.5);
left: -256.2px;
margin-bottom: 15px;
padding: 0 10px;
position: absolute;
top: 350px;
width: 195.6px;
}
.ref-box a, .ref-box a:visited {
color: #b01;
}
.ref-box ul {
list-style: disc;
padding-left: 16px;
}
@media (max-width: 767px) {
.ref-box{
display: none;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.ref-box {
left: -230.6px;
}
}
The value
top: 350px; is the position from the top. It should be 16px below the bottom sidebar block.
The reference box is added to an article with:
[[div class="ref-box"]]
Reference-box-content
[[/div]]