How do you change the text color of the Circle Icon ?
change circle icon text color
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Replies on this thread are closed. Please create a new thread if you have a question,
or purchase a SiteOrigin Premium license if you need one-on-one email support.
Hi Marcel
The following guide should help you with customising your site’s design.
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
For example, to change the color the title of the circle icon to green, you’d use something like this.
.widget_circleicon-widget .circle-icon-box h4 { color: #00FF00; }That should point you in the right direction.
Hi Marcel, please can you advise how I would edit the CSS to have a thicker border around the widget box on the circle icon .
Hi Marcel
It’s not currently a setting of the widget. You can set by inserting the following under Appearance > Custom CSS or into your own Custom CSS module.
/* Vantage set Circle Icon Widget icon color */ .widget_circleicon-widget .circle-icon-box .circle-icon [class^="icon-"] { color: #FFFFFF; }Change #FFFFFF to your color.
Ok…. Did a copy paste in the custom CSS and the tekst must be white …. No results site name fotostudiohappy2cu.nl
Maybe another suggestion
Hi Marcel
I recently drew up Custom CSS for all the text in the widget, here it is:
/* Circle Icon Heading Color */ .widget_circleicon-widget .circle-icon-box h4 { color: #3b3b3b !important; } /* Circle Icon Text Color */ .widget_circleicon-widget .circle-icon-box p.text { color: #5e5e5e !important; } /* Circle Icon More Link */ .widget_circleicon-widget .circle-icon-box a.more-button { color: #3b3b3b !important; } .widget_circleicon-widget .circle-icon-box a.more-button:hover { color: #dd3333 !important; }You can copy that all in and edit it or just the parts you need. White would be #FFFFFF.
Thanks it works like a charm ;)
Super, glad to help.
Andrew. Many thanks to you as this helped me figure out exactly what was going on with my site that was frustrating me as well. It also allows me to play with one element at a time to help better understand CSS.
Glad to hear you’ve been making positive progress Scott. All the best with your site.
Hi what i do not understand is in the Admin you DO have an option for this icons to put in a hexagon color number
I tried that ( seems the best way ? ) but it does not work
see:
Circle Icon
Icon Background Color
#3ab2c0
A hex color
http://dutchnaturalista.com/
Kind regards
JvanBavel
Hi Jvanbavel
We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.
Page: New Thread
If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.
Hi there Andrew
Yes I am a premium user but for now…, riddle solved ! without CSS
And if I may please give the solution so that other users can have benefit from it ?
The solution is not in the Live Editor as I tried but in the Theme adaptions
Go to Widgets > and find there 2 options
Circle Icon Widget Background
Circle Icon Widget Icon
Perfect !
Kind regards
JvanBavel
For sure :) I saw your other thread, I’ll grab that now. We generally work one question per thread so a new thread is always the way to go unless you’d like to help the original poster. When you open your own thread it gets prioritised because you’re a premium customer.
Really glad to hear you made progress on this :)