List of circle icons- padding change
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…
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
1Hi 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.
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.