Balance Theme Header changing

Community Forums Forums Design Tips and Tricks Balance Theme Header changing

This topic is: not resolved

This topic contains 9 replies, has 3 voices, and was last updated by  Tonya 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #111951

    Tanya
    Member
    Post count: 22

    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
    #112074

    neilgee
    Member
    Post count: 117

    Try adding in:

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

    Neil Gee
    Coolest Guides

    #112395

    Tanya
    Member
    Post count: 22

    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?..

    • This reply was modified 2 months ago by  Tanya.
    • This reply was modified 2 months ago by  Tanya.
    #112428

    Tanya
    Member
    Post count: 22

    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.

    #112475

    Tonya
    Member
    Post count: 113

    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.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub

    #112494

    Tanya
    Member
    Post count: 22

    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.

    #112500

    Tonya
    Member
    Post count: 113

    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.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub

    #112587

    Tanya
    Member
    Post count: 22

    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).

    • This reply was modified 2 months ago by  Tanya.
    • This reply was modified 2 months ago by  Tanya.
    #112590

    Tanya
    Member
    Post count: 22

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

    • This reply was modified 2 months ago by  Tanya.
    • This reply was modified 2 months ago by  Tanya.
    #112706

    Tonya
    Member
    Post count: 113

    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


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.