[Support request] Create a separator line before or after every h1/h2/h3/ heading?

Home Forums Support [Support request] Create a separator line before or after every h1/h2/h3/ heading?

Home Forums Support Create a separator line before or after every h1/h2/h3/ heading?

  • This topic has 3 replies, 3 voices, and was last updated 4 weeks ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2231644
    priyankeshu

    https://www.thinkovert.com/featured/start-here/
    is there a way where automatically insert a line/separator after every h1/h2/h3 heading?

    Also,
    I am using table of content plugin but it does nt have ordered list option.
    any suggestions how to get that?

    Best

    #2231650
    Fernando
    Customer Support

    Hi Priyankeshu,

    You can try adding a CSS like this in Appearance > Customize > Additional CSS:

    h1,h2, h2 {
        border-bottom: solid 1px var(--contrast-2);
        padding-bottom: 8px;
    }

    This will add a bottom border under all h1, h2 and h3 Blocks in your site.

    If you want to add it solely to the specific you linked, use this instead:

    .postid-26249 h1,.postid-26249 h2, .postid-26249 h2 {
        border-bottom: solid 1px var(--contrast-2);
        padding-bottom: 8px;
    }

    Hope this helps! 🙂

    #2236481
    priyankeshu

    Hey thanks a tonne! GP support is just awesome

    one more query…
    can I only show this on certain pages? for example only on posts and not on pages? or specific category?

    #2236778
    David
    Staff
    Customer Support

    Hi there,

    for a specific Post you use this CSS that Fernando provided:

    .postid-26249 h1,.postid-26249 h2, .postid-26249 h2 {
        border-bottom: solid 1px var(--contrast-2);
        padding-bottom: 8px;
    }

    For all Single Posts you can do:

    .single-post h1,.single-post  h2,.single-post h2 {
        border-bottom: solid 1px var(--contrast-2);
        padding-bottom: 8px;
    }

    For all Pages you can do:

    .page h1,.page h2,.page h2 {
        border-bottom: solid 1px var(--contrast-2);
        padding-bottom: 8px;
    }

    OR if you want to specify many locations you can do the following:

    1. Create a new Hook Element in Appearance > Elements.
    2. In the text area add:

    
    <style>
    body h1,body h2,body h2 {
        border-bottom: solid 1px var(--contrast-2);
        padding-bottom: 8px;
    }
    </style>
    

    3. Set the Hook to wp_head
    4. Set the Priority to 100
    5. Set you Display Rules to the page, post etc. where you want it applied.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.