[benbiden]

Hi everyone,

I’m using the Tempera theme on my website, and while it’s great overall, I’m having trouble getting some custom CSS to apply correctly. I’ve added my CSS changes through the Additional CSS section in the WordPress Customizer, but certain styles either don’t take effect or behave inconsistently across pages.

Here’s what I’m trying to do:

Change the background color of the header to match my branding.
Reduce the padding around the menu items to make the navigation bar more compact.
Style specific widgets differently on the homepage versus other pages.
The issues I’m facing:

The header background color sometimes reverts to the default after saving changes.
Custom padding for the navigation menu is being overridden, likely by the theme’s default CSS.
CSS targeting widgets works on the homepage but doesn’t apply correctly on other pages.
What I’ve tried so far:

Used browser developer tools to inspect elements and confirm my CSS selectors.
Added !important to some styles to force changes (though I’d prefer not to rely on this).
Cleared the browser and WordPress cache after making changes.
I’d appreciate help with:

Understanding if there’s a specific way to override default styles in Tempera without breaking the theme.
Whether I need to enqueue a separate stylesheet for customizations or if Additional CSS is sufficient.
Tips for troubleshooting CSS inconsistencies across different pages in the theme.
Thanks in advance for any advice or guidance!

[Author]

Posts