Adding CSS class to a specific site title

[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)?

[David]

Hi 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/

[Krystian]

Yes, correct.
But the styling will be done only on mobile. That’s why I opted for CSS class.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Krystian]

Thanks! That works perfectly!

So to clarify, it’s not a good practice to put html in gutenberg site title block?
IMAGE

[David]

You’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/

[Krystian]

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?

[David]

Best to use classes where you can 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Krystian]

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.

[David]

the .postid-2656 is a class assigned to the body element so you would do this:

body.postid-2656

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Krystian]

Thanks, you are great 🙂

[David]

Happy to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts