WordPress.org

Ready to get started?Download WordPress

Forums

Ryu
[resolved] Reduce title and body font size in RYU (11 posts)

  1. dangillmor
    Member
    Posted 5 months ago #

    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

  2. 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:

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

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

    http://dailypost.wordpress.com/2013/08/29/css-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.

  3. dangillmor
    Member
    Posted 5 months ago #

    Thanks -- I'll give this a try.

  4. dangillmor
    Member
    Posted 5 months ago #

    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.

  5. Try adding blockquote here:

    .entry-content, .entry-summary, blockquote {
        font-size: 16px;
    }
  6. dangillmor
    Member
    Posted 5 months ago #

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

  7. Ah, try this instead:

    .entry-content, .entry-summary, blockquote p {
         font-size: 16px;
    }
  8. dangillmor
    Member
    Posted 5 months ago #

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

    Thanks!

  9. 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;
    }
  10. dangillmor
    Member
    Posted 5 months ago #

    Perfect -- many many thanks!

    (Resolved)

  11. You're welcome. :-)

Reply

You must log in to post.

About this Theme

About this Topic