Change CSS on post headings

Hi there!

Thanks for reaching out.

The heading is appearing black because the color code is currently set to #000. If you'd like a different color, just replace it with another color code.

https://cleanshot.com/share/Wqbn1Gmq

For example, put the following code snippet in your custom CSS field:

.article-details-wrap h2 {
    color: #5B9279;
    margin-bottom: 22px;
}

You can find everything about adding custom code in the Helix3 framework here: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best regards

Hi Leo,

Thanks for your patience — I took your advice and went straight to your live page to dig in properly.

Good news: your CSS is 100% correct. I tested it directly on your page and .article-details-wrap h2 { color: #5B9279; } changes that heading ("Recent planning law changes…") from black to green immediately — and it doesn't even need !important, because nothing on the page is overriding it. So the rule itself isn't being "blocked."

The real issue: that CSS isn't actually reaching your live site. I checked the page's stylesheets and source — your rule isn't present anywhere, and there's no custom.css file loading on the template. In other words, wherever it was saved, it isn't being output to the page. That's why it works when you test it in Inspect (which injects it directly) but not otherwise.

Here's how to get it loading reliably (your template is Rhino, which uses the Helix3 framework):

1. Add it to the template's custom.css file. In Joomla admin: System → Templates → Templates (the Templates list, not Styles) → click shaper_rhino Details and Files → in the css folder choose Create New File, name it custom.css, paste the rule below, and Save. Helix3 loads custom.css automatically after the template CSS, so it will apply:

.article-details-wrap h2 {
    color: #5B9279;
    margin-bottom: 22px;
}

(Make sure the closing } is there — an unclosed rule gets discarded.)

2. Clear every cache. Your server runs LiteSpeed, so caching is the most likely reason a change "doesn't show up": go to System → Clear Cache and Purge Expired Cache; if you have a LiteSpeed Cache plugin, purge all; then hard-refresh with Ctrl/Cmd + Shift + R. If you have CSS Combine/Minify enabled, turn it off while testing.

3. Confirm you're editing the active template. If these articles are assigned to a different template style, the CSS has to live in that one. You can check under System → Templates → Site Template Styles.

After that, right-click the heading → Inspect: your rule should now appear in the Styles panel (not struck through), and the color will change.

If it still won't show after clearing cache, it almost always means the CSS is being saved somewhere that isn't output; tell me exactly where you're pasting it (which screen/field) and I'll point you to the right spot.

Best regards,
Rashida

Hello,

I haven’t heard back from you regarding this issue. Could you please confirm if everything is working fine now?
If so, kindly accept the most helpful answer to close the post.

Best regards,

Hi Leo,

Thanks for checking. You're right, your CSS is in Rhino's Custom CSS field, and the cache isn't involved. Sorry for the confusion in my last reply.

The problem is the rule just above yours, which is missing its closing brace:

a:hover {
color: rgb(119, 191, 159);

Without the }, the browser reads your rule as part of a:hover. It becomes a:hover .article-details-wrap h2, which never matches, so the heading stays black. It works in Inspect because DevTools adds your rule to a separate stylesheet, away from the unclosed a:hover.

Please change the end of your Custom CSS to:

a:hover {
    color: rgb(119, 191, 159);
}

.article-details-wrap h2 {
    color: #5B9279;
    margin-bottom: 22px;
}

Save, then hard-refresh (Ctrl/Cmd + Shift + R). I tested this exact change on your page, and the heading turns green. You don't need !important.

Best regards,

Hi Leo,

Glad that one's sorted. Those missing braces are easy to miss!

The wavy line and two-tone band come from a decorative image (up-grey.png) that Rhino places over the bottom of the header through the page title section. That section only appears on article and blog pages, which is why you only see the wave there.

To remove it, add this at the end of your Custom CSS (in the same place as before):

#sp-page-title::before {
    display: none;
}

Save, then hard-refresh (Ctrl/Cmd + Shift + R). I tested this on your page: the wave and the lighter band disappear, and the beige header ends in a straight line.

As before, make sure the rule above it ends with its closing }.

Best regards,
Rashida