New to the community? Start here

Need code to customize h1, h2 etc in child theme

Hi, I hate the way the H tags render text in my copy of bp-corporate: they show up as TINY and not header-like at all.

(http://storyaday.org)

I’ve been combing the forums (& web) trying to find the answer to this, but can anyone give me a step-by-step account of what I need to do to my child theme to make the h1, h2, h3 tags display differently (larger, more bold, tweak the fonts)?

I’m assuming there’s something I can put in the style.css file, or is there more to it than that?

Thanks,

Julie

Tue, 15 May 2012 17:49:06
  • Kimberly
    • Champion of Loops

    Julie,

    Looking at your css file (base.css) I see that your font size is in em measurements. This means that your text is showing relative to the rest of your theme. i.e. if your basic font is 12px then it is showing 1.75 times that, nearly 24 px.

    You can see where this is controlled by using a handy tool like firebug. This is what I found using it on your Write Everyday, not "Some Day" heading.

    It is being controlled in the base.css file and is somewhere near line 920.

    Does this make sense? It's a great way to change the display without adding new code :slight_smile:

    Best,

    Kimberly

    If the above action did not result in the resolution or common end to this ticket then please feel free to come back here for comment. Just be sure you mark "Not Resolved" to re-open or we might miss it! :slight_smile: Thanks!

    [attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

  • storyaday
    • Design Lord, Child of Thor

    Hi, I appreciate your help.

    If you're saying that my "Write Every Day, Not Some Day" is what the h1 should look like, then I don't understand why an h1 tag looks so teeny in a post ( see attached: it's the line that says "What is a Writing Sprint":wink:.

    My other problem is that I don't know how to change this.

    Is there a tutorial somewhere that will tell me how to change the font size for h tags in posts in the bp-corporate theme? Is there a manual?

    I have a child theme set up and don't want to mess with the original code.

    Thanks again,

    Julie

    [attachments are only viewable by logged-in members]

  • webcrafter
    • WPMU DEV Initiate

    Hi there StoryaDay,

    Looking at your code it seems as the line “Write Every Day”Not Some Day”! is not an H1 tag but is simply within a <p></p> (paragraph). as it shows below…

    <div id=”call-action”>

    <p> Write Every Day, Not “Some Day”!</p>

    <div class=”bpc-button”>

    </div>

    So we should take a look at what the font-size for text is for paragraphs inside the call-action id and it is

    #call-action p {

    float: left;

    font-size: 1.75em;

    margin: 0;

    padding: 0;

    width: 70%;

    }

    1.75em which takes the browser default and makes the text size 1 and 3 quarters that default size. So if your default browser size is 12px (the norm) it will be 21px in size, if it is 10px then it will be 17.5px in size. If you would like for it to be the same size as the h1 tag then instead of surrounding it with the <p></p> tags then replace them in this line with <h1></h1> as shown below…

    <p> Write Every Day, Not “Some Day”!</p> should be made to read

    <h1> Write Every Day, Not “Some Day”!</h1>

    in the .html portion

    This would result in the text being the size you are probably expecting, the other way to get the text bigger is to replace the

    font-size: 1.75em; statement in the http://storyaday.org/wp-content/themes/bp-corporate-1/_inc/css/base.css?ver=1.4.4 file to a larger em such as 1.9em or 2.0em and see if that is closer to the size you are expecting, be careful as you are changing all the text that is inside of <p></p> tag within that particular id in this case the #call-action section.

    Hope this helps,

    Brad

  • webcrafter
    • WPMU DEV Initiate

    Sorry didn’t see the part about the not wanting to change to original code check out here about creating a child theme area and what it is that is required in the directory and what to expect behavior wise

    http://codex.wordpress.org/Child_Themes

    Pretty much making a file with the same name as what is in the original theme, making your changes will cause it to override the original file, if you do not have a file let us say page.php in the child directory then it defaults back to using the original file in the theme directory. So in short, in order to make a change then copy the file from the main them directory you need the changes to reside in and place it in the theme’s child directory to get it to override the original…

    Hope I am correct on this and that it helps..

    Brad

  • storyaday
    • Design Lord, Child of Thor

    Thanks Brad, that’s really helpful, about copying ‘base.css’ over. Never knew that was one I should be looking in. [Again: some kind of manual… :wink: ]

    But it’s not the line in the header that I want to change.

    In my blog posts, the h tags, the headers, the titles, whatever you want to call them, are ugly. I want to change them. I want to make them bigger. I do not know how to do this. I know little about coding. (except 90s HTML. I loved 90s HTML)

    I tried changing this:

    .post-content h3 {
    
margin: 10px 0px 5px!important;
    
padding: 0px;
    
font-size: 1.6em;
    
}

    to change the h3 tag in my blog posts. But there was no .post-content h1 at all, and nothing changed.

    What I want to do: Make the h tags prettier (bigger, maybe change the font) in my blog entries.

    What I know how to do: follow instructions.

    What I do not know: how the file structure of BP and bp-corporate work. Or much about CSS.

  • storyaday
    • Design Lord, Child of Thor

    Actually, come to think of it, blockquotes and lists have no formatting in this theme either. Very little that shows up in the Rich Text editor ends up in the theme.

    Is this theme beyond me? Is it broken? Should I be shopping for something with more theme options?

  • webcrafter
    • WPMU DEV Initiate

    Let me see if I can get this right without getting myself or others lost :slight_smile:

    In the file bp-default.css located for me when I downloaded the them in /bp-corporate/_inc/css is the css file that holds the reset code for the h1 2 3 4 and other tags. It is setting them all to 100% which is the client’s default browser setting and could be 12px or 16px or anything else if they went in and set it themselves. If you want to be sure what you are working with then set this to an actual size like 12, 14, or 16px so you know exactly what you are working with regardless of user pre-sets.

    There are a couple of different ways to handle this, the body{ } tag is typically where the defaults are set such as font-size and font-type. This is not the only place that these can be set though. Simply a place to set a good base that we know is the default for everything that we do not specifically change. If you are wanting to change the behavior for every h1, h2 etc tag that is used throughout your site this is where you set it. Whatever font-size, type, or color you put in here will be the default and only be different when another class or ID overrides this setting….

    In the particular case of

    <div id=”call-action”>

    <p> Write Every Day, Not “Some Day”!</p>

    <div class=”bpc-button”>

    </div>

    If we wanted every h1 tag inside of the id “call-action” to be font-type times new roman, font-size 18px, and color blue then we would add…

    #call-action p { <—-this is what is already there, I want to add a behavior specific to h1 tags so see below….

    float: left;

    font-size: 1.75em;

    margin: 0;

    padding: 0;

    width: 70%;

    }

    #call-action h1 {

    font-family:Georgia, “Times New Roman”, Times, serif;

    font-size:18px;

    color:#03C;

    }

    So the above is saying that any text that is within the tags

    <div id=”call-action”>

    <h1>Affected Text</h1>

    </div>

    The behavior will be the same for the call-action as in the main css place, since the affected text is within the h1 tags that are inside that call-action id it will also have the behaviors marked for that h1 section we added.

    Am I saying this all okay? As KimberlyL mentioned using a plugin like firebug really simplifies our process of finding out how to change a specific area of text on our web page because we can load the page in the browser, right click on top of the area we are wanting to know about and it will show us the html/php code of that are so we can see the tags and it will tell us the css attached to those tags and even refer to any other css entries that may be overriding what we think it should be doing…

  • storyaday
    • Design Lord, Child of Thor

    Thanks. So I should alter the “bp-default.css” file? Does this mean all my changes will get overridden when BuddyPress upgrades?

    I appreciate your help. I do want to change the tags throughout the site (and not the part in the ‘call action’ area – though reading through that helps me see how it all works).

    Thanks for the tip on Firebug too. I didn’t realize I could edit things right in there. I think that’s going to make all the difference!

    Thanks again,

    Julie

  • webcrafter
    • WPMU DEV Initiate

    inside the /bp-corporate/themes/bp-corporate-child/_inc/css/

    There is a file called child-style-sample.css

    The readme area has instruction for making css code that overrides the default without getting overwritten during theme upgrades….

    /* begin child theme css style here */

    /*

    rename this to child-style.css

    any custom css can be input here to prevent any css edit missing when version updates to themes

    to effective overide some css used #custom first id hack

    sample:

    #custom .myclass {} or used !important for better css hack overide

    sample

    #custom .myclass {

    color: #fff !important;

    size: 14px !important;

    }

    try not to touch the css from other stylesheet for better and easy updates.

    */

    /* 54859-1337114987 */

    Hope this helps, if you need more help let me know,, basically it is just saying to rename the sample file and put your needed changes in this file using the #custom and or !important to let it be known “Hey Look At and Use Me!” :slight_smile: without having to change the original files and worrying about losing changes during upgrades or changes…

  • storyaday
    • Design Lord, Child of Thor

    Ok Thanks. I thought I was doing that, but it wasn’t changing anything. Now that I’ve got a better handle on Firebug (thanks for that), I might be able to make this work.

    I really appreciate your help.

    Have a great night!

    Julie

  • storyaday
    • Design Lord, Child of Thor

    OK, one last time (sorry).

    If I paste this

    #content h3 {
    
font-size: 1.5em;
    

    
}

    into …bp-corporate-child/_inc/css/child-style.css it should override the style and let me have a 1.5em h3 tag?

    Cos it doesn’t :slight_frown:

    Am I way off?

  • webcrafter
    • WPMU DEV Initiate

    At this point in the process I would go to the original CSS file and make the change there for the original settings of the h3 for the site wide and see if that change took effect, if it does then we know we have to look for why it is not migrating over through the child system, if it doesn’t then we need to find out what is overriding it.

  • storyaday
    • Design Lord, Child of Thor

    Thanks for following up.

    It looks like I had to copy over the base.css again from the parent theme, put it in bp-corporate-child/_inc/css/ and make all changes to that.

    I have to ignore the instructions to create a child-style.css or style.css file and just work on base.css in the child/_inc folder.

    It’s pretty simple, as it turns out, but it shouldn’t have taken me a week to find out how to make my h3 tags bigger! I think an accurate FAQ for common tweaks to each theme would be an awesome addition to the WPMUDev universe.

    Still can’t figure out how to make it display bullets in the posts though, and I can’t get my block quotes styled properly. Sigh. I think the Buddypress styles are overriding it. I’m not sure how to change things in my Corporate theme without screwing up the Buddypress styles. But I’ll keep plugging away.