Need help? Check out our Support site, then


How to change type size and flush left

  1. I just upgraded my site but I can't make heads or tales of this css business. All I want to do i make the header type a smudge smaller and flush it left. Help!

    The blog I need help with is beetsandbluecheese.com.

  2. thesacredpath
    Staff

    Hi there, to make the site title smaller and left aligned, add the following to your custom CSS and then edit the 92px value as desired.

    .wf-active #site-title {
        font-size: 92px;
        text-align: left;
    }
  3. thank you so much! now where do i go to learn this stuff on my own?
    I'd also like to flush left the tag line, perhaps change the weight of the post headers and give them color.

  4. Hi there and I see you have gotten the site description/tagline left aligned. Nice job on getting the tagline left aligned!

    You can make the post titles bold with the following:

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

    The post titles on the main page, and in archive, tag and categories pages are links and are the #7C176B color. To change the color of the post titles on the single post pages and the static pages, add the following and edit the color code as desired.

    .entry-title {
        color: #7C176B;
    }
  5. thanks for the support! now i'm trying to make the beets and blue cheese title one font wt. and the recipes and ramblings another. ideas...

  6. thesacredpath
    Staff

    I would suggest putting the "simple recipes & ramblings" into the site description/tag line and then moving that up below the site title. This would be the basics for that, but adjustments to spacing will need to be made. Add "simple recipes & ramblings" as your site description, remove it from the site title and then add the following and we can work on getting it styled and spaced as you desire.

    #page {
        position: relative;
    }
    
    #site-description {
        border: none;
    }
    
    #description {
        border: none !important;
        position: absolute;
        top: 60px;
        left: 170px;
    }
  7. This worked perfectly! Tried to change the weight of the simple recipes... But it didn't seem to work, is there a hierarchy to these things?

  8. To the #site-description rule, add the following to make it bold:

    font-weight: bold;

  9. I tried that but it didn't change the wt.

  10. You need to change the "top" value for #description, to correct the positioning of the tagline.
    But the tagline is bold. Remove thesacredpath's last suggestion and you'll see the difference.

  11. i'm beginning to wish i never started down this css path. thanks for your patience...

    i can't seem to change the font or wt. of the site description title independent of the blog title or entry title.

    should i strictly be changing things through the css screen or fonts as well?

  12. a) Depends. Appearance > Customize > Fonts allows basic changes only, i.e. changing the font family and the proportional font size of all the headings. When you want to target specific headings only, or make other changes, you need coding in the CSS editor.

    b) I'm seeing some CSS that wasn't there before, I think. What I'm seeing shows you selected a Typekit font. In that case thesacredpath's suggestion has no effect; you need to turn this:
    font-weight: bold;
    to this:
    font-weight: bold !important;

  13. how do you know what i'm using when i don't know?!? and how do i learn this stuff?

  14. ugh! here's what my css says:
    .wf-active #site-title {
    font-size: 70px;
    font-weight: hairline;
    font: 'omnes pro';
    text-align: left;
    color: #014073;
    padding-top: 0;
    }

    .entry-title, .entry-title a {
    font-weight: hairline;
    font-size: 44px;
    font: 'omnes pro';
    color: #014073;
    }

    #page {
    position: relative;
    }

    #site-description {
    border: none;
    font-weight: black !important;
    font-size: 32px;
    font: 'omnes pro';
    }

    #description {
    border: none !important;
    position: absolute;
    top: 120px;
    }

    .home #main {
    padding-top: 0;
    }

    but i'm looking to make my tagline "simple recipes & ramblings" heavy and possibly a different font all together.

  15. a) To see your CSS (=your customizations plus the default CSS of the theme plus other CSS) we inspect your page using a developer extension (I usually use Firebug in Firefox).

    b) There's no "hairline" or "black" value for font weight. The standard values are "normal" and "bold" (or 400 and 700 or 800). And some fonts don't even support such a choice.

    c) If you want two different fonts for title and tagline, go to Appearance > Customize > Fonts, try out the fonts, and tell us which ones you'd like to use.
    Of course you could also use one of the standard web-safe fonts:
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

  16. thank you so much for al the help. i think i finally got it to where i can leave it be for a day or two. but one more question...

    is there css code for word/line spacing?

  17. i just discovered an issue: my tagline disappears if i click on a recent post. here is my updated css:

    .wf-active #site-title {
    font-size: 63px;
    text-align: left;
    color: #a7a79e;
    opacity: .3;
    padding-top: 15px;
    }

    .entry-title, .entry-title a {
    font-size: 28px;
    color: #b9b6b6;
    }

    #page {
    position: relative;
    }

    #site-description {
    border: none;
    font-weight: black !important;
    font-size: 32px;
    }

    #description {
    border: none !important;
    position: absolute;
    top: 128px;
    }

    .home #main {
    padding-top: -5px;
    }

  18. You're welcome.

    a) "Is there css code for word/line spacing?"
    Yup. But that's two different things. What exactly would you like to change?

    b) "my tagline disappears if i click on a recent post"
    That's the way Forever is designed: it displays the tagline on the main posts page only. If you want the tagline on all your blog pages, you need a totally different solution. Remove the opacity from .wf-active #site-title (you can make the grey lighter in a different way), delete the #page, #site-description and #description rules, and add these instead:

    #site-title:after {
    color: #7C176B;
    content: "TYPE YOUR TAGLINE HERE";
    display: block;
    font-family: 'jubilat-1,jubilat-2,'Raleway',"Helvetica Neue",Arial,Helvetica,sans-serif;
    font-size: 2.5rem;
    line-height: 1.17;
    }
    #description {
    display: none;
    }
  19. can i just add a line of code to my existing css to get the tagline to stay instead of changing the opacity etc?

    and i would like to add more letter spacing to the tagline.

  20. "can i just add a line of code"? No. You cannot use CSS to make a theme display elements it doesn't display: you have to insert a substitute.
    Why do you care about the opacity? There's nothing behind the blog title so it makes no difference if the title is transparent or not: the result is simply a lighter shade of grey than the one you have selected. You can reproduce that shade the normal way. Try it for yourself - remove the opacity rule and add this:

    #page #site-title a {
    color: #C7C5C5;
    }
  21. okay, you're right.

    so here it is as it currently stands. when i pasted in what you suggested earlier i lost my flush left styling and font sizes. can you give me the total novice, don't need to change a thing css code to get the tagline to stick around?

    .wf-active #site-title {
    font-size: 63px;
    text-align: left;
    padding-top: 15px;
    }

    #page #site-title a {
    color: #C7C5C5;
    }

    .entry-title, .entry-title a {
    font-size: 28px;
    color: #b9b6b6;
    }

    #page {
    position: relative;
    }

    #site-description {
    border: none;
    font-weight: black !important;
    font-size: 32px;
    }

    #description {
    border: none !important;
    position: absolute;
    top: 128px;
    }

    .home #main {
    padding-top: -5px;
    }

  22. Ok!
    Remove these:

    #page {
    position: relative;
    }
    
    #site-description {
    border: none;
    font-weight: black !important;
    font-size: 32px;
    }
    
    #description {
    border: none !important;
    position: absolute;
    top: 128px;
    }
    
    .home #main {
    padding-top: -5px;
    }

    and paste these:

    #site-title:after {
    color: #7C176B;
    content: "simple recipes + ramblings";
    display: block;
    font-size: 22px;
    }
    
    #description {
    display: none;
    }

    If there's something you don't like after you do this, we can always adjust it.

  23. you rock!

    the only little tweaks i'd like to make are to open up the letter spacing on the tagline a bit and move beets and blue cheese down a bit.

  24. 1. Add this to #site-title:after and change the value till you get the result you prefer:
    letter-spacing: 0.07em;

    2. You mean increase the space above the title, or decrease the space between title and tagline, or both?

  25. decrease the space between the title and tag.

  26. Add this and decrease the value:

    #site-title {
    line-height: 1.212;
    }
  27. just pi— you're amazing! thank you...

  28. You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic