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)
-   -   [SOLVED] Trouble adding widget to header (http://forum.bytesforall.com/showthread.php?t=20662)

wswanliz Jul 19, 2013 08:59 AM

[SOLVED] Trouble adding widget to header
 
I am a noob and think I did most of this right but must be missing something.
I wanted to add a widget area to the header for social icons. I added the new widget.

I put this code in the Style and Edit Header Area
%image <div class="right"><?php bfa_widget_area('name=My new widget area'); ?> </div> %pages

I added this to the CSS Inserts
.right {
position:relative;
top:-155px;
left:700px;
width:200px;}

It looks like the positioning is going to be good.
BUT there now is a big white space between the %image and the %.pages.

How do I get rid of it? My website is www.lasertattooremovalfinder.com. Thanks. Liz.

lmilesw Jul 19, 2013 10:42 AM

The space for the div is still there. You can perhaps use a height of 0 for the div or use absolute positioning. If you use absolute positioning you will have to add position: relative to #wrapper. You would also need to tweak your current CSS if you go the absolute positioning route.

wswanliz Jul 19, 2013 11:34 AM

Thanks for your answer. I need some direction. I am a complete novice.

I made the position absolute and I lost the blank space but then the widget did not display.

If I was going to try using height = 0 where do I put the code?

lmilesw Jul 19, 2013 11:59 AM

The code you could use is either of the following. The code may need to be tweaked for distances.
HTML Code:

.right {
position:relative;
top:-155px;
left:700px;
width:200px;
height: 0;
}

OR
HTML Code:

#container {
position: relative;
}
.right {
position:absolute;
top:25px;
right:10px;
width:200px;
}


wswanliz Jul 19, 2013 04:26 PM

Thanks. Worked like a charm. Liz.


All times are GMT -6. The time now is 07:35 AM.

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