Custom Styles (where Presets Reside) In Template Manager Not Working
Peter Dowse
Hi Guys,
I have this site https://www.globaltechgroup.com.au/2025/
It's using the Artolio template however, none of the custom styles we've implemented are working. We've tried turning off all caching, making sure scss is turned on (also tried toggling this) and emptied both the Joomla and browser cache - but none of the changes seem to be taking.
As an example, we've changed the background of the Dropdowns to white, but that's not working (had to add it with custom.css).
It seems the template.css is showing
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
box-shadow: 0px 30px 60px 0px #1111141F;
padding: 5px;
border-radius: 4px;
border-color: var(--sspb-border-primary);
background-color: var(--sppb-card-bg-variant-3);
}which suggests it should be pulling in a variable, but no matter the changes made in the template manager, nothing actually changes.
Any light you could shed on this would be greatly appreciated.
Ziaul Kabir
Accepted AnswerHello Peter,
I apologize for the inconvenience.
This template is designed with both light and dark modes, so all colors are controlled by the SP Page Builder color library. As a result, the template options will not work for changing colors.
Thank you for your understanding.
Ziaul Kabir
Accepted AnswerHello Peter,
Thank you for reaching out to us.
Have you tried disabling “Compile SCSS to CSS”, saving the changes, then re-enabling it and saving again? After that, please clear both your browser cache and the Joomla cache.
Thanks.
Peter Dowse
Accepted AnswerHi Ziaul,
Yes - I have tried this - as mentioned in the original post, I've toggled these options to try to force the changes - but that doesn't work.
This seems to be template specific as I haven't had this issue with other templates.
Ziaul Kabir
Accepted AnswerI apologize for the inconvenience.
You can manage this color from SP Page Builder → Settings → Color Library. Create a new color mode with both dark and light colors for this mode, then assign this variable in your CSS:
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
background-color: var(--sppb-card-bg-variant-new-mode);
}Thanks.
Peter Dowse
Accepted AnswerBrilliant - that worked - (thanks for this tip - I didn't know about this).
One thing I did notice is that this works for one dropdown - but not the other that's been allocated the same style.
You can see the 'About' menu item is white, however the 'products' menu item is still transparent even though both have been allocated
background-color: var(--sppb-card-bg-variant-3);Any ideas as to why one would work but the other doesn't?
Edit - I read your instructions properly and did it your way and unfortunately it doesn't seem to want to work. I've allocated
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner, body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
background-color: var(--sppb-card-bg-variant-menu);
}to my custom CSS and can see it's allocated to the inner dropdown - but the variable isn't being picked up via the template manager.
Peter Dowse
Accepted AnswerHi Ziaul,
With all due respect - this makes absolutely no sense. Why would you have the option for custom styles in a template, but then have to create custom.css styles and variables to get anything to change????
It's really very straightforward, I simply want the custom template options to work - currently they aren't. The real question here is why the template custom styles are not working for this template. We shouldn't have to create custom css or variables if there's an option available in the template to do this (see screenshot)
Peter Dowse
Accepted AnswerOk - that makes sense.....kind of.
It would be better to remove the custom styles feature from this template if it's obsolete or at least put something in the documentation about this, otherwise I can imagine many many people will expect it to work like your other templates, as I did.