Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   overlay facebook icon on the logo image (http://forum.bytesforall.com/showthread.php?t=16907)

Siya Mar 2, 2012 08:51 PM

overlay facebook icon on the logo image
 
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.

juggledad Mar 3, 2012 01:42 AM

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

Siya Mar 4, 2012 04:41 AM

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;
}

juggledad Mar 4, 2012 04:47 AM

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

lmilesw Mar 4, 2012 06:14 AM

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

Siya Mar 4, 2012 09:23 AM

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.

juggledad Mar 4, 2012 11:58 AM

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

Siya Mar 16, 2012 12:50 PM

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?

juggledad Mar 16, 2012 01:51 PM

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

Siya Mar 25, 2012 09:33 AM

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.
HTML Code:

/* 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:
HTML 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

Thank you for your help

juggledad Mar 25, 2012 12:17 PM

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


All times are GMT -6. The time now is 09:22 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.