User talk:Ob.helm/Banner and style sheets for your wiki

Learn more about this page

I've built two German Wikis, one for the Democratic Turkey Forum and one for the Turkey coordination group (cogroup) of Amnesty International (AI) in Germany. In 2008 I had used the skin Gumax for a complete different look with banners on top of the page.

Edit the style (CSS) of a skin

On FAQ: How to edit your style sheet? I am told that I can change the style of any given skin that I intend to make the default for my wiki. I could, of course also design my own skin as explained on the page related to skinning under the heading of creating a skin based on Monobook. Yet I'm still left with the problem of what part of the style on each page I am actually changing.

Rather than explaining the theory I'll give a practical example. In this example we'll make changes to the skin called "Vector"

Type in your search box MediaWiki:Vector.css
You'll see a line /* CSS placed here will affect users of the Vector skin */ and the possibility to edit this page
Now it's up to you to decide what kind of changes you want to make after you clicked on "edit"

Change the font size

If you want to see the fonts for the skin that you have chosen you would open the file "NameOfSkin.css". For the skin "Vector" it is the file "screen.css". Here you see that the headings 1-6 have the following size

h1 { font-size: 188%; }
h2 { font-size: 150%; }
h3 { font-size: 132%; }
h4 { font-size: 116%; }
h5 { font-size: 100%; }
h6 { font-size: 80%;  }

You can change any of these values by typing (copying) into your edit-box for instance for heading 1 (the page title)

h1 {
        color: black;
	background: yellow;
        font-size:200%
}

and the page title has a yellow background and an increased size. Similarly you could increase the font-size of your navigation with these lines

#p- {
         color: black;
         font-size:120%
}

Make buttons "disappear"

This may not be the proper terminology, but if you want to hide certain buttons showing aspects of pages you can also achieve this in your MediaWiki:Vector.css page. Here are some examples:

li#ca-edit { display: none; } /*the edit button "disappears"*/
li#ca-talk { display: none; } /* the talk page "disappears"*/
#p-tb { display: none; } /*the toolbox "disappears"*/

Placing a banner on your site

There are two ways of placing a banner on your site. The first one is again (in this example) the page MediaWiki:Vector.css. Possible code is:

#mw-head-base {
    background-image: url("http://www.path/to/your/images/banner.png");
    background-color: transparent;
    background-repeat:no-repeat;
    background-position:center; 
    height: 40px;
}

Although I am not sure, but problems can occur, if you define the height larger that 50 pixel.

The second possibility is to use a banner in a page called MediaWiki:Sitenotice. No further explanations needed here.

Boxes on the main page

On may talk page I explained how I made use of the extension DynamicPageList (DPL) to organize boxes on the main page. Since June 2010 this extension has been marked as risky. But for this task DPL is not necessary. It seems to be easier to use templates.

The table

The structure of the table I used was as follows:

{| cellspacing="10" cellpadding='10' style='empty-cells:show;  margin: 1em 0 -1.5em;' <!-- beginning of main frame -->
|-
| width="50%" style="vertical-align:top;" |
<!-- Main Info -->
<div style="font-size: 140%;"><span style="background:#ff0">'''Overview'''</span></div>
Basic Info: to become box 1

<!-- Second latest news -->
<div style="font-size: 140%;"><span style="background:#ff0">'''More Info'''</span></div>
a little bit older: to become box 3

| width="50%" style="vertical-align:top;" |

<!-- Latest news -->
<div style="font-size: 140%;"><span style="background:#ff0">'''Hot'''</span></div>
most current: to become box 2

<!-- On fourth place -->
<div style="font-size: 140%;"><span style="background:#ff0">'''Still interesting'''</span></div>
Range 4: to become box 
|-
|}

to look as

Overview

Basic Info: to become box 1

More Info

a little bit older: to become box 3

Hot

most current: to become box 2

Still interesting

Range 4: to become box

The boxes would expand over the whole page, if text is added and, of course, you can centre certain parts of the text. It may be important to notice that in this table first column one is "filled" and then column two, making the order of boxes to be followed 1-3-2-4. This has to be of no concern for someone filling the boxes.

Filling the boxes

Instead of the extension DPL you now can create templates that can be called

{{Box 1}}
{{Box 2}}
{{Box 3}}
{{Box 4}}

and put them in the correct places.

As for the templates of these boxes they would contain an introductory text (maybe an image) and a link to the complete article. As an example the template for "box 2" could look like:

[[File:Image.png]] We have just been informed that no further actions is required concerning our latest urgent appeal. For the full text visit the page [[Update on our appeal dated 1 March 2012]]

Add topic