Guiding the Joomla novice on their way

Minimising problems maximising opportunity

How to customise a Yootheme template

on Friday, 13 July 2012. Posted in Templates


templatesI built this site to show the changes and experiences I've gone through as a novice to Joomla (although I think of myself as an apprentice). 

Not to miss an oppurtunity I'm going to change the way I've started, so as I change something on the site I'll write a little clip about it.

What I've done today is to customise the typography and I used Chris Pearsons 'Golden Ratio' calculator at decide some of those changes.


This is the same Golden Ratio as pertains to art and Chris has done some math and come up a simple calculator which I like to use- check it out.

This is a Joomla website and I have installed a YOOtheme template into it - which I like.  The only thing is I wanted to expand the body text slightly and I wanted to increase the line height in proportion to the text, to make it easier to speed read.

So the question was what was the right proportion and what did I need to do to effect the change.

First I need totemplate manager know what the body text was set to - so I went to template manager in the admin panel clicked on extentions and clicked on template manager then clicked on template tab, scroll down to your frontend template    click on details andetailsd files.




customiseThis is where you can customise templates On the left are the master template files and on the right the various stylesheets associated with the template. The way these are constructed differs from template to template although the general layout is the same.


css baseI know from past experience that the body text is defined in base.css with yootheme (you may have to examine each one to find what you are looking for.

Click on Edit css/base.css and were presented with the editing window

and here we see:

New style-related Base Values

body { font: normal 13px/20px Arial, Helvetica, sans-serif; }
the 13px being the font size and the 20px the line height.

copy the body line and cancel out of base.css. YOOtheme provides a custom.css for you to customise, excellent!

What novices find out is that changes made within the stylesheets get wiped out when you upgrade.

custom cssOpen custom.css and on the first line paste the body line taken from base.css.  excellent.  

goldenratioNow I jumped back to Chris Pearsons golden triangle form and entered the font size and the number of characters (including spaces I would display and the result tells me that the line height should be 21px.  So then I went to the second figure in custom.css and changed the 20px to 21px and saved.  I then added to the end of the line ( inside the bracket)  letter-spacing:.5px;  and saved.

The result of this is that the body text is now spaced ever so slightly greater than it was and the line height adjusted to perfection or at least my satisfaction.  Cancel out that.  

What is happening is that custom.css is acting as an override, showing what you want over the set setting.

There are other ways to achieve the same thing which I'll go over another time.

Let me know if this was useful to you or if there is a topic you would like me to talk about.

 Looking forward to hearing from you.




Comments (0)

Leave a comment

You are commenting as guest.


No tweets found.