Editing CSS for h1, h2, h3, h4, h5, h6 tags not working

  • Anonymous

    #5456

    Hi,

    We originally built our company site using the Graphene theme and are a big fan of the theme. We almost don’t even want to design our own theme because we like it so much. We installed the latest Graphene update but are having major issues with changing the CSS on header tags. We want to make all header have “font-weight: bold;” and entered this into the custom CSS field under Graphene options. This did not work so we attempted to enter this into the styles.css in the editor.

    My guess is that there is somewhere where the font-weight is set to “normal” for these items but we can’t seem to find out where this is.

    Any help would be greatly appreciated. Website is ‘Here

    Peter

    #32018

    We have the same issue, we are already thinking of reverting to the previous Graphene version.

    The older content looks just weird when wrong header formats are applied. http://snbchf.com

    The latest attempt was entering in the Graphene CSS options:

    h1 {font-weight: bold;}
    h2 {font-weight: bold;}
    h3 {font-weight: bold;}
    h4 {font-weight: bold;}
    h5 {font-weight: bold;}
    h6 {font-weight: bold;}

    Peter

    #32021

    seems that you “edit quote” does not work in the forum. Posts get duplicated

    Mod

    Kenneth John Odle

    #32022

    Use Firebug to isolate the exact elements you are trying to style.

    This should work:

    #header .header_title, #header .header_desc {font-weight: bold;}

    Quote:
    seems that you “edit quote” does work in the forum. Posts get duplicated

    Well, it works for me, as you can see. But I have a different set of controls than you do. Is there an actual “edit quote” option for you? If there’s an issue, we’ll try to get it fixed.

    Prasanna SP

    #32023

    If you want to just set font-weight: bold for header title and description, you can actually do it with Graphene Options itself. Graphene Options –> Display –> Text Style Options –> Header Text –> Title text weight and put bold. Same for Description text weight

    Quote:
    Is there an actual “edit quote” option for you?

    Actually EDIT and QUOTE are different options. Members can edit their post within a few minutes of posting. QUOTE options works differently. If you select some text of a post and click on QUOTE, it will be quoted in the reply area.

    Peter

    #32024

    Thank you Prasanna, but this is what I tried first but it did not work. I will try it again now. Does this “header” apply to all h1 to h6 ?

    Prasanna SP

    #32025
    Quote:
    Does this “header” apply to all h1 to h6 ?

    No, it applies for Site title and Description on header image only

    Prasanna SP

    #32026

    Try adding this to Custom CSS or in child theme style sheet.

    h1, h2, h3, h4, h5, h6 {
    font-weight: bold !important;
    }

    Peter

    #32027

    No chance.

    The whole following text is h5. “Step1-6” are not set to bold manually, but the first sentence is set manually bold.

    If you look in the editor all of these sentences appear bold with the exactly same font like they should do.

    h5-test.png

    Take a look now on http://snbchf.com/eurocrisis/the-german-stance-on-the-euro-crisis/

    Do you see the different fonts ?

    My child style.css

    Quote:
    /*

    Theme Name: Graphene Child

    Theme URI: http://example.com/

    Description: Child theme for the Graphene theme

    Author: Your name here

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

    Template: graphene

    Version: 1.0

    */

    @import url(“http://snbchf.com/wp-content/themes/graphene/style.css”);

    /* Your modification goes here */

    h1, h2, h3, h4, h5, h6 {

    font-weight: bold !important;

    }

    }

    Peter

    #32028
    Quote:
    seems that you “edit quote” does work in the forum. Posts get duplicated

    I have just realized that when I am too quick (under 2 minutes) in editing a post, the system displays a reply instead of editing it.

    Peter

    #32029
    Quote:
    No chance.

    The whole following text is h5. “Step1-6” are not set to bold manually, but the first sentence is set manually bold.

    If you look in the editor all of these sentences appear bold with the exactly same font like they should do.

    Take a look now on http://snbchf.com/eurocrisis/the-german-stance-on-the-euro-crisis/

    Do you see the different fonts ?

    My child style.css

    /*

    Theme Name: Graphene Child

    Theme URI: http://example.com/

    Description: Child theme for the Graphene theme

    Author: Your name here

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

    Template: graphene

    Version: 1.0

    */

    @import url(“http://snbchf.com/wp-content/themes/graphene/style.css”);

    /* Your modification goes here */

    h1, h2, h3, h4, h5, h6 {

    font-weight: bold !important;

    }

    }

    Peter

    #32030

    Again a reply sent after I pressed “edit quote”…

    As for the main issue I got the following insight.

    Take a look on this page:

    http://snbchf.com/eurocrisis/the-german-stance-on-the-euro-crisis/

    I use a heading3, not set to bold manually. In the editor it is shown bold.

    When I open this page (nothing in the cache, I opened them for the first time), in two different browsers and put the two browsers close to each other: One with Firefox Windows emulator on Mac (left side) and with Firefox on Mac (right side).

    The same page and the heading font are displayed differently ! See the difference

    Firefox-Mac-vs.-Windows.png

    The issue seems to happen only on Mac.

    With Opera and MS explorer on Windows the heading is shown correctly bold (according to the child CSS).

    I have checked also on a Windows computer. The headings which should be set bold by the child CSS are correctly set to bold.

    Peter

    #32031

    I opened another page to show the difference.

    Left is Mac (Firefox), Right is Windows (Firefox), the heading font is not set manually in the editor, but should be taken from the CSS

    Mac-vs.-Windows-No-Manual-bold.png

    –> Mac does not show bold, Windows shows bold

    Second example: set manually to bold in the wordpress editor.

    left is Mac (Firefox), Right is Windows (Firefox)

    Mac-vs.-Windows-Manual-Bold.png

    –> Both Mac and Windows show bold

    Prasanna SP

    #32032

    There is an extra closing bracket } in your child theme style sheet. Remove it.

    h1, h2, h3, h4, h5, h6 {
    font-weight: bold !important;
    }
    }

    Remove the second }

    Prasanna SP

    #32033

    All H1 to H6 tags are in bold on your site.

    Example,

    The current post title looks like this,

    Nbu4z.png

    With font-weight: normal it would’ve been like this,

    RIa3D.png

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.