Unwanted side effects of the recent update to graphene v2

  • flying_roger

    #48935

    Hello,

    I appreciated Graphene so far, but I unfortunately accepted the recent update to graphene v2 without noticing that this was a major update.

    The update has spoiled the layout: all heading styles (h1, h2, h3, h4) use now very big fonts while other fonts remain small so the style is no longer consistent. I am willing to continue getting new versions of Graphene, but not if it implies manual rework of all the pages of my site (rycw.be).

    Another side effect of the update is that the second line of the menu (based on categories) is now showing “help text” under the categories, thereby creating long gaps between the menu elements.
    How can I get rid of that line? I tried to suppress the description from the “Category” definitions, but this did not work: the old text is still displayed in the 2nd line menu.

    Is there any way to fix theses issues without rolling back to 1.9.xxxx?

    Admin

    Syahir Hakim

    #48936

    Another side effect of the update is that the second line of the menu (based on categories) is now showing “help text” under the categories, thereby creating long gaps between the menu elements.
    How can I get rid of that line? I tried to suppress the description from the “Category” definitions, but this did not work: the old text is still displayed in the 2nd line menu.

    You can remove the description for the menu item in WP Admin > Appearance > Menus. If you don’t see the description field for each menu item there, click on the “Screen options” tab at the top right of the screen and tick the checkbox for description.

    flying_roger

    #48939

    Thank you for your help. I was able to delete the description there for the two affected items.
    Strange that other items were not affected, but they had much longer descriptions.
    Maybe this happens only when the description is short.

    Any hint to recover the title fonts sizes?
    I understand that v2 aims at being more adaptive for different devices and screen sizes and this is a good idea, but resizing should better be consistent (text, titles,…).
    Is there a parameter to adjust this?

    Admin

    Syahir Hakim

    #48940

    Strange that other items were not affected, but they had much longer descriptions.
    Maybe this happens only when the description is short.

    Yes, the theme considers the length of the description before displaying it in the menu.

    As for the headings, the sizing and bold styling were design decisions for emphasis. This is a common practice, both in print and on web. You will rarely find the heading has the same size as normal text, anywhere.

    The sizing of h1 to h6 were also determined so that h6 is smaller than h5, which is smaller than h4, etc, with h6 still being at least similar size with normal text. If this is detrimental to your content appearance, you’re probably using the headings in context that they are not meant to be used for. As an example, in your front page even the list is using h3 whereas they should just use normal text, with bold if you need emphasis.

    Some other good practices guidelines include:

    • Only one h1 per page. This is normally reserved for the most important heading on the page, which is typically the site title on home page, and the page/post title on other posts and pages.
    • h1 to h6 is in decreasing importance. For example, h1 for the post title, h2 for sections in the content, h3 for category in the section, etc.

    The above is not merely theoretical – search engines take this into account when scoring and ranking your pages.

    Given all that, if you would still like to adjust the sizing of the headings, you can use this code in Additional CSS:

    h1,
    .h1 {
      font-size: 36px;
    }
    h2,
    .h2 {
      font-size: 30px;
    }
    h3,
    .h3 {
      font-size: 24px;
    }
    h4,
    .h4 {
      font-size: 18px;
    }
    h5,
    .h5 {
      font-size: 14px;
    }
    h6,
    .h6 {
      font-size: 12px;
    }
    

    flying_roger

    #48942

    Thank you for your valuable advices and support.
    .
    I indeed used hx levels as a “device independent” way to get a set of different font sizes.

    The css solution is probably the fastest way to restore the previous layout, but I prefer to avoid customizing the theme.
    I will rather just try to demote the hx levels on a couple of pages and if this is successful, I will adapt the site in that way. There are not so many permanent pages and I do not need to bother for archived pages.

    Admin

    Syahir Hakim

    #48943

    Actually, you won’t need to customize the theme to implement the above code. Just copy and paste to WP Admin > Appearance > Customizer > Additional CSS.

    But yes, actually changing the headings to normal text is the better solution.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.