Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hey there,
I have a list of medium sized circle icons in left position.
I want to change the paddings so they will look more loosely placed.
Where can I apply my own css ?
Something is surely overwriting the main css stylesheet…
Hi Igor
If you’re up to speed with a bit of CSS I’ve pasted all the Circle Icon selectors below:
.widget_circleicon-widget { clear: both; } .widget_circleicon-widget .circle-icon-box { position: relative; text-align: center; } .widget_circleicon-widget .circle-icon-box.circle-icon-show-box { background: #F6F6F6; border: 1px solid #DDDDDD; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.05); -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.05); box-shadow: 0 2px 2px rgba(0,0,0,0.05); padding: 24px; } .widget_circleicon-widget .circle-icon-box.circle-icon-hide-box { padding: 5px; } .widget_circleicon-widget .circle-icon-box .link-icon, .widget_circleicon-widget .circle-icon-box .link-title { display: block; text-decoration: none; } .widget_circleicon-widget .circle-icon-box .circle-icon { position: absolute; width: 65px; height: 65px; background-color: #3a3b3e; background-position: center center; background-repeat: no-repeat; background-size: cover; border: 6px solid #ffffff; -webkit-border-radius: 130px; -moz-border-radius: 130px; border-radius: 130px; display: inline-block; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .widget_circleicon-widget .circle-icon-box .circle-icon [class^="icon-"] { position: absolute; top: 50%; left: 0; width: 100%; height: 1em; color: #FFFFFF; display: block; font-size: 24px; line-height: 1.1em; margin-top: -0.5em; text-align: center; } .widget_circleicon-widget .circle-icon-box h4 { color: #3b3b3b; font-size: 17px; font-weight: bold; margin-bottom: 0.8em; margin-top: 0; } .widget_circleicon-widget .circle-icon-box p.text { color: #5e5e5e; font-size: 13px; margin: 0; margin-bottom: 10px; } .widget_circleicon-widget .circle-icon-box p.text:last-child { margin-bottom: 0; } .widget_circleicon-widget .circle-icon-box a.more-button { color: #3b3b3b; display: block; font-size: 13px; font-weight: bold; text-decoration: none; } .widget_circleicon-widget .circle-icon-box a.more-button i { width: 5px; height: 8px; display: inline-block; margin-left: 3px; }What you can then do is copy the selectors you’d like to edit into a Custom CSS plugin or child theme style.css file and edit as required.