Header Font Drama

[Dionnew9]

I'm a newby and I tried very hard to figure this out, but I couldn't find anything that spoke specifically to my issue:

I want to change the font of the logo in Cloudy (1.5) but try as I might, I can't change the font. I've successfully changed the location and font decoration in CSS but when I add font family code, the template just ignores it. Nothing changes.

This is where I've been trying to do it:

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #878787;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #2da1e1;
color: #FFFFFF;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
}

[GandalfGrey]

Do you have a link to the page?

[Dionnew9]

sure:

http://roundedgesdc.cloudaccess.net

Any help is appreciated!

[GandalfGrey]

When i add font-family in the div.logo-text h1 a rule i get a response.

[sunsterv]

Hi there,

well I'm a sort of newbie too. Firstly, you should use firefox and instal the firebug plug in. Take some time to read how to use it as you WILL need it whilst making joomla sites. Essentially it allows you to click around your webpage and will indicate which of joomla's css files are creating the styles. Remarkably, you can then type in different values in the firebug window and get a live update on the changes you've just made... they're not real, if you refresh it will go back to normal so you'll still have to go through the css files and upload your changes as normal afterwards.

By doing this I can see that the logo size is styled by your template.css file with the following code...

h1.logo, div.logo-text h1 {
font-size:150%;
line-height:1;
}

and the font family is styled also by the template.css file with the following code

.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family:georgia;
font-weight:normal;
line-height:1.2;
}

now on your css file you'll see the font-size as 250% and the font family as arial, helvetica - I changed these in firebug to make sure I was looking at the right thing.

If you're wanting to change the font ONLY for the logo then you need to ignore the second css style, but on the first change it to:

h1.logo, div.logo-text h1 {
font-size:150%;
font-family: trebuchet;
line-height:1;
}
... where you can change the font to whatever you want - this is specifically for the logo text.

Hope I've got that right and hope it helps,

Sunsterv

[Dionnew9]

I'll try that firebug deal - I've screwed around with font-family in the div.logo-text h1 a rule and it was non responsive.

I'm not sure what was going on though because I actually put the site down, came back and suddenly my entire header was gone lmao I had cut and pasted the entire template code in a document before I made any changes; I just reclipped the header section and all was better.

So maybe something weird was happening today. I will give these suggestions a try.

[Dionnew9]

Hey thanks - I tried it and after I changed to serif, I saw results. Thanks!

Now if only I could change the color lol Never satisfied

[GandalfGrey]

Look in the file templates/cloudy/css/colors/blue.css and you will find this css rule

Code: Select all

div.logo-text h1 a {
    color: #1181AA;
}