[Resolved] Numbered headline

Home Forums Support [Resolved] Numbered headline

Home Forums Support Numbered headline

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1577792
    Romain

    Hello,

    I want to know if it’s possible to do something like that for the headlines ?

    Thanks for your help.

    Romain

    #1577865
    Leo
    Staff
    Customer Support

    Hi Roma,

    Any chance you can link us to an example site?

    Let me know ๐Ÿ™‚

    #1577896
    Romain

    Oh sorry,

    My link have not works in my first post

    https://ibb.co/8NSHdcm

    thanks

    #1578023
    Leo
    Staff
    Customer Support

    Are you talking about doing that using GP’s headline block?

    #1578275
    Romain

    If it’s possible. Is there another solution ?

    #1578429
    David
    Staff
    Customer Support

    Can you provide a link to your actual Site ?

    #1578442
    Romain

    Yes.

    #1578690
    Romain

    You see it in private ?

    #1578903
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is that your site, or the site with the feature you want to replicate?

    This is the code it’s using for headings:

    h2.is-style-cnvs-heading-numbered:before {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 2.5rem;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 2.5rem;
        flex: 0 0 2.5rem;
        border-radius: var(--cnvs-heading-numbered-border-radius);
        background: var(--cnvs-heading-numbered-background);
        color: var(--cnvs-heading-numbered-color);
        counter-increment: h2;
        content: counter(h2);
    }

    So if you give your h2 element the following class, it should work: is-style-cnvs-heading-numbered

    #1579501
    Romain

    Hello,

    It’s my site. I want to replicate on generatepress. It’s not online actually.

    I have to use this code in every headings ?

    thanks

    #1580278
    David
    Staff
    Customer Support

    Try adding this CSS to your site:

    .single-post .entry-content {
        counter-reset: h2counter;
    }
    
    .single-post .entry-content h2 {
        display: flex;
        align-items: flex-start;
    }
    
    .single-post .entry-content h2:not(.no-number):before {
        content: counter(h2counter);
        counter-increment: h2counter;
        counter-reset: h3counter;
        display: flex;
        flex: 0 0 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        margin-right: 0.75em;
        border-radius: 40px;
        font-size: 20px;
        font-weight: 700;
        background-color: #f00;
        color: #fff;
    }

    It will automatically add numbers to all H2 headings in your Post content.
    If you want to remove the number from a specific heading then select the Heading block > Advanced –> Additional CSS Class(es) – add no-number – the heading will have no number

    #1580284
    Romain

    I have miss your post David. Sorry

    I have try the code but every headlines are with the number “1”. For example, I have 6 headlines and the six H2 headlines are “1”, but not 1, 2, 3 , 4 , 5 , 6.

    Is there a code I can do calculate ?

    thanks a lot

    #1580294
    David
    Staff
    Customer Support

    Remove the CSS that Tom provided you with before.
    And remove the is-style-cnvs-heading-numbered class from your headings.
    Then add just the CSS i provided.

    #1580326
    Romain

    Thanks David,

    It’s good. But I have more than 90 articles so I have a lot of work.

    Thanks for the support.

    #1580333
    David
    Staff
    Customer Support

    With my CSS added it should apply to all of your Posts ๐Ÿ™‚

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