Post TitleFont Style/Post Sidebar

Home Forums Automattic Simfo Post TitleFont Style/Post Sidebar

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #109371 Resolve

    Christy “Rockin'” Rosander

    Hello,
    1. I would like post title font style to be different than the site title. How can I do that?
    2. Also, how can I set all blog posts to be full width without the sidebar?
    Thank you.

    The blog I need help with is ladyonarock.wordpress.com
    #143893

    Kathryn P.
    Happiness Engineer

    Hi there,

    2. Also, how can I set all blog posts to be full width without the sidebar?

    Adding this CSS will hide the sidebar and make the main column full width, on all screen sizes:

    #secondary {
    display: none;
    }

    #primary {
    width: 100%;
    }

    Learning how to target your site’s CSS will help you make certain design changes. Here are some very helpful posts that will help you customize your site with CSS:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    If CSS is new to you, we also have some resources for learning more about it here:

    You can learn more about using media queries that target certain screen sizes here:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    #143894

    Kathryn P.
    Happiness Engineer

    1. I would like post title font style to be different than the site title. How can I do that?

    You can target those elements separately with CSS.

    What fonts do you want to use for each?

    The post title has a class of entry-title, so it can be targetted with code like this:

    .entry-title {
    font-family: [your list of fonts here, separated by commas];
    }

    The site title has the class site-title so it can be similarly targetted with CSS:

    .site-title {
    font-family: [your list of fonts here, separated by commas];
    }

    The font list needs to correspond exactly to the way the fonts are named in Typekit, so if you let me know which fonts you want for each element I can help with that.

    #143898

    Christy “Rockin'” Rosander

    The font style and size I would like for the site title is:

    FF Market

    3 Regular

    The font style and size I would like for post titles and headings within posts is:

    Arimo

    2 Regular

    #143901

    Kathryn P.
    Happiness Engineer

    The font style and size I would like for the site title is:

    FF Market

    3 Regular

    Looks like that’s what you already have set through the customizer, so that part doesn’t need any extra CSS. I can see this in your custom CSS:

    .site-title {
    font-family: ff-market-web,"Old Standard TT","Times New Roman",Times,serif;
    }

    The font style and size I would like for post titles and headings within posts is:

    Arimo

    2 Regular

    Try this for bold post titles and headings within posts (h1 through h6 sizes):

    .entry-title, .entry-title h1, .entry-title h2, .entry-title h3, .entry-title h4, .entry-title h5, .entry-title h6 {
    font-family: arimo,"Old Standard TT","Times New Roman",Times,serif;
    font-weight: bold;
    }

    If you don’t want them bold, then remove the line font-weight: bold;

    #143908

    Christy “Rockin'” Rosander

    This does not seem to work. I waited some time, but still does not reflect change in post titles. Suggestions?

    #143910

    Kathryn P.
    Happiness Engineer

    Ah, this is my mistake. You can’t call a Typekit font through CSS that isn’t being loaded through the customizer under Fonts. Given that Arimo is a fairly simple sans-serif font, you could try using a non-Typekit font that doesn’t need to be loaded through the customizer, like Verdana or Helvetica:

    .entry-title, .entry-title h1, .entry-title h2, .entry-title h3, .entry-title h4, .entry-title h5, .entry-title h6 {
    font-family: Helvetica, sans-serif !important;
    font-weight: bold !important;
    }

    Another alternative would be to select Arimo for your body text under Customize > Fonts. That would then allow you to also use it for your post headings. If you go that route, you’ll need to add !important just before the semi-colon on the two lines of code I gave you earlier.

    #143917

    Christy “Rockin'” Rosander

    I tried it both ways. A couple problems: the font size of the post titles are huge. Right now the size is connected with the Site Title. To get the post titles so they are not huge the site title gets too small. Also, the headings within posts are still in the font style of the Site Title, ff market. Thank you for hanging in there with me. Here is a post for an example:

    http://ladyonarock.wordpress.com/2013/11/18/colorado-summer-art-cdt-video-part-5/

    #143918

    Kathryn P.
    Happiness Engineer

    Could you please change your current code to:

    .entry-title, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: Helvetica, sans-serif !important;
    }

    To more finely control the font size you can target each style individually and specify the size. For example:

    .entry-title {
    font-size: 24px !important;
    }

    .entry-content h1 {
    font-size: 20px !important;
    }

    … and so on, for each style. Keep in mind that doing this will also affect how your site looks on mobile devices. If you want the sizing to only apply to larger screens, you can include all the new styles within a media query, using the guide I provided earlier:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    For example:

    /* Desktops and laptops
    
    */
    @media only screen
    and (min-width : 1224px) {
    /* insert all your font size styles here*/
    }

    #143930

    Christy “Rockin'” Rosander

    Thank you for your help. Everything worked.

    #143939

    Kathryn P.
    Happiness Engineer

    Great, glad it’s sorted! I’m marking this as resolved and closing it, but if you need further help feel free to start a new thread.

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

The topic ‘Post TitleFont Style/Post Sidebar’ is closed to new replies.