Balance Theme Header changing

[Tanya]

Hello!

I'm using Balance Child Theme. I've already changed the font of headers and text area (to Helvetica). But I can't change the post headers so that they would be normal but not bold and the space between header lines would be smaller. How should I do this?

Here is the part of the code from style.css:

/* Header
------------------------------------------------------------ */

#header {
margin: 0 auto;
min-height: 135px;
overflow: hidden;
width: 960px;
}

#title-area {
float: left;
overflow: hidden;
padding: 10px 0 0;
width: 350px;
}

#title {
font-family: "Helvetica", 'Lora', Georgia, "Times New Roman", Times;
font-size: 32px;
line-height: 1.25;
margin: 0;
}

#title a,
#title a:hover {
color: #222;
text-decoration: none;
}

#description {
color: #bbb;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 9px;
text-transform: uppercase;
}

#header .widget-area {
float: right;
margin: 40px 0 0;
width: 600px;
}

Thank you in advance!

http://tanyavega.com

[neilgee]

Try adding in:

.entry-title > a {
	line-height: 1;
	font-weight: lighter;
}

---

Neil Gee
WP Beaches
Coolest Guides

[Tanya]

Unfortunately, it didn't help. The headers of the posts stayed the same.
Do you have any more ideas how to fix it?

* I tried to add this part that you've suggested to the end of this code, right?..

[Tanya]

I wonder if you also could help me with the appearance of the header's (the headers of the posts) letters. I want them to be capital (all).
Thanx in advance.

[Tonya]

Hi Tanya,

You're Post Titles are currently set to font-weight of normal. The next step is to lower that font-weight value to see if you can achieve the look you want:

.entry-title, .entry-title a {
font-weight: 100;
}

font-weight can be 100, 200, 300, 400, and so on.

If 100 is still not the look you want, then the next step is to change the color, by setting color: #[the color's hex value here]; Place this line in the same brackets above under font-weight.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tanya]

Hi Tonya,

Thank you.

I tried the code you've suggested. It seems that the letters became thinner but not as much as I want. They are still too bold. I need them to be like the capital letters in the blog header ('TANYA VEGA').
Maybe I should just try another font?..

I'm sorry but I didn't understand the second part - how color changing can help in this situation? - I just need to change the letter (character) thickness.

[Tonya]

To make your text all capital letters, then you want to add:

text-transform: uppercase;

Changing the font-weight lights and darkens the text.

What I meant by changing the color is, doing the following:

color: #4e4e4e !important;

Place this line just after 252 in the style.css file. Notice that it "lightens" the titles because we used a lighter color than the #222 color.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tanya]

I made all post title text to capital letters - Thank you!

As to color changing: Do you mean that I must add this line color: #4e4e4e !important; after the line number 252 in the style.css file?.. But here that I have there:

ol,

ul {

Those are lines number 251, 252 and 253.

I tried to add it here:

.entry-title, .entry-title a {
font-weight: 100;
text-transform: uppercase;
font-size: 34px;
color: #4e4e4e !important;
}

But it just lightened the color. But the letters look the same bold.

Now the header part of the style.css looks like this:

/* Header
------------------------------------------------------------ */

#header {
	margin: 0 auto;
	min-height: 135px;
	overflow: hidden;
	width: 960px;
}

#title-area {
	float: left;
	overflow: hidden;
	padding: 20px 0 0;
	width: 350px;
}

#title {
	font-family: "Helvetica", 'Lora', Georgia, "Times New Roman", Times;
	font-size: 32px;
	line-height: 1.25;
	margin: 0;
}

#title a,
#title a:hover {
	color: #222;
	text-decoration: none;
}

#description {
	color: #bbb;
	font-family: "Helvetica", Verdana, Arial, Tahoma, sans-serif;
	font-size: 9px;
	text-transform: uppercase;
}

#header .widget-area {
	float: right;
	margin: 40px 0 0;
	width: 600px;
}

.entry-title, .entry-title a {
font-weight: 100;
text-transform: uppercase;
font-size: 34px;
}

I also changed the font size of post title (entry title) to 34 (became a bit smaller).

[Tanya]

Here is an example how I want the post titles look like: http://tanyavega.com/wp-content/uploads/sample.jpg

[Tonya]

At this point, we've given you a few options that you need to play with to achieve the look and feel that you want on your site. You'll want to adjust the following:

1. font-family: Most of the sites I do, I have a different font family for the titles
2. color: Changing the color will make the titles be their own entity
3. font-weight: This changes the weight (or thickness) of the font itself

Cheers

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts