Wordpress Themes - WP Forum at BFA - [SOLVED] Facebook icon (solution found here didn'work for me)

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] Facebook icon (solution found here didn'work for me) (http://forum.bytesforall.com/showthread.php?t=15608)

Tamara-IT

Oct 9, 2011 12:45 PM

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

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:

http://img401.imageshack.us/img401/115/16244600.jpg
:(

lmilesw

Oct 9, 2011 05:41 PM

Without access to the site it's difficult to troubleshoot. Have you tried adding !important to the CSS?

Tamara-IT

Oct 11, 2011 02:28 AM

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.

juggledad

Oct 11, 2011 05:22 AM

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.

lmilesw

Oct 11, 2011 06:02 AM

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.

Tamara-IT

Oct 11, 2011 09:02 AM

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!:)

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