How to change font size and stytes in the template

Hi again!
every day I like very much your template ... Hope to learn how to customize in my sites ...

Now, I would like to change the size of the font for titles in items. With firebug, I can see that titles are using h2 styte. I would like to do decrease the font, it too big for my page. And at same time, change color font. Is it possible? I an get the name of div section using firebug, but after, I don't know how to change it in css custom override.

Please, could you give me an example of how to change this? So, if it's possible, I will know how to it in each div section ...

Thank you very much.

Using last version of the news II, joomla 1.7, and the site is in construction . If admin and pass is required, pls, say to me how to send it.

H2 style is used in lot of places. Any particular place you want to make those changes, perhaps if you can show with a screenshot it could be easier.

Here, in the title of the items. Spanish words are too long ...

Add in override.css - Make sure CSS Override is enabled in advanced features of TWN2 Template in joomla admin.

Code: Select all

/* Changing H2 Title in Component */
#gkComponent > div > h2 a {
    font-size: 24px; /* Changes title font size */
    line-height: 30px; /* Space or height of title block itself */
    margin-bottom: 0;
    color: #eeeeee; /* Sample Colour - Change to which ever colour you like */
}


thank you very much ... now, I know to do it in the different sections!

no problem, that is how most of us learned i believe

Hi again!

I have inserted this in my override.css:

#gkComponent > div > h2 a { font-size: 28px; line-height: 45px; margin-bottom: 0; }

(exactly same line 72 than joomla.css, changing the font-size and line-height), but it doesn't work for me .. aghh.

If I check it using firebut, the template are loading the line in joomla.css and not the template override. So, If I change this in joomla.css it works. But I would like to change it in override.css, to avoid the overwrite when updates.

It's possible to do this?

Thank you very much

Did you enable CSS Override option in Template Features?


Joomla Admin > Extensions > Template Manager > GKTWN2 > On the Right Advanced Features > CSS Override

Yes, it is enable. In fact, the other lines in override.css are working fine. I enclose my override.css.

There are several commented lines in the bottom. If I use this lines, removing /*, I can made the changes, but only, for example for blog section: /* Changing H2 Title in Component */
/*#gkComponent > div.blog > div.items-leading >div.leading-0 > div.article-meta > h2 a {
/* font-size: 24px; /* Changes title font size */

The whole css:

/*
#------------------------------------------------------------------------
# The World News II - July 2011 template (for Joomla 1.6/1.7)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */
/* Increase Logo Height */
#gkLogoWrap {
min-height: 180px;
position: relative;
}
/* Top Menu Background Change */
#gkTopMenu {
background: none repeat scroll 0 0 #822430;
border-bottom: 1px solid #F93D1C;
border-radius: 3px 3px 0 0;
height: 37px;
line-height: 37px;
}

/* Changing background colour */ Remove comments when decided the color background.
/*html {
/* background: #E48D8D;
/*}

/* Changing H2 Title in Component */ Commented for the moment.
/*#gkComponent > div.blog > div.items-leading >div.leading-0 > div.article-meta > h2 a {
/* font-size: 24px; /* Changes title font size */
/* line-height: 22px; /* Space or height of title block itself */
/* font-weight: bold;
/* margin-bottom: 0;
/* color: #822433; /* Sample Colour - Change to which ever colour you like */
/*}

#gkComponent > div > h2 a { font-size: 28px; line-height: 45px; margin-bottom: 0; }


--------Thank you very much!

If this is the exact content of your override.css you are not closing your comments , that is the problem.

Example as below;

/* this is a commented line and does not get rendered */

or

/* this is a commented line and does not get rendered
this is a commented line and does not get rendered
this is a commented line and does not get rendered
this is a commented line and does not get rendered
this is a commented line and does not get rendered
this is a commented line and does not get rendered
*/

Replace your override.css as below and check the difference...

Code: Select all

/*
#------------------------------------------------------------------------
# The World News II - July 2011 template (for Joomla 1.6/1.7)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */
/* Increase Logo Height */
#gkLogoWrap {
min-height: 180px;
position: relative;
}
/* Top Menu Background Change */
#gkTopMenu {
background: none repeat scroll 0 0 #822430;
border-bottom: 1px solid #F93D1C;
border-radius: 3px 3px 0 0;
height: 37px;
line-height: 37px;
}

/* Changing background colour -  Remove comments when decided the color background. */
/*
html {
 background: #E48D8D;
}
*/

/* Changing H2 Title in Component - Commented for the moment. */
/*
#gkComponent > div.blog > div.items-leading >div.leading-0 > div.article-meta > h2 a {
font-size: 24px;   
line-height: 22px;
font-weight: bold;
margin-bottom: 0;
color: #822433; 
}
*/

#gkComponent > div > h2 a { font-size: 28px; line-height: 45px; margin-bottom: 0; }


It's working perfectly. Thanks to this and your help, I have changed all the style site as I like, not only for the template, also for all my modules. Very easy to do it now. Using firebug, I test before each external module, and when it is as I like, I only have to copy & paste the code into override.css and works ok!