Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

overlay facebook icon on the logo image


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 2, 2012, 08:51 PM
Siya
 
32 posts · Oct 2011
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.
  #2  
Old Mar 3, 2012, 01:42 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What version of atahualpa and wp?
What is the URL showing the issue?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 4, 2012, 04:41 AM
Siya
 
32 posts · Oct 2011
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;
}
  #4  
Old Mar 4, 2012, 04:47 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
In your code, you have an ID of 'facebook', but in the CSS you use #facebook2 - these must match
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 4, 2012, 06:14 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
Also you are using the code for the example you mentioned. You would need to change the CSS for your site.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Mar 4, 2012, 09:23 AM
Siya
 
32 posts · Oct 2011
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.
  #7  
Old Mar 4, 2012, 11:58 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 16, 2012, 12:50 PM
Siya
 
32 posts · Oct 2011
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?
  #9  
Old Mar 16, 2012, 01:51 PM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you still have errors in your CSS Inserts, you have a section with an '{' but no '}' causing everything after it to be ignored.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Mar 25, 2012, 09:33 AM
Siya
 
32 posts · Oct 2011
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] clickable facebook icon in logo area pmac Header configuration & styling 7 Sep 22, 2011 01:56 PM
[SOLVED] Overlay Header Image Issue - FB Icon allyevans Header configuration & styling 13 Jun 27, 2011 07:11 PM
If I Leave The Logo Image Field Blank, It Displays Broken Image Icon in Header psaltriparus Header configuration & styling 1 Oct 20, 2009 09:30 AM


All times are GMT -6. The time now is 12:11 AM.


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