UkMirStyle

Or: An adventurous discovery journey through the heart of the jungle of the Imc Scotland stylesheets.

Find out about the miraculous struggle against the blue colour on the black background!

Don't miss the attack on the "Publish your news" button!

See the banner jumping from the left to the right side- and back!

The style on this pages are different from the usual, isolated webpages, as in that the pages are all linked to each other and have connections with each other through their style. In fact there is a conspiracy going on in these regional subpages we are about to discover and bring to justice. So this linkage has the advantage that all the pages roughly resemble each other enough to give the impression of a connection, but also allow enough modification for a unique design. Furthermore it saves a lot of work.

Although most of us might not have much experience with the underlying css or cascading style sheets, it is actually quite a groovy and funky system, offering lots of advantages. A bit like twiki, it is like learning a new communication system, but once understood it is absolutely brilliant and you'll love it!

Although some people might prefer to let a programme do all the work, like a stylesheeteditor or so, the philosophy behind it, is worth having a more closer look at.

An introduction can be found here:

• http://glish.com/css/

Here is a wonderful tutorial, warmly recommended:

• http://www.westciv.com.au/style_master/academy/css_tutorial/

Actually it is the first help file I ever read from the start to the end. It is thrilling as a murder mystery, clear as water and easy to understand. Apart from that you will feel and are a lot more intelligent after you read it.

Well, okay, but up to now, we haven't talked at all about our little Imc Uk page we wanted to change. Take for example the Scotland subsection.

First go to your target website http://indymedia.org.uk/en/regions/scotland/ and view the source. If you are a bit familiar with html, you recognize that the source is a bit stripped down. You won't find any colour declaration e.g. or any font size. What you will find in the header though is something like:

    <style type="text/css" media="screen" title="Scotland Style"@import url(/style/scotland.css); /style>

Aha! Clever as we are, we discover a hidden link in here: /style/scotland.css . So lets go to: http://indymedia.org.uk/style/scotland.css and see what it is all about!

Okay, and in http://indymedia.org.uk/style/ there are the css for the other regions to find.

Ah, here is the rest of the html we have been missing in the source beforehand. The colours, fonts, font sizes,... all a bit appreviated, though. E.g the colours: instead of black it is #000 , white= #fff - colours briviously had 6 digits, like white being #000000 and black being #FFFFFF. Apparantly, the computer persons have dropped the second, fourth and sixth letter to make itless to type. Okay, so lets see where the black background is on the scotland stylesheet, searching for #fff.

Okay, it is all over the place. So lets look for the blue colour. And the red one. Aha, the red is #FF6666, here it is #f66. So, lets look for the pink and the blue. The pink is the background, so it should be declared so.

And here it is: body { background: #fef }, As we know now after having read the tutorial, the "body" is the selector, the stuff inside the {} the declaration of properties. So it is no wonder, that the system of cascading style sheets define all and every one of the scottish pages with a pink background, too, as e.g. our feature archive, our newswire archive, our mission statement page, yeah, everything in our Scotland section has this piggy colour background. And if we wanted to change the colour on all Scottish subpage a simple change of #fef in the stylesheet to e.g. green like in #F0F would turn the background on all the Scottish subpages into an illuminous glowing greenish. With one change in the stylesheet you can affect a whole subsection. You don't need to go into every page individually anymore and change every html-tag for the background colour. That is the big advantage of the stylesheets, it seperates the content from the appearance.

Okay but where is the blue now? Aha it is #08f, and defined as what it is: a link.

So now you might want to define exactly what do you want to do?

Then you would go and make the changes in the stylesheet.

So where would I go and make the changes? I know I have seen this stuff before somewhere? Ah, remembering to see it in a download of the CVS in the stylesheet for Scotland. Exactly the same. So if I go there, and change it and upload it, I have changed the layout the design successfully?

Yes.

But remember to always download the updated cvs from server first. Maybe somebody else went into the setup and changed something, so always remember to download the freshest version before starting to change it, and make sure, nobody else is working on it at the same time. Best is, to let people in the Irc channel #uk know beforehand if you make changes, or to announce it via the email list, if it affects regional only changes.

Thanks very much for your attention. Have fun experimenting.

More Tips

For testing colour combinations and getting there letter codes use:

http://www.visibone.com/colorlab/

just click colour then another to see it contrast.

Also to get codes from a colour try matching at: http://www.lynda.com/hexh.html

Using CVS diff

For finding what changes were made to investigate unexpected outcomes use diff on cvs file viewer.

http://mir.indymedia.org/cvs/viewcvs.cgi/setup_uk/etc/producer/

-- AnarchoBabe - 16 Jul 2003 I hope to update later with screen shots and so on.
to top