Forum:Trying to customize some features in my wiki

Forums: Index > Community help

---

Hi! I have created Softpedia, which is meant to be a software encyclopedia http://softpedia.shoutwiki.com/wiki/Main_Page

I would like to customize the wiki, with the following specifications:

- Change the look of the entire site for all visitors - Make the "Log In" button green - Make the "Publish" and "Preview" buttons blue, font size 24px - Make the overall site color green - Add a "Save Draft" button right next to "Show changes" - Add a recent changes widget on the right

I asked the ShoutWiki support staff how to do these things, and they directed me here. Please help. The following things can be done with CSS, correct?

Make the "Log In" button green Make the "Publish" and "Preview" buttons blue, font size 24px Make the overall site color green

I was wondering what code to use, though, when adding these CSS specifications? Your help is very much appreciated.

From Emily

Hi, you will have to use your wiki's MediaWiki:Vector.css page if you want to modify the general aspect of your wiki. This page, as well as all pages from the "MediaWiki" Namespace can be edited only by administrators.

Here is an example of modified Vector wiki (it's black and grey, yet you will just have to modify the hexadecimal color scheme, the #XXXXX; value)

/* CSS placed here will affect users of the Vector skin */

/* Structure */

html,
body { 
        height: 100%;                           /* hauteur                       */
        margin: 0;                              /* marge                         */
        padding: 0;                             /* détourage corps               */
        font-family: Trebuchet MS, sans-serif;  /* police générale (modifiée)    */
        font-size: 1em;                         /* taille police                 */
}

body {
	background-color: #111111;              /* fond de base (modifié)        */
	/* @embed */
	background-image: none;                 /* image de fond marge (modifié) */
}

/* Contenu */
div#content {
	margin-left: 10em;
	padding: 1em;
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/e/e6/Vector_border.png"); /* bordure gauche (modifié) */
	background-position: top left;
	background-repeat: repeat-y;
	background-color: #333333;
	color: #FFFFFF;
	direction: ltr;
}

/* En-tête */
#mw-page-base {
        height: 5em;                             /* hauteur de l'en-tête        */
        background-color: #555555;               /* couleur fond                */
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/8/82/Vector_page-fade.png"); /* fading en-tête (modifié) */
	background-position: bottom left;
	background-repeat: repeat-x;
}

#mw-head-base {
        margin-top: -5em;
        margin-left: 10em;
        height: 5em;
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/e/e6/Vector_border.png"); /* bordure gauche (modifié) */
	background-position: bottom left;
	background-repeat: repeat-x;
}

/* Barre personnelle */
#p-personal ul li a {
        color: #FFFF00;
}

#p-personal ul li a:visited {
        color: #FFD700;
}

/* Espaces de nom et visualisation */

div.vectorTabs {
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/2/20/Vector_tab-break.png"); /* bordure (modifié) */
	background-position: bottom left;
	background-repeat: no-repeat;
}

div.vectorTabs ul li {
        background-color: #333333;
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/2/25/Vector_tab-normal-fade.png"); /* bordure (modifié) */
}

div.vectorTabs li.selected {
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/8/84/Vector_tab-current-fade.png"); /* bordure (modifié) */
}

div.vectorTabs span {
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/2/20/Vector_tab-break.png"); /* bordure (modifié) */
	background-position: bottom right;
	background-repeat: no-repeat;
}

/* Onglets avec liens donnant sur les pages non existantes */
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited {
        color: #32CD32;
}

/* Onglets sélectionnés */
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited {
        color: #DCDCDC;
}
/* Onglets avec liens */
div.vectorTabs li a {
        color: #FFFF00;
}

div#mw-head div.vectorMenu h5 {
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/2/20/Vector_tab-break.png"); /* bordure (modifié) */
}

div.vectorMenu ul {
        background-color: #555555;
        border: solid 1px #B22222;
}

div.vectorMenu li a {
        color: #FFFF00;
}

div.vectorMenu h5 a {
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/2/20/Vector_tab-break.png"); /* bordure (modifié) */
}

/* Barre latérale */

div#mw-panel div.portal h5 {
        color: #B22222;
}

div#mw-panel div.portal div.body {
	/* @embed */
        background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/f/fb/Vector_portal-break.png");
}

div#mw-panel div.portal div.body ul li a {
        color: #FFFF00;
}

div#mw-panel div.portal div.body ul li a:visited {
        color: #FFD700;
}

/* Pied de page */
div#footer {
	/* @embed */
	background-image: url("http://sandbox.stargate.wikkii.net/wiki/images/e/e6/Vector_border.png"); /* bordure gauche (modifié) */
}

div#footer ul li {
        color: #DCDCDC;
}

div#footer ul li a {
        color: #FFFF00;
}

div#footer ul li a:visited {
        color: #FFD700;
}

See the result here

For some color hexadecimal values, see this page on Meta. Have fun. --LIMAFOX76 (talk) 17:21, 24 February 2014 (UTC)

If you want it to work for all skins rather than just Vector, you can use MediaWiki:Common.css instead of MediaWiki:Vector.css. I think that's generally preferred too but not that I know anything about anything. Llwy-ar-lawr (talk) 03:23, 25 February 2014 (UTC)

Skins behave differently and a line put in Common.css would be effective on one skin, but not on another one. Common.css would be rather used for template schemes, like navboxes or infoboxes, visible on all skins. --LIMAFOX76 (talk) 08:36, 25 February 2014 (UTC)

Er...what? Common.css is for all skins. Vector.css on the other hand is just for Vector. It says this stuff right here. I don't know what you mean that common.css would not be effective on another skin. Llwy-ar-lawr (talk) 20:21, 25 February 2014 (UTC)

Wait, I think I know what you're getting at. Yes, skins behave differently, and a piece of code that affects one skin might not affect another, or not in the same way, even though it's in the common skin file. I still think common.css is worth mentioning though because it is possible to use it to customise all the skins with one file. Llwy-ar-lawr (talk) 20:27, 25 February 2014 (UTC)

Indeed, that's what I mean. This is the reason why it's better to use Common.css for all the stuff that behaves in the same way on all skins, and use Vector.css, Monobook.css, Monaco.css, etc. for all specific aspect. I think the last ShoutWiki skin has another behavior, and more specific command is needed to fit what to expect. --LIMAFOX76 (talk) 14:45, 27 February 2014 (UTC)