We upgraded our SP Pagebuilder but have lost the ability to change the icon color.
Can you provide any custom CSS to do this effectively within a feature box??
Awaiting an answer
SP Page Builder
Icon Color in Feature Box not Available
8 replies
Paul Frankowski Senior Staff
Hi,
that option should be and should work in 99% cases.
But of course, one line of Custom CSS can be used anytime:
.sppb-addon-feature .sppb-icon .sppb-icon-container { color: red; }
p.s.
Remember to disable Production Mode in SPPB settings before making addons color/size changes.
Useful for next time:
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
Josef
Hi, I'm missing the icon color option as well:
https://imgur.com/a/2wSb0t5
And wierd violet-ish color appers.
Paul Frankowski Senior Staff
Scroll down, color fo the icon is lower in settings !! Look at my screenshot UP (added 3 weeks ago).
Find Icon Color option.
Josef
OK, I found it in style. It was closed. Man has to click on the Normal or Hover menu to show it up.
But it will be definitely easier to have it all together in ICON menu. :)
Paul Frankowski Senior Staff
I agree, I will ask to move it higher.
Josef
Another trouble with icon in Feature Box. It is not centered in the background box.
https://imgur.com/a/DUrlV2z
thebden Asked this
Thank you - I do not have that option in my SP Page Builder - was this added in a recent update?
The custom CSS works great but only applies to one icon, in one feature box - what do I have to update all feature boxes (I have 6).
Paul Frankowski Senior Staff
Maybe your template override that addon with older code. This is probably the only explanation.
Check here:
templates\THEME-NAME\sppagebuilder\addons\feature
If you have admin.php file inside, DELETE it.
Paul Frankowski Senior Staff
This CSS should work for all icons. Without LINK.... I cannot help more.
thebden Asked this
Thank you the CSS worked.
Paul Frankowski Senior Staff
Instead of dark background use black border around with 10px width - and will be better.
Without URL --- it's hard to help
Josef
Sorry: https://www.podcisarem.cz/cs/kemp/cenik_2025
But with border it is even worse: https://imgur.com/6ClQaE5
Paul Frankowski Senior Staff
Ahoj Josef.
Thanks for access, I will check...
Paul Frankowski Senior Staff
2 years ago
· edited
Ok, found. The problem was NOT with Feature addon, but default styles from file media/com_sppagebuilder/assets/iconfont/cisar_ico/css/cisar_ico.css
To fix it - Use that custom CSS
[class^="icon-"]::before, [class*=" icon-"]::before {
margin-right: 0 !important;
margin-left: 0 !important; }Inside that Page > Custom CSS area - or edit that file, and add corrections at the end.
Josef
Did not expect that, I have edited custom CSS file. Thanks for Your quick help.
You Guys are awesome.
Log in to reply.