Blogs MU: Size of right-panel header text is too large - it's also an h4...

How do I make the text header in the right-panel of the Blogs MU home page smaller and an h1?

  • 3SixtyEvolve
    • New Recruit

    Greetings Sam

    Thank you for being a member and for posting to the forum.

    First of all, I would suggest that you make use of a child theme, so that you don't have problem with updating the Blogs MU theme later.

    You can read more about using child themes here:

    What are Parent and Child Themes?

    Another great tutorial on using child themes:

    Creating your first WordPress child theme

    Once you've set up your child theme, you can place this code into the child-style.css:

    #custom .sidebar_list li h3 {
     margin: 0px 2% 15px 0px;
     padding: 0px 3% 0px 0px;
     float: left;
     width: 95%;
     list-style: none;
     font-size: 15px !important;
     color: #000000;
     text-transform: uppercase;
     border-bottom: 1px solid #ededed;
     }

    See if this helps.

    Have a good day!

    Gina

  • Tammie
    • WordPress Wizard

    Hi, just spoke to Gina and wanted to see about helping you on this. First up while she is 100% on track with the child theme and the fact you can change font size using:

    .sidebar_list li h3 {
     font-size: 15px !important;
     }

    *you don't need the #custom that's a bit of a legacy thing but does no harm and probably don't want to have a 15px maybe 14px - you shouldn't need the !important either but may if have to force something unfortunately.

    ... we are wandering. Do you want to have every h3 become a h1 or just change one. It's not usually advisable to have many h1's so we're checking before we show that template change you'd want to do.

    If you can let us know we can see about the next step for you thanks.

  • Sam
    • WPMU DEV Initiate

    Thanks much to both of you for your help.

    Unfortunately your suggestion didn't do anything... :disappointed:

    It's no worries, though - maybe I need to be clearer about what/where I'm talking about. I've attached a screenshot to help clarify.

    Also - I do have a child CSS set up already, so thanks for confirming I was doing that right.

    Appreciate your taking the time.

    Shaley

  • Patrick
    • Support Monkey

    Hi Sam,

    Oops... I think @Gina and @Tammie changed their coffee recipes :wink: That`s the heading in the right panel, not the sidebar. This should get you where you want to go:

    #right-panel h4 {
    font-size:20px;
    }

    Simply adjust the font-size to whatever best matches your h1 tags.

    Hope this helps! :slight_smile:

  • Sam
    • WPMU DEV Initiate

    Hi pcwriter,

    Hmmmm... yes, thanks for replying.

    So, as it turns out, I tried the code you suggested already - yesterday - that's what I had figured out myself - but it didn't work yesterday and I just tried what you provided (cut and paste even to make sure I'm not mistyping something) and it still didn't work.

    :disappointed:

    Any idea what could be up?

    At least you've figured out that I'm talking about the right-panel, h4 (as I stated in my original question) so we're talking about the same thing now... :slight_smile:

    Anyone else with an idea of what's up is also welcome to help.

    Thanks.

  • 3SixtyEvolve
    • New Recruit

    Hi Shaley

    As @pcwriter said, maybe we got our coffee beans mixed up there... :slight_smile: Apologies that we didn't get exactly what you meant.

    Thank you for the screenshot and for clarifying what exactly you need. I will have a look at the code again and let you know what else you can try.

    Revert back to you shortly.

    Have a good day!

    Gina

  • Sam
    • WPMU DEV Initiate

    Hi Gina and Sam,

    Thanks for your continued help.

    I pasted it in my child css. Should I try it in the other? If so - I believe you will have stumbled upon a teaching moment for me... can you tell me why it would matter to put it into the main css?

    Thanks,

    Shaley

  • 3SixtyEvolve
    • New Recruit

    Hi Shaley

    I am checking to see where you can make these changes. I had a similar request on another thread, although it was for the Social Theme, so I just want to make sure if these changes would be in the same place.

    I will revert back to you ASAP.

    BTW I think you are doing just fine :slight_smile: And we are all learning every day. Even @pcwriter asks questions from time to time (although answering him is quite difficult :stuck_out_tongue:)

    Have a good day and I will be in touch soon.

    Gina

  • 3SixtyEvolve
    • New Recruit

    Hi Shaley

    Just to clarify, the code should go into the child-theme.css file.

    Can you try adding !important behind the font size and see if that has any effect?

    Something like this, of course you can adjust the size for the font to suit your own needs.

    #right-panel h4 {
    font-size:20px !important;
    }

    Let me know if this helps...

    Gina

  • Sam
    • WPMU DEV Initiate

    There it is!

    OK! You solved it.

    I've never had to use !important before, so although I saw it earlier in our dialogue, it didn't even cross my mind to try it with the code for the right-panel h4.

    Thank you so, so much!

    Shaley

  • Patrick
    • Support Monkey

    @Gina @Shaley

    !important is very handy but, although it's valid css, it's considered kind of a hack. When possible, and it usually is, it's preferable to give more "weight" to the stylerule by increasing its specificity. In the above example, specificity could be increased by adding #panel so it becomes #panel #right-panel h4

    #panel #right-panel is more specific and any style rules added to that will override any identical ones that are in #right-panel

    For more on css specificity:
    Simple: http://www.htmldog.com/guides/cssadvanced/specificity/
    Complete: http://www.w3.org/TR/CSS21/cascade.html

    :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.