[Resolved] How to edit single blog post template in Bold library

[Richard]

Hi,
I am trying to edit the hero section of the single blog post on your Bold site library. I know this is done outside of Elementor and is largely controlled by custom CSS.

My issue is that if the title of the post is anything more than 3 words it overflows and you end up with what appears to be a double line break and looks completely wrong.

I need to be able to have much longer titles because of the technical nature of my posts but can’t quite see where the font size is controlled in the hero nor how to change any of the attributes on the surrounding blue box.

You can see an example here https://hellequinsystems.co.uk/connecting-devices-to-the-cloud/
this just shows the header and the issue I’m having

Thanks

[David]

Hi there,

in Customizer > Typography > Headings – try reducing the Line Height of the H1

[Richard]

Thank you, that worked.

Regarding the second part, how do I change the attributes of the single post text box at the top that this title is displayed in?

[David]

In Appearance > Elements – look for the Single Post Hook – it uses custom HTML and some PHP to pull in the title / meta and featured image.
It is then styled using CSS in Customizer > Additional CSS.

What specifically do you want to change?

[Richard]

Thanks David, it is more for reference at this point to have the info at hand as I’m working on that aspect now.

Going back to my first question, changing the font size of header H1 is fine to a point but what if I want it to deliberately spill over to the next line – at the moment if this happens this is an inordinate line break size. Is it possible to have it flow onto the next line without a line break?

[Richard]

Further to my last reply, bringing H1 down sufficiently for display of a post on a mobile device so that a line break is not introduced makes my home page header too small, so getting around the line break would be a much better solution for me if possible…

[David]

You can use this CSS to specifically target size and lineheight for the custom hero H1:

/* Desktop */
.custom-hero h1 {
    font-size: 40px;
    line-height: 1.5;
}
/* Mobile */
@media (max-width: 768px) {
    .custom-hero h1 {
        font-size: 24px;
        line-height: 1.5;
    }
}

The spacing that is appearing is related to the Line Height – not a line break.

[Richard]

Hi David,

Thanks that worked, I think I am pretty much there now. Just one thing is there an easy way of adding a text box(es) to the Blog page hero section?

[David]

Would require either adding some HTML/CSS or the header element supports shortcodes if its being generated by a plugin.

Do you have an example ?

[Richard]

and where can I change the Blog page hero “Blog” text, it doesn’t seem to be tied in with the blog page title.

[Richard]

Ok, thanks I’ll have a think about what I actually want 🙂

Is it straight forward to change the “Blog” text on the hero?

[David]

The Blog isn’t a normal page so the_title doesn’t exist.
Edit ( or create ) the header element specifically for the blog and change the title in the content.

[Richard]

Hi David, I’ve managed to get it sorted now, thanks very much for your help

[David]

You’re welcome

[Author]

Posts