Various changes to header text and menu (Twenty Eleven)

lifedancing · Member · Jan 23, 2012 at 9:21 pm
Copy link

Add topic to favorites
I have a few questions which I hope to get answered!

I want to align the header text “Lifedancing” to the left so that it is in line with the header image. I also would like to increase the size of it, like 60px.

I want the subheader text to be in a different font (Helvetica) and a different color (black). Is that possible?

I want to change the menu background color from black to redish, same as the header text.

Hope this wasnt too many questions for one post! :)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 23, 2012 at 9:42 pm
Copy link
Title/site description alignment.
```
#branding hgroup {
margin-left: 0;
}
```
Since you are using a custom typekit font, go back into appearance > custom design > fonts and you can increase the size there.

Site title/tagline font family, font size and bottom margin. If you adjust the font size, you will also probably want to decrease the bottom margin to get less whitespace between it and the header image.
```
#site-description {
color: #000000;
font-family: helvetica, verdana, arial, sans-serif !important;
font-size: 100% !important;
margin-bottom: 3.65625em;
}
```
Menu background color.
```
#access {
background: #AF0D0D;
}
```
lifedancing · Member · Jan 24, 2012 at 8:14 am
Copy link
Wow, thanks for fast reply!

It all worked except for the site description, its still red and wrong font.. :) Also, I already put the title font size to max in custom fonts view.. Any way I can increase it more?

I also read somewhere that I can replace the Header text with an image, in that case I can just make an image of the text in PS and upload it right?
thesacredpath · Member · Jan 24, 2012 at 8:53 am
Copy link
You are welcome.

Add the !important attribute to the end of the color declaration in #site-description as below.

color: #000000 !important;
lifedancing · Member · Jan 24, 2012 at 11:28 am
Copy link
Nice.
Much appreciated. It worked. =)
abhijatyatewari · Member · Jan 24, 2012 at 12:06 pm
Copy link
thanks for the valuable information.
But i want to use these setting temporarily for particular past only.
Will it affect my older posts too???
kothea · Member · Jan 24, 2012 at 4:40 pm
Copy link
yes
thesacredpath · Member · Jan 24, 2012 at 5:49 pm
Copy link
What are you wanting to do? If you can explain, it may be that we can target a specific element and not affect the rest of the page.
kothea · Member · Jan 24, 2012 at 5:51 pm
Copy link
Add the !important attribute to the end of the color declaration in #site-description as below.

color: #000000 !important;

why please?
thesacredpath · Member · Jan 24, 2012 at 5:56 pm
Copy link
There was something in the CSS somewhere that was overriding the color declaration we added, so we added the !important attribute to tell the browser that this was the important color declaration.

No items found.