Support » Theme: Ryu » Reduce title and body font size in RYU

  • Resolved dangillmor

    (@dangillmor)


    I love this theme but would prefer a much smaller headline/title and body font sizes, especially blockquotes in the latter. Where would I find this in the CSS? Thanks!

    Blogging at dangillmor.com

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Kathryn

    (@zoonini)

    To change the size your post and page titles, try this custom CSS, adjusting the number as you like:

    .entry-title {
    font-size: 50px;
    }

    To reduce the size of the body text, try something like this:

    .entry-content, .entry-summary {
        font-size: 16px;
    }

    Some tips:

    Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    If you want to make other design tweaks, learning how to target your site’s CSS will help you do that. Here are some very helpful posts that will help you customize your site with CSS:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    Intro to CSS: Previewing Changes with the Matched Rule Pane

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

    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/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Let me know how it goes, and if you need help with anything else, feel free to start a new thread.

    dangillmor

    (@dangillmor)

    Thanks — I’ll give this a try.

    dangillmor

    (@dangillmor)

    That worked nicely. One more question, if you don’t mind. What would be the code to reduce the size of the blockquote type?

    Again, this is a great theme for my purposes. Thanks.

    Moderator Kathryn

    (@zoonini)

    Try adding blockquote here:

    .entry-content, .entry-summary, blockquote {
        font-size: 16px;
    }

    dangillmor

    (@dangillmor)

    I did, but no effect. For example, this post.

    Moderator Kathryn

    (@zoonini)

    Ah, try this instead:

    .entry-content, .entry-summary, blockquote p {
         font-size: 16px;
    }
    dangillmor

    (@dangillmor)

    Aha, almost there. How do I also keep the indent? (also curious how that extra “p” affected it)

    Thanks!

    Moderator Kathryn

    (@zoonini)

    The code above doesn’t affect the indenting, only the font size.

    Ryu doesn’t indent blockquotes, as you can see in the demo here.

    To add an indent to blockquotes, add this code:

    blockquote {
         margin-left: 40px;
    }

    (also curious how that extra “p” affected it)

    I used a browser inspector to see that the original style was being applied on the blockquote p element, not just the blockquote.

    You may want to have a read of some of the above resources to get a better handle on CSS specificity and inheritance.

    p.s. Be sure to erase the previous style, since you replaced it with a new one and now have some duplicate styles.

    Old:

    .entry-content, .entry-summary, blockquote {
         font-size: 16px;
    }

    New:

    .entry-content, .entry-summary, blockquote p {
        font-size: 16px;
    }
    dangillmor

    (@dangillmor)

    Perfect — many many thanks!

    (Resolved)

    Moderator Kathryn

    (@zoonini)

    You’re welcome. 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Reduce title and body font size in RYU’ is closed to new replies.