🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Adding CSS class to a specific site title

Home Forums Support Adding CSS class to a specific site title

  • This topic has 11 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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)?

    #1148332
    David
    Staff
    Customer Support

    Hi there,

    is it the Post Title you want to style ? And just for that single post ?

    #1148412
    Krystian

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

    #1148423
    David
    Staff
    Customer Support

    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

    #1148608
    Krystian

    Thanks! That works perfectly!

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

    #1148983
    David
    Staff
    Customer Support

    You’re welcome.
    Correct – not good practice to add HTML to the Title block.

    #1149099
    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?

    #1149180
    David
    Staff
    Customer Support

    Best to use classes where you can 🙂

    #1149228
    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.

    #1149238
    David
    Staff
    Customer Support

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

    body.postid-2656

    #1149423
    Krystian

    Thanks, you are great 🙂

    #1149432
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.