How to change type size and flush left

  • Author
    Posts
  • #1554679

    jangreco
    Member

    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.

    #1554804

    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;
    }
    #1554840

    jangreco
    Member

    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.

    #1554851

    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;
    }
    #1554852

    jangreco
    Member

    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…

    #1554882

    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;
    }
    #1554892

    jangreco
    Member

    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?

    #1554902

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

    font-weight: bold;

    #1554906

    jangreco
    Member

    I tried that but it didn’t change the wt.

    #1554907

    justpi
    Member

    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.

    #1554911

    jangreco
    Member

    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?

    #1554912

    justpi
    Member

    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;

    #1554913

    jangreco
    Member

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

    #1554917

    jangreco
    Member

    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.

    #1554921

    justpi
    Member

    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

    #1554922

    jangreco
    Member

    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?

    #1554923

    jangreco
    Member

    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;
    }

    #1554924

    justpi
    Member

    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;
    }

    #1554927

    jangreco
    Member

    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.

    #1554928

    justpi
    Member

    “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;
    }

The topic ‘How to change type size and flush left’ is closed to new replies.