Simple Social Icons Transparent

[CBS]

Hi,

I am wondering how I can make the immediate background of simple social icons transparent.

For some reason I am having extreme trouble doing this with CSS.

I am using the widget on Front-Page-1 of Infinity Pro.

Thanks

[Victor Font]

I'm not sure what you mean by the term "immediate background", but it would help if you posted a link to your site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[CBS]

Hi,

I mean behind the social platforms logo.

Here is the site I am building.

http://proportfolio.wpengine.com/

Regards

CB

[Victor Font]

I'm still not following you. You don't have an area on your page called "social platforms logo". All I see is 3 icons in front-page-1. That widget area uses a background image. Do mean to not display the icons over the background mage? The icons are black on white and upon hover reverse the colors. Do you want to remove the white background from the icons themselves?

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[CBS]

Yes that is correct. I would like the white to disappear.

CB

[JHRS]

You should change four items,
1. color of the icon so that it will show up against your black background,
2. change the background of the icon to transparent
3. Change the link hover property to transparent
4. Get rid of link/hover borders

Steps 1 + 2

.simple-social-icons ul li a, .simple-social-icons ul li a:hover, .simple-social-icons ul li a:focus {
background-color: rgba(0,0,0,0) !important;
border-radius: 0px;
color: white !important;
border: 0px #ffcc33 solid !important;
font-size: 18px;
padding: 9px;
}

Steps 3 + 4

.simple-social-icons ul li a:hover, .simple-social-icons ul li a:focus {
background-color: rgba(0,0,0,0)!important;
/* border-color: #000000 !important; */
color: #ffffff !important;
}

[Victor Font]

Try adding this to functions.php:

add_action( 'wp_head', 'simple_social_transparent_background', 11 );
function simple_social_transparent_background() {

    $css = '.simple-social-icons ul li a { background-color: transparent !important; }';

    echo '<style type="text/css" media="screen">' . $css . '</style>';
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts