Positioning Text in my Expound Theme Header

  • Unknown's avatar
    glennrcameron · Member ·

    I would like to change the font size and position of the description line in my header. I have had some success changing the font size but not the position. Any ideas?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    You will need to be very specific about exactly which fonts (style, color, size) you want and exactly which positioning you want. Then when those who help with CSS editing get to this thread they will help you with the codes required to achieve what you specify.

  • staff-jeanpierreac · Staff ·

    Hi.

    Yes, @Timethief –as usual :)- is right! You need to be more specific. CSS is so powerful and open that there are tons of adjustments that ca be performed.

    In any case, your title and subtitle are inside a layer with a defined margin (50px 40px) whose class name is ‘.site-title-group’ . If you change the first value, that will have the effect of a vertical displacement of your title (the smaller, the next to the top of your page). The second value have to do with the horizontal margin of your title area.

    So if you want, for instance, to place your title at the very top-left corner, you would need to add in your custom CSS page:

    .site-title-group {
    margin: 0px 0px;
}

    I hope this helps you. Otherwise, make us know.

    Enjoy Blogging!

  • Unknown's avatar
    glennrcameron · Member ·

    In the header of maryellenhess.com are the title, “Maryellen Hess” and the tag, “Let Justice Roll Down Like Water”. I’d like to position the title and the tag individually within the header.

  • staff-jeanpierreac · Staff ·

    Hi, in this case, you could position them independently by applying this margin attribute to .site-title-group .site-title and .site-title-group site-description. For instance: 

    .site-title-group .site-title {padding: 30px 0px 0px 10px;}
.site-title-group .site-description {padding: 0px 50px;}

    (You can use negative values for padding). In site-title, there is a second option to specify title which 4 values defining top, right, bottom and left margin. This will set a margin around headers, which means the description will be ‘pushed down’ which site-title margin top and/or bottom, as title is rendered first and then description.
    You can also alter this ‘page writing flow’ by using position property: 

    .site-title-group .site-title {position: absolute; top:50px; left:50px}
.site-title-group .site-description {position: absolute; top:50px; left:50px}

    With position:absolute, you can specify the exact position of title and header, using as origin in this case the .site-title-group div and specifying the offset with top and left properties. That means you could even –as in the example- write your description over the title.
    You have other position options. This page is nice to understand how it works, because you have live demos: http://www.w3schools.com/css/css_positioning.asp

    I hope this helps you. Enjoy your blogging!

  • Unknown's avatar
    glennrcameron · Member ·

    Thanks raulanton. That helped a lot.

  • The topic ‘Positioning Text in my Expound Theme Header’ is closed to new replies.