Community Forums › Forums › Archived Forums › Design Tips and Tricks › Balance Theme Header changing
Tagged: Balance Child theme, Balance headers, balance theme
- This topic has 9 replies, 3 voices, and was last updated 9 years, 9 months ago by Tonya.
-
AuthorPosts
-
June 29, 2014 at 5:40 am #111951TanyaMember
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.comJune 30, 2014 at 12:51 am #112074neilgeeMemberTry adding in:
.entry-title > a { line-height: 1; font-weight: lighter; }
Neil Gee
WP Beaches
Coolest GuidesJuly 1, 2014 at 6:53 am #112395TanyaMemberUnfortunately, 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?..
July 1, 2014 at 8:21 am #112428TanyaMemberI 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.July 1, 2014 at 12:10 pm #112475TonyaMemberHi 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 BootcampJuly 1, 2014 at 1:34 pm #112494TanyaMemberHi 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.
July 1, 2014 at 1:52 pm #112500TonyaMemberTo 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 BootcampJuly 2, 2014 at 1:37 am #112587TanyaMemberI 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).
July 2, 2014 at 1:48 am #112590TanyaMemberHere is an example how I want the post titles look like: http://tanyavega.com/wp-content/uploads/sample.jpg
July 2, 2014 at 2:13 pm #112706TonyaMemberAt 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 itselfCheers
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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.