Hi

I would like to ask how do I overlay facebook icon on my logo? I tried the steps on thi thread But they dont work for me. Instead I get the icon to be inbetween the logo and catagories.
Thanx.

What version of atahualpa and wp?
What is the URL showing the issue?

Sorry for not providing the info....Wordpress version 3.3.1, Atahualpa version 3.7.0, website sacellularnet.co.za....
header area code:
pages %logo <div id="facebook">
<a href="http://www.facebook.com/pages/SA-Cellular-Net/146304502141615" style="float:left;padding;6px;">
<img src="http://sacellularnet.co.za/wp-content/themes/atahualpa/images/facebook2.png" />
</a>
<span style="font-size:14px;"><------ like us on facebook</span>
</div>
%cats

CSS code:
#logoarea {
margin-bottom: -50px !important;
}
#facebook2 {
left:750px;
bottom: 20px;
height: 0;
width: 140px;
position: relative;
}

In your code, you have an ID of 'facebook', but in the CSS you use #facebook2 - these must match

Also you are using the code for the example you mentioned. You would need to change the CSS for your site.

Hi Juggledad, i changed the "#facebook2" to "#facebook" but still doesnt work. I think there might be something wrong with the code on CSS because even if i remove it i still get same results. It could be what Imilesw is talking about.
Hi Imilesw, What exactly do i change there? I am a complete novice. Thanx for the help.

take a look at your CSS Inserts - you have added '</head>' which is invalid CSS and is causing all the following CSS to be ignored.

You should fix that and test it again

I did see some of </head> on my css, i deleted them and the results are still the same. Am sure the is something i am doing wrong. I am even embarrased to ask now. Is there any other possible error you can think of?

you still have errors in your CSS Inserts, you have a section with an '{' but no '}' causing everything after it to be ignored.

Hi juggle dad, I have looked for '{' but no '}' but i cannot find any. will you please take a look at my CSS inserts, am quite sure you'll find the problem.

/* removing the default top padding of td#middle of "classic" Atahualpa, 
and putting some more padding-bottom here, for more margin above the footer */
td#middle {
padding: 0 0 15px 0;
}

div.searchbox {
position: absolute;
top: 95px;
right: 20px;
}

div.searchbox-form {
margin: 5px 0 15px 5px;
}
div#menu1 ul.rMenu {
background: transparent;
border: none;
}
div#imagecontainer {
margin: 5px 0; 
border: solid 5px #666;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
div.widget ul li {
padding: 1px 5px 1px 12px !important;
background: url('/wp-content/themes/atahualpa/images/bullets/round-gray.gif') no-repeat 0 7px;
}

/* Menu Bars */

div#menu1 ul.rMenu-ver {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 5px;
/* the background color of sub-UL's must be set here */
background: #ccc;
box-shadow: 0 3px 10px #6663;
-moz-box-shadow: 0 10px 5px #666;
}

div#menu2 ul.rMenu {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 3px;
margin: 5px 0;
}
div#menu2 ul.rMenu-ver {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 5px;
/* the background color of sub-UL's must be set here */
background: #666;
box-shadow: 0 3px 10px #333;
-moz-box-shadow: 0 3px 10px #333;
}


/* Adjustments for the menu bars, which in their default 
state have 1px borders plus -1px margins to avoid 1+1=2px 
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;	
}
/* Space between items of page menu bar */
div#menu2 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu2 ul.rMenu li li {
margin-right: 0;
}

/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/

/* XX comments to .... */
h3#comments {
margin: 5px 0;
padding: 10px;
background: #fff;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
border: solid 1px #e5e5e5;
}

ul.commentlist {
border-top: 0;
margin: 0;
}
ul.commentlist li.thread-odd, ul.commentlist li.thread-even {
margin: 5px 0;
padding: 10px;
background: #fff;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
border: solid 1px #e5e5e5;
}
/* The main horizontal bar's background */
#menu1 ul.rMenu-hor,
#menu1 ul.rMenu-ver {
  padding-left: 0px !important;

  /* Change to fall-back color in case gradients are not supported by browser */
  background-color: #DDD !important; 

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -moz-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -webkit-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: linear-gradient(#F9F9F9, #E5E5E5) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F9F9F9', EndColorStr='#E5E5E5') !important; /* IE7,8,9 */
}

#menu1 ul.rMenu-ver {
  margin-top: 0 !important;
}

#menu1 .rMenu-hor a {
  font-weight: bold !important; /* Personal preference */
  line-height: 2.0em !important; /* This adjusts the height of the menu bar */
}

#menu1 .rMenu-ver a {
  line-height: 1.2em !important; /* This adjusts the height of items in the submenus */
}

#menu1 li {
  margin: 0 !important;
  background-color: transparent !important;
}

/* Hovered items and current page items get these backgrounds */
#menu1 a:hover,
#menu1 a:active,
#menu1 .current_page_item a:link,
#menu1 .current_page_item a:visited {

#logoarea {
    margin-bottom: -50px !important;
[color="Red"]}
#facebook {
	left:750px;
    	bottom: 20px;
    	height: 0;
	width: 140px;
    	position: relative;
}[/color]

  /* Change to fall-back color in case gradients are not supported by browser */
  background-color: #333 !important;

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#444444, #111111) !important;
  background: -moz-linear-gradient(#444444, #111111) !important;
  background: -webkit-linear-gradient(#444444, #111111) !important;
  background: linear-gradient(#444444, #111111) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#111111') !important;

I changed the colour of the facebook code for convinience (so that you may see it quick). and here is what i have on my header area:

%pages %logo <div id="facebook"> <a href="http://www.facebook.com/pages/SA-Cellular-Net/146304502141615" style="float:left;padding;6px;">
<img src="http://sacellularnet.co.za/wp-content/themes/atahualpa/images/facebook2.png" />
</a>
<span style="font-size:14px;"><------ like us on facebook</span>
</div> 
%cats

Thank you for your help

look at your CSS after the line
/* Hovered items and current page items get these backgrounds */