Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] Facebook icon (solution found here didn'work for me)


  #1  
Old Oct 9, 2011, 12:45 PM
Tamara-IT's Avatar
Tamara-IT
 
41 posts · Jan 2011
Italy
Hello!
Can you please help? I did'n found where I did wrong.
I want to put a clickable FB icon in logo area, on the right. this is what I have in configuration:
Code:
%image %pages %logo 
<div id="facebook">
<a href="https://www.facebook.com/pages/HOTEL-POST/297445000270909" style="float:left;">
<img src="http://hotelpostbergamo.it/wp-content/themes/atahualpa/images/facebook.png" />
</a>
<span style="font-size:10px;">Seguici su Facebook per scoprire sconti e promozioni</span>
</div> %bar2
This is my custom CSS:
#facebook {
position: relative;
left: 740px;
width: 140px;
height: 0px;
}
And the result is:


  #2  
Old Oct 9, 2011, 05:41 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Without access to the site it's difficult to troubleshoot. Have you tried adding !important to the CSS?
__________________
~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.
  #3  
Old Oct 11, 2011, 02:28 AM
Tamara-IT's Avatar
Tamara-IT
 
41 posts · Jan 2011
Italy
Hello,
!important brings it all on the left and on a single line. Tried a high z-index bit it has no effect.
I'd like to have it in the logo area on the right, now it is above.

http://hotelpostbergamo.it
I have to comment the code for the logo area from time to time because the client wante the site to be visible (I put FB icon in a txt widget now) but I want to learn how to solve the problem.
  #4  
Old Oct 11, 2011, 05:22 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try this
HTML Code:
#facebook {
    height: 0;
    position: fixed;
    top: 28px;
    width: 140px;
}
you will want to play with the top number and might want to add 'right: nnpx;' and play with those numbers too.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 11, 2011, 06:02 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
This may be a browser thing Juggledad but those numbers didn't work for me. I had to use the following if I wanted to keep the transparent area where the FB icon currently is.
HTML Code:
#facebook {
    bottom: 70px;
    height: 0;
    position: relative;
}
And if I wanted to get rid of that transparent area I used this.
HTML Code:
#logoarea {
    margin-bottom: -50px !important;
}
#facebook {
    bottom: 20px;
    height: 0;
    position: relative;
}
Again may have to play with the numbers.
__________________
~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 Oct 11, 2011, 09:02 AM
Tamara-IT's Avatar
Tamara-IT
 
41 posts · Jan 2011
Italy
Thanks!
Both ways work, this is my final code:
Header area
Code:
%image %pages %logo 
<div id="facebook">
<a href="https://www.facebook.com/pages/HOTEL-POST/297445000270909" style="float:left;padding;6px;">
<img src="http://hotelpostbergamo.it/wp-content/themes/atahualpa/images/facebook.png" />
</a>
<span style="font-size:10px;">Seguici su Facebook per scoprire sconti e promozioni</span>
</div> %bar2
CSS
Code:
#logoarea {
    margin-bottom: -50px !important;
}
#facebook {
	left:750px;
    	bottom: 20px;
    	height: 0;
	width: 140px;
    	position: relative;
}
The result is here: http://hotelpostbergamo.it
Hope it helps some one else
Thanks again!

Bookmarks

Tags
facebook, logo area

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Simple Facebook Connect - works but doesn't display Facebook avatars grahambae Plugins & Atahualpa 8 Jan 29, 2012 06:17 PM
[SOLVED] clickable facebook icon in logo area pmac Header configuration & styling 7 Sep 22, 2011 01:56 PM
I have a mysterious facebook icon on my posts–yes, I believe I looked there for it... mimilemeu Sidebars & Widgets 9 May 27, 2011 12:28 PM
[SOLVED] POST FEED ICON &amp; COMMENT FEED ICON lost! bboobb Page & Category Menu Bars 1 Jan 7, 2011 08:35 PM
Solution: upgrade and header a02112020317 Header configuration & styling 1 Aug 30, 2010 09:49 PM


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


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