WordPress.org

Support

Support » Themes and Templates » Reducing post title font size in child theme

Reducing post title font size in child theme

  • 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!

Viewing 15 replies - 1 through 15 (of 18 total)
  • esmi

    @esmi

    Forum Moderator

    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.

    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

    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. . .)

    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.

    Ok, thank you! I’ll try that.

    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?

    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???

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

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

    sorry, can’t seem to remember how to paste a pastebin link–argh!

    Moderator stephencottontail

    @stephencottontail

    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”.

    @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.

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

    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.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Reducing post title font size in child theme’ is closed to new replies.
Skip to toolbar