[Resolved] CSS Help?

[brandonhull]

Hi Tom,

I’d like to edit my H4 CSS to look something similar to screenshot at the link below, but unsure how I’d accomplish this in CSS. Are you able to offer any insight for me?

https://www.screencast.com/t/zeu7ioER164

I want to avoid using actual Toggles/Accordions for SEO purposes, so the result wouldn’t need to be exactly like that screenshot, but I do like to break up the monotony of text with slightly different headings periodically. Hence, the navy background and the + sign. I don’t, therefore, need it to actually toggle to open or close.

Any thoughts on this? I realize this isn’t a support issue, so if you can’t provide specifics I totally understand!

Thanks,

Brandon

[Leo]

Hi Brandon,

We should be able to help you with that. Can you link to the page where the screenshot was taken?

If so I can give you the exact style they are using 🙂

[brandonhull]

Wow Leo thanks for the speedy reply. It’s actually a screenshot from my own post and it was using an Accordion plugin shortcode that I’m going to eliminate, but that post is still in the works, so it’s in draft mode.

I can tell you this, if it helps:

The font is Raleway, and it can be either 18 or 20 point type. And the navy color is #0C2451. Does that help at all? This is the CSS the accordion produced:

.smk_accordion .accordion_in .acc_head.theme3 {
background: #0c2451 !important;
border-bottom: 0px solid #212d3a;
color: #ffffff;
cursor: pointer;
display: block;
text-align: left;
font-size: 18px !important;
padding: 10px;
position: relative;

[Leo]

To make the title block like that, you could add something like this in the content:

<div style="background-color: #0C2451;">
    <h4>Title Here</h4>
</div>

With this CSS to change the h4 style:

h4 {
    font-family: "Raleway", sans-serif;
    color: #ffffff;
}

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

This should get you closer. Let me know.

[brandonhull]

With only a couple very minor tweaks to what you provided, I got it pretty much right where I want it. Leo, thanks so much.

Resolved!

[Leo]

You’re very welcome 🙂

[Author]

Posts