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 » Sidebars & Widgets »

[SOLVED] Trying to add a widget area inline with the page menu


  #1  
Old Dec 25, 2010, 11:29 PM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
[SOLVED] Trying to add a widget area inline with the page menu

I have the "Facebook Social Plugin" installed and the "Facebook Like Button" widget added to the top of my right sidebar. I'd like to move this widget to be inline with my page menu but aligned to the left side with some left padding. I can create a new widget area but I'm not sure where to place it to accomplish this. Any suggestions? the site is http://www.hotels-onsale.com.

I have some menu CSS inserts and then there's the default ATA menu CSS inserts that I'll cut and paste here as reference:

div#menu1 {
padding-top: 2px;
padding-bottom: 2px;
border: solid 0px #000000;
background: #ffffff;
}
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight: bold;
}
div#menu1 ul.rMenu li a:hover {
text-decoration: underline;
}
div#menu1 ul.rMenu {
background: transparent;
}

/* 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#menu1 ul.rMenu li {
margin-right: 3px;
}

/* Reset margin for 2nd+ level items */

div#menu1 ul.rMenu li li {
margin-right: 0;
}

/* Removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */

td#middle {
padding: 0;
}

Thanks!
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #2  
Old Dec 26, 2010, 06:59 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
If you put the following in ATO>Add HTML/CSS Inserts>CSS Inserts it should work in Firefox. I didn't test in IE however.
HTML Code:
#olussierfsp_likebutton-3 {
margin-top: -43px;
position: relative;
margin-bottom: 6px !important;
}
__________________
~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 Dec 26, 2010, 10:22 AM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
Thanks Larry - I had to experiment a bit. I had a CSS (previous) insert (that you probably saw) to remove the bottom margin for the FB widget to space it better on the page and I commented that out and then commented out the padding you added to just first experiment with the negative value margin. At -43 px it was squatting on and hiding the horizontal border but at 47 px it works great in FFX and Chrome - without any padding. So this gets me half way there I think. I'm trying to move it to the left hand side of the menu\left hand side of the page..centered between the left margin and the home button. Any idea how to do that?

Also, and kind of more urgently, in IE my footer is sitting on my header! Any idea how to fix this? freaken ie..

Thanks!
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #4  
Old Dec 26, 2010, 10:23 AM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
Well - I guess maybe I should try putting the widget at the top of the left sidebar
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #5  
Old Dec 26, 2010, 11:08 AM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
After moving the widget to the top of the left sidebar, I added a 15 px margin to the top of the text-5 search widget and then:

#olussierfsp_likebutton-3 {
margin-top: -55px;
position: relative;
}

and it looks great in FFX and Chrome. Is it OK to do it this way?

Also in IE, the FB widget doesn't show at all but the footer is back at the bottom. Sadly though, the site in general is still pretty hosed. It looks like there wasn't enough horizontal space to hold all the sidebars so it stacked them - plus my menu is squatting on "find a hotel sale" which is widget text-5.

So I guess I'll start searching around for ie issues - what a nightmare - any help on that would be great!

Thanks
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #6  
Old Dec 26, 2010, 11:57 AM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
Update: I discovered that I had a sidebar used on another page that should not have been marked to be used on the home page so I removed the home page page number from that sidebar, got all excited, reloaded the home page, and no change.

I then discovered that the FB widget was roughly 400px wide which was likely the culprit that was kicking the other sidebars underneath td#left. I added width: 225px; to the FB widget to shorten the horizontal footprint and after an obligatory crash, ie seems to be rendering my site a little better but it's locked up now trying to download the "bullet" images and, woops, just crashed again. Hmm..ie is now just utterly not responding on my site - total "faded white" screen of death. suggestions?
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to: add a widget area to a single post paolo Center area post/pages 0 Dec 23, 2010 04:44 AM
Error when selecting 'add new widget area' or any menu item below this gaidin Sidebars & Widgets 2 May 22, 2010 01:27 PM
Add widgetized area to the righthand side of the Page Menu Bar kiratiana Page & Category Menu Bars 1 Apr 17, 2010 12:46 PM
Changing a widget display from block to inline (Twitter Text Widget) Flur Sidebars & Widgets 2 May 7, 2009 11:45 AM


All times are GMT -6. The time now is 05:49 PM.


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