Archived topic
Adding CSS class to a specific site title
11 replies · Started by Krystian on January 29, 2020
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)?
Hi there,
is it the Post Title you want to style ? And just for that single post ?
Yes, correct.
But the styling will be done only on mobile. That's why I opted for CSS class.
So 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 the ID
Thanks! That works perfectly!
So to clarify, it's not a good practice to put html in gutenberg site title block?
IMAGE
You're welcome.
Correct - not good practice to add HTML to the Title block.
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?
Best to use classes where you can :)
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.
the .postid-2656 is a class assigned to the body element so you would do this:
body.postid-2656
Thanks, you are great :)
Happy to be of help