- This topic has 20 replies, 4 voices, and was last updated 1 year, 6 months ago by
David.
-
AuthorPosts
-
December 12, 2020 at 11:49 am #1577792
Romain
December 12, 2020 at 1:06 pm #1577865Leo
StaffCustomer SupportHi Roma,
Any chance you can link us to an example site?
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 12, 2020 at 1:39 pm #1577896Romain
December 12, 2020 at 5:40 pm #1578023Leo
StaffCustomer SupportAre you talking about doing that using GP’s headline block?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 13, 2020 at 2:19 am #1578275Romain
If it’s possible. Is there another solution ?
December 13, 2020 at 5:59 am #1578429David
StaffCustomer SupportCan you provide a link to your actual Site ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 13, 2020 at 6:12 am #1578442Romain
Yes.
December 13, 2020 at 7:34 am #1578690Romain
You see it in private ?
December 13, 2020 at 11:13 am #1578903Tom
Lead 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentDecember 14, 2020 at 1:40 am #1579501Romain
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
December 14, 2020 at 8:59 am #1580278David
StaffCustomer 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 numberDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 14, 2020 at 9:03 am #1580284Romain
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
December 14, 2020 at 9:11 am #1580294David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 14, 2020 at 9:30 am #1580326Romain
Thanks 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 #1580333David
StaffCustomer SupportWith my CSS added it should apply to all of your Posts ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.