How do you change the font size of a heading in a Yootheme Template for Joomla?
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.)
- 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.
Set as favorite
Bookmark
Email this
Trackback(0)
TrackBack URI for this entry
Comments (5)
Subscribe to this comment's feed
Kauz, where are you stuck?
written by tekno_boy, February 20, 2011
written by tekno_boy, February 20, 2011
Hi Kauz, were you able to follow the instruction exactly?
To change the font size of a heading in a Yootheme Template you must:
1) log in to the Joomla back end
2) Click on the template manager
3) Click the radial button next to your Yootheme template and then click on the icon “edit CSS”
4) Click the radial button next to “typography.css” and then click the edit icon.
5) Look for the heading (h1) or typography you want to change.
6) Find the code:
h1 {
font-weight: normal;
color: #50575F;
}
7) ADD “font-size: XXpx;” where 'XX' is a size in pixels.
Clear you browser cache and refresh.
Did you manage to do all those steps?
To change the font size of a heading in a Yootheme Template you must:
1) log in to the Joomla back end
2) Click on the template manager
3) Click the radial button next to your Yootheme template and then click on the icon “edit CSS”
4) Click the radial button next to “typography.css” and then click the edit icon.
5) Look for the heading (h1) or typography you want to change.
6) Find the code:
h1 {
font-weight: normal;
color: #50575F;
}
7) ADD “font-size: XXpx;” where 'XX' is a size in pixels.
Clear you browser cache and refresh. Did you manage to do all those steps?
-
- +1
-
-
Write comment
| < Prev | Next > |
|---|
| More help and how to articles: |
|---|
|
