- This topic has 11 replies, 2 voices, and was last updated 11 months, 3 weeks ago by
David.
-
AuthorPosts
-
January 29, 2020 at 4:42 am #1148042
Krystian
Hello,
I’d like to add custom CSS class to a specific site title. I’ve use such code within block in gutenberg (because you can’t add such class under advanced options like in other blocks):
<div class="custom-class">SITE TITLE</div>
But I’m not sure whether I should use div, article, span or other? What would be the best choice
(granted that it matters)?January 29, 2020 at 8:04 am #1148332David
StaffCustomer SupportHi there,
is it the Post Title you want to style ? And just for that single post ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 29, 2020 at 9:10 am #1148412Krystian
Yes, correct.
But the styling will be done only on mobile. That’s why I opted for CSS class.January 29, 2020 at 9:18 am #1148423David
StaffCustomer SupportSo each post is given a unique
ID
which can be seen in the URL of the post editor.
Use this CSS to style the entry title:@media (max-width: 768px) { .postid-XXX h1.entry-title { /* styles here */ } }
Just switch the
XXX
for theID
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 29, 2020 at 12:39 pm #1148608Krystian
Thanks! That works perfectly!
So to clarify, it’s not a good practice to put html in gutenberg site title block?
IMAGEJanuary 30, 2020 at 1:21 am #1148983David
StaffCustomer SupportYou’re welcome.
Correct – not good practice to add HTML to the Title block.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 30, 2020 at 3:39 am #1149099Krystian
Thanks!
Last thing.
What about adding html styling in page hero header element<h1 itemprop="headline"> <span style="font-family: 'Playfair Display', serif; font-weight: 500; font-size: 180%; line-height: 130%">LOREM IPSUM</span> <br><br> <span style="font-size: 80%; line-height: 100%">Lorem ipsum ipsum ipsum</span> </h1>
Is it also considered to be bad practice? Is it better to assign different classes to each verse and style it via CSS?
January 30, 2020 at 5:14 am #1149180David
StaffCustomer SupportBest to use classes where you can π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 30, 2020 at 6:35 am #1149228Krystian
Thanks,
About that firs CSS. I said it works, because I saw how it should work elsewhere, in some tutorial.
But I’ve tried it and can’t make it work. I’ve tried with
.postid-xx
.page-id-xx
and many other combinations. Page / post ID is fine, I’ve checked in wordpress editor and in chrome inspect tool..postid-2656 body { background-color: #FFFFFF !important; }
Code works without .postid part.
January 30, 2020 at 6:46 am #1149238David
StaffCustomer Supportthe
.postid-2656
is a class assigned to thebody
element so you would do this:body.postid-2656
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 30, 2020 at 6:56 am #1149423Krystian
Thanks, you are great π
January 30, 2020 at 7:04 am #1149432David
StaffCustomer SupportHappy to be of help
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.