Home>Support>How can i make the circle icon background transparent

How can i make the circle icon background transparent

By Jake Adams, 10 years ago. Last reply by Andrew Misplon, 10 years ago.

I am trying to make the circle icons section under the meta slider different. I want to make the back ground transparent so the page background shows through. I would like to possibly to the same for the headline widget. Please help me if you can. Thanks.

my site is www.seminolecriminal.com
and I am fairly new to wordpress. Thank you so much in advance for your help.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 1 month ago Jake Adams

    Thanks again

  2. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Jake

    Thanks for running Vantage. Try the following under Appearance > Custom CSS:

    /* Circle Icon Opacity */

.widget_circleicon-widget .circle-icon-box .circle-icon {
background: rgba(255, 255, 255, 0.5) !important; 	
}

/* Headline Widget Opacity */

.panel-row-style-wide-grey {
background: rgba(255, 255, 255, 0.5) !important; 
}

    Change 255, 255, 255 the RGB of the color you’d like. 0.5 is the opacity.

    Hope that helps.

  3. 10 years, 1 month ago Jake Adams

    EXCELLENT. Thank you very much. I have changed this. However, my background is now dark, and i need to change the text colors in the headline widget and the icon circle widget. Can you provide css for this? Thanks

    Seminolecriminal.com

  4. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    No problem.

    Did you change 255, 255, 255 to the RGB of your required circle icon background color?

    Here are the selectors for the headline widget, just swap out the font property for a color property:

    /* Headline Widgets Font */

.widget_headline-widget h1 {
font-family: Verdana, Geneva, sans-serif !important;
}

.widget_headline-widget h3 {
font-family: Verdana, Geneva, sans-serif !important;
}

    Ref: http://www.w3schools.com/cssref/css_colors.asp

    Here are is the full selector set for the circle icon widget, use what you need and delete the rest:

    /* Circle Icon Font */

.circle-icon-box { font-family: Arial; }

/* Circle Icon Heading Color */

.widget_circleicon-widget .circle-icon-box h4 {
color: #3b3b3b !important;
font-size: 14px !important;
}

/* Circle Icon Text Color */

.widget_circleicon-widget .circle-icon-box p.text {
color: #5e5e5e !important;
font-size: 14px !important;
}

/* Circle Icon More Link */

.widget_circleicon-widget .circle-icon-box a.more-button {
color: #3b3b3b !important;
font-size: 14px !important;
}

.widget_circleicon-widget .circle-icon-box a.more-button:hover {
color: #dd3333 !important;
font-size: 14px !important;
}

/* Vantage set Circle Icon Widget Icon color */

.widget_circleicon-widget .circle-icon-box .circle-icon [class^=”icon-“] {
color: #FFFFFF;
font-size: 14px !important;
}
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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More