- This topic has 20 replies, 4 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
December 12, 2020 at 11:49 am #1577792RomainDecember 12, 2020 at 1:06 pm #1577865LeoStaffCustomer Support
Hi Roma,
Any chance you can link us to an example site?
Let me know ๐
December 12, 2020 at 1:39 pm #1577896RomainDecember 12, 2020 at 5:40 pm #1578023LeoStaffCustomer SupportAre you talking about doing that using GP’s headline block?
December 13, 2020 at 2:19 am #1578275RomainIf it’s possible. Is there another solution ?
December 13, 2020 at 5:59 am #1578429DavidStaffCustomer SupportCan you provide a link to your actual Site ?
December 13, 2020 at 6:12 am #1578442RomainYes.
December 13, 2020 at 7:34 am #1578690RomainYou see it in private ?
December 13, 2020 at 11:13 am #1578903TomLead DeveloperLead DeveloperHi 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
December 14, 2020 at 1:40 am #1579501RomainHello,
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
December 14, 2020 at 8:59 am #1580278DavidStaffCustomer SupportTry 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) – addno-number
– the heading will have no numberDecember 14, 2020 at 9:03 am #1580284RomainI 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
December 14, 2020 at 9:11 am #1580294DavidStaffCustomer SupportRemove the CSS that Tom provided you with before.
And remove theis-style-cnvs-heading-numbered
class from your headings.
Then add just the CSS i provided.December 14, 2020 at 9:30 am #1580326RomainThanks David,
It’s good. But I have more than 90 articles so I have a lot of work.
Thanks for the support.
December 14, 2020 at 9:33 am #1580333DavidStaffCustomer SupportWith my CSS added it should apply to all of your Posts ๐
-
AuthorPosts
- You must be logged in to reply to this topic.