WordPress.org

Forums

Reducing post title font size in child theme (19 posts)

  1. cbaz
    Member
    Posted 1 year ago #

    Hi,

    I would like to simply reduce the font size of my post titles in my 2013 child theme. The child theme was set up for me by someone else, so I'm not exactly sure how to edit it. I'm assuming I need to make changes in the CSS, but I'm not sure where or how to do it.

    Here is my site if anyone needs to view it: http://www.thenaturallyhealthyhorse.com

    Thanks!

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. Nhat
    Member
    Posted 1 year ago #

    Hi cbaz,

    You can put this at the bottom of your theme's style.css; or if you have WordPress's official Jetpack plugin, you can go to Appearance --> Edit CSS and put it there.

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

    Hope this helps,
    Nhat

  4. cbaz
    Member
    Posted 1 year ago #

    Hi esmi and Nhat,

    Thanks for your responses. I will try downloading the Internet Explorer web developer tool and see if that helps.

    And, Nhat--do I just paste that at the very bottom of the style.css? I'm just afraid of making changes that will somehow screw up my site! (I've done this before. . .)

  5. Nhat
    Member
    Posted 1 year ago #

    And, Nhat--do I just paste that at the very bottom of the style.css? I'm just afraid of making changes that will somehow screw up my site! (I've done this before. . .)

    Yes, just paste that line at the bottom of your [moderated] or child-theme's style.css. Or if you want to make it easier, install WordPress's official Jetpack plugin and activate the Custom CSS module; it'll allow you to add custom CSS via Appearance --> Edit CSS.

    Adding CSS lines will never break your site to the point that it's inaccessible. If something goes wrong, simply delete the line.

    You only have to worry about messing up when you mess with PHP.

    ----

    Edit: In case you don't know, you can change the font size number to whatever you want by changing that number.

  6. cbaz
    Member
    Posted 1 year ago #

    Ok, thank you! I'll try that.

  7. cbaz
    Member
    Posted 1 year ago #

    Ok, I have Jetpack Custom CSS. I added .entry-title { font-size: 26px; }, but when I clicked preview, nothing was changed. Am I missing something?

  8. cbaz
    Member
    Posted 1 year ago #

    I still need help changing the font. The developer tool wouldn't work and the CSS code from above didn't seem to change anything. Anyone???

  9. Dennis Barber
    Member
    Posted 1 year ago #

    The font size is controlled by the h1 tag so update the line you added to your css to this:

    .entry-title h1 {
        font-size: [YOUR NUMBER]px;
    }
  10. cbaz
    Member
    Posted 1 year ago #

    Thank you. I tried that as well, and still nothing! Here is my stylesheet--where do I insert it?

    1.Theme URI: http://example.com/twenty-thirteen-child/

    2. Description: Twenty Thirteen akChild Theme

    3. Author: Aimee Kade

    4. Author URI: http://example.com

    5. Template: twentythirteen

    6. Version: 1.0.0

    7.*/

    8.

    9./* =Imports styles from the parent theme

    10.-------------------------------------------------------------- */

    11.@import url('../twentythirteen/style.css');

    12.

    13.

    14./* =Theme customization starts here

    15.-------------------------------------------------------------- */

    16..akfull-page {

    17. margin-left: auto !important;

    18. margin-right: auto !important;

    19. height: auto;

    20. padding-right: 1em !important;

    21.}

  11. cbaz
    Member
    Posted 1 year ago #

  12. cbaz
    Member
    Posted 1 year ago #

    sorry, can't seem to remember how to paste a pastebin link--argh!

  13. stephencottontail
    Member
    Posted 1 year ago #

    The reason it didn't work before is because you had .entry-title { font-size :18 px; }. It should have been .entry-title { font-size: 18px; } Note that there's no space between "18" and "px".

  14. Dennis Barber
    Member
    Posted 1 year ago #

    @stephencottontail is right, sorry I missed that. And to answer your other question, anywhere after line 11 will work fine, but for semantics, line 22 would be better.

  15. cbaz
    Member
    Posted 1 year ago #

    I hate to say this, but it still didn't work! (no space between 18 & px)

  16. Dennis Barber
    Member
    Posted 1 year ago #

    Checking your CSS with Chrome developer tools, I can see all your CSS and it still shows that you have a space remaining in your CSS element. Your css is showing:

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

    And that it has been inserted using dev7-custom-css via jQuery, which I think is the Jetpack plugin. Since that is the only line of CSS added from this, and you said you changed the CSS through Jetpack, I surmise this is the case. It is very important that there is no erroneous spaces. In fact you can copy and paste this line to be sure:

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

    To change the size, change the number - do not add any spaces. Copy that in and save it. That should reduce your heading size.

  17. Dennis Barber
    Member
    Posted 1 year ago #

    p.s. I copied the line:

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

    straight from the developer tools after removing the spance and it worked. You post titles where only 18px in height.

  18. cbaz
    Member
    Posted 1 year ago #

    I'm sorry to be so dense, but I keep pasting this code in and it is not working for me! I am going to Appearance > Editor > Stylesheet (style.css) and adding it to the very bottom. Nothing happens! What am I doing wrong? And I appreciate you taking the time to explain things to me so far.

  19. cbaz
    Member
    Posted 1 year ago #

    And it's the 2013 child theme I'm working in. . . (not sure if that makes a difference)

Topic Closed

This topic has been closed to new replies.

About this Topic