Techo heaven

Not for the faint-hearted.   Fellow propeller-heads only, please.

I thought that a few of you might be interested in how The Chariot has been modified from the standard iNove template in order to give us the presentation that we now enjoy.

The only changes we can make are those which are actioned through CSS – JavaScript alterations are barred to us (you have to self-host from wordpress.org if you want to do that, and that costs!).

CSS stands for Cascading Style Sheets.   The Cascading bit means that CSS files which are loaded later into your browser take precedence over those which are downloaded earlier.   Our Chariot CSS sheet gets loaded last of all, so it has the final say about the look and feel of any objects on our site.   CSS sheets contain ‘rules’ governing appearance, each rule consisting of a ‘selector’ (to define where the rule should be applied) and then a rule definition, enclosed within curly braces { … }.

Here is an extract from our CSS file showing the section that modifies slideshows to their current snazzy appearance –

.slideshow-window {
background-color:#FFF;
border:1px solid #DCDCDC;
border-radius:11px 11px 0 0;
margin-bottom:55px;
}

.slideshow-slide-caption {
background-color:#EDEFF0;
color:#000080;
text-shadow:none;
font-family:Verdana, Helvetica, Arial, sans-serif;
top:410px;
bottom:auto;
left:-1px;
line-height:15px;
height:auto;
width:673px;
border-radius:0 0 11px 11px;
-moz-border-radius:0 0 11px 11px;
-webkit-border-radius:0 0 11px 11px;
-khtml-border-radius:0 0 11px 11px;
border-left:1px solid gainsboro;
border-right:1px solid gainsboro;
border-bottom:1px solid gainsboro;
padding:10px 10px 5px;
}

.slideshow-line-height-hack {
padding-left:1px;
}

The first rule modifies the slideshow-window class, changing the colour of the background from black to the Chariot’s usual white, and setting the border to be a thin line with rounded edges, the same colour as other dividing lines on the home page.

The second rule adapts the slideshow-slide-caption class, moving the caption below the images and changing all sorts of parameters to ensure that the caption text is clearly readable.

The third short rule corrects a WordPress bug – I expect they’ll correct it themselves in due course.   In order to make smaller images align themselves in the vertical centre of the frame – something which is still quite hard to do even with CSS 3 – WordPress have used what they call a “line height hack”.   There are actually other ways to accomplish the same thing, but this one is reasonably simple and well known.   It works well in all modern browsers except IE9, where it has no effect at all, stranding small images at the top of the frame.

My little hack for the WordPress hack adds a one pixel space to the left of a phantom space, which forces IE9 to recognise the line height of nothing and position the image accordingly, just like all other browsers.   If that sounds like cryptic magic, that’s just what it is.   Cross-browser compatibility is the posh term.

If anyone would like to know more about this CSS snippet, or how to achieve a similar change on their site, please feel free to let rip with the questions.   On the other hand, if this post whets your appetite for learning CSS, there are many good sites – here’s the one I use for reference when I forget some subtlety.

If anyone would like to point out an error in my CSS rules, or teach me a better way to achieve the same result – fire away, I’m always ready to learn New Tricks (though I can’t sing like Dennis Waterman). 😀

Author: Bearsy

A Queensland Bear with attitude

8 thoughts on “Techo heaven”

  1. Ah, I wouldn’t mind changing the way Slideshows display on my site. My page width is narrower than yours, I think, so would I have to take this into account?

  2. It’s not rocket science, Pseu! 🙂

    Araminta – The width shouldn’t make any difference other than requiring a change to the ‘width’ value, and indirectly, in that the height will probably also be different, so the ‘top’ value will need to be less than 410px. Otherwise, it should be portable.

    Once you’ve paid the CSS fee, try it on preview and see what happens! 🙂

  3. Thanks, Bearsy.

    I have been thinking about paying the fee, but I do wonder if I have the time to become seriously interested in tinkering with the CSS at the moment. I’m having enough trouble writing posts!

  4. Pseu – I’m sorry if this little article comes across to you as though I’m boasting. I assure you I’m not.

    CSS is a very minor part of web design, easily mastered in a few hours by anyone. This article is the rough equivalent of a dressmaker describing the standard way of sewing buttonholes, or a cook explaining how to create a proper roux.

    I genuinely thought that one or two Charioteers might be interested, but I had no intention of ‘crowing’ – it’s all very trivial stuff. The only reason WordPress allows users to dabble with their CSS is because one can do no harm with it.

    I’ll refrain from such articles in the future. 😦

  5. Oh, well one Charioteer was, interested that is, and I have saved your post, Bearsy, for future reference.

    I am by no means a propeller-head, as you know, but I am interested in knowing how things work.

Add your Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s