ImcScotlandMirStyle < Local

You are here: Foswiki>Local Web>ImcScotland>ImcScotlandMirStyle (03 Apr 2004, SpaceBunny)Edit Attach

ImcScotlandMirStyle

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 big 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 to learn like 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!

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 they write #000 , instead of white they write #FFF - normally colours are considered having 6 digits, like white being #000000 and black being #FFFFFF. Lazy computer persons have dropped the second, fourth and sixth letter to make it even more complicated and even less to type. Okay, so lets see where my black background is on the scotland stylesheet. I am searching for #fff like on csi- crime scene investigation. 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 what do I exactly want to do? Well, ideally I would like to have all the links on the black background in a contrast colour. Maybe white. However, I would like to keep the blue colour of the links in the middle column. In fact, I would like to use exactly the colours used in the banner, so to use a darker blue and a darker red on the white background, and maybe the pink, white and light blue used on the black background.

I would like to make the "publish your news button" bigger and in dark red, and reposition it.

I would like to change the position of the Scotland newswire either to align with the upper or the lower rim of the banner.

I would like to make the text easier to read, either by bigger font size or by changing the font or by emphasizing it.

So where would I go to 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 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 scotland only changes.

Thanks very much for your attention. Have fun experimenting.

Updates will follow later.