How do you change the font size of a heading in a Yootheme Template for Joomla?



Yootheme Template heading size change


How do you change the font size of a heading in a  for Joomla? If you want to change the font size of a heading in a Yootheme Template for Joomla here is how...


To change the font size it may mean adding a line to the sites "typography.css" file (I spent ages looking for the heading font size to change before I realised it wasn't there and needed to be added.)

NOTE: If this doesn't help, try how to change the font size for newer yootheme templates 2012 or later on Joomla 2.5

  • Start by logging on to the back end of the Joomla site with the Yootheme who's heading font size you want to change.


  • Under extensions, click on the template manager, click the radial button (the circle) next to your Yootheme template and click on the icon “edit CSS”

(or just click on the name of the Yootheme template to go straight to the editor). You will get a list of the CSS files used in the Yootheme template.

  • Click the radial button next to “typography.css” and then click the edit icon. The "typography.css" file is present on all Yootheme templates.


  • Look for the heading, or typography you want to change. If you are not sure, go to Yootheme.com and view the demo of your template. Look for the menu option “typography”. This will take you to the page which shows all the typography options. In this example I'll use the main headings: “h1” in most Yootheme templates.


  • You should see some code like this:


h1 {
    font-weight: normal;
    color: #50575F;
}

  • To change the font size you need to add the following “font-size: XXpx;” where 'XX' is a size in pixels. If I use 28 pixels in this example, the code then becomes:

 
h1 {
    font-size: 28px;
    font-weight: normal;
    color: #50575F;
}

  • So, if the line "font-size" already exists, just change the value and the font size will change on you Yootheme template. If there is no 'font-size' line, just add it and choose the size you want.


Don't forget to save your changes and force a refresh in firefox (I hope you use firefox) to check it worked.


Posted in Web