Problem with Social Icon Container

(9 posts) (3 voices)

1. 

   heartattack247
   Member

   Site URL: http://beardedtechnologies.com/
   Problem Location: Social Icon Container
   Theme: Echelon
   Browser: Chrome (but also cross checking with Firefox & IE9)
   OS: Windows 7

   I just can't seem to figure our what code to add to the .css to get the background of the Social Icon Container to be transparent. It doesn't look too the way it is now if I have transparent space at the top or if my header background color is different than my "theme color".

   Could you guide me in the right direction to make Social Icon Container background color transparent? Thanks!

   Posted 4 months ago #
2. 

   Elliott
   Support

   Hello heartattack247,

   I think what you'll want to do is upload a transparent png as the background like so,

   .header_extras { background-image: url("link to your image") !important; }

   Posted 4 months ago #
3. 

   heartattack247
   Member

   Do you know what size I need to make it? What dimensions would work best?

   Posted 4 months ago #
4. 

   Elliott
   Support

   If you have it scroll horizontally and vertically then you can use a 10x10 icon or similar small size. Since it's already a small container you could just upload a 200 x 100 transparent image.

   Posted 4 months ago #
5. 

   heartattack247
   Member

   This is my current header code with the line you said to add. I made a 10x10 transparent .png and uploaded it to the themes /image folder and wrote in the code below. It still doesnt seem to be working...

   /* Header
   -------------------------------------------------------------- */
   #header{background-color:transparent;position:relative;height:200px;border-top:8px solid #888;}
   #header_extras{position:absolute;right:30px;}
   #header_extras_inner{margin-top:-8px;overflow:hidden;padding:2px 10px;}
   .header_extras { background-image:url("images/transparentbg.png") !important; }
   .header_links{float:left;font-size:9px;padding:2px 10px 2px 0;}
   .header_links a,.header_links a:hover{color:#eee;}
   .header_links ul{list-style:none;padding:0;margin:0;}
   .header_links li{float:left;padding-left:10px;}
   .header_links li ul{float:right;margin-right:0px;}
   .header_social{float:left;padding:0 5px;}
   .header_social .social_icon{float:left;padding:0 2px;}
   .header_social img{vertical-align:bottom;}
   .header_text{float:left;font-size:10px;color:#eee;padding:2px 10px;}
   .has_header_social.has_header_text #header_extras,.has_header_links.has_header_text #header_extras{}
   .logo{position:absolute;Bottom:50px;line-height:85px;}
   .logo a:hover{text-decoration:none;}

   Posted 4 months ago #
6. 

   Elliott
   Support

   Try this,

   #header_extras { background-image: url("link to your image") !important; }

   Posted 4 months ago #
7. 

   heartattack247
   Member

   You do realize that you already told me to do that right? That was the first thing you suggested i try...

   I tried it and explained in my last post what i did and even pasted you the code I currently have so you could see what i may need to do differently. Its like you ignored my last reply and just posted the same exact initial suggestion...

   Posted 4 months ago #
8. 

   Webtreats
   Support

   Hi heartattack247,

   In your code, replace the following line:

   .header_extras { background-image:url("images/transparentbg.png") !important; }

   With this one:

   #header_extras {background:transparent !important;}

   Posted 4 months ago #
9. 

   heartattack247
   Member

   Perfect! Thank you very much!

   Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.