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

Sidebar position:fixed


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 13, 2012, 11:53 AM
aygart
 
25 posts · Mar 2012
When make my sidebar position:fixed; by inserting
Code:
border-right: 1px #04167A;
padding: 10px 10px 10px 10px;
background: #8599A6;
text: #2F4253;
position:fixed;
in the "LEFT sidebar style" its position does get fixed unlike it is implied here, but when doing so the sidebar becomes wider and reaches the right side of the screen. Adding
Code:
width: 200px;
does not help.

I guess that have the widgets on the sidebars position:fixed would work just as well.

Related thread here.

Last edited by aygart; Mar 13, 2012 at 11:58 AM.
  #2  
Old Mar 13, 2012, 12:20 PM
juggledad's Avatar
juggledad
 
22,374 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?
__________________
"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 13, 2012, 12:39 PM
aygart
 
25 posts · Mar 2012
WP 3.3.1
Atahualpa 3.7.3
http://lowerwatt.com/getquote/

I will redo this so that you can see.
  #4  
Old Mar 13, 2012, 12:45 PM
aygart
 
25 posts · Mar 2012
Doing from the two threads together gives slightly different results, but you can see for yourself.
  #5  
Old Mar 13, 2012, 03:23 PM
aygart
 
25 posts · Mar 2012
It is back to the attmpted position:fixed so that you can see what I mean
  #6  
Old Mar 13, 2012, 04:02 PM
juggledad's Avatar
juggledad
 
22,374 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ry adding thins to the CSS Inserts
HTML Code:
div.header-image-container {z-index: 10;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 13, 2012, 04:38 PM
aygart
 
25 posts · Mar 2012
Thanks, this worked to get the header covering thesidebar, but did not work to get the sidebar back to its proper size filling the sidebar area and not covering the center column.
It also solves this thread mostly although the form still shows through the menu bar where there are no menu items.
  #8  
Old Mar 13, 2012, 05:06 PM
juggledad's Avatar
juggledad
 
22,374 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
make the width smaller - you should really get and learn how to use FireBug an extension for FireFox it is invaluable when trying to figure these things.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 13, 2012, 05:55 PM
aygart
 
25 posts · Mar 2012
I already set width: 200px; which is the sidebar width. That also would only fix the width and would not make it reach the bottom.
Re. Firebug. I'm learning give me some time.
  #10  
Old Mar 13, 2012, 07:22 PM
Jam's Avatar
Jam
 
1,076 posts · Mar 2011
Perth, Western Australia
A wise man once said (many many many many many times)

Quote:
Originally Posted by juggledad
you should really get and learn how to use FireBug an extension for FireFox it is invaluable when trying to figure these things.
It is really good advice
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites
  #11  
Old Mar 13, 2012, 07:44 PM
aygart
 
25 posts · Mar 2012
I just started with WordPress and atahualpa a week ago. Give me a chance!
  #12  
Old Mar 13, 2012, 10:14 PM
aygart
 
25 posts · Mar 2012
I actually tried what I was able to figure out with firebug and saw that
Code:
#left {width: 180px;
height: 1000;}
will get the sidebar filled and not over into the center. I'm not sure why it needs to be 20px smaller than the table column size, but it works. The problem then is that it covers the footer when scrolled to teh bottom. I tried
Code:
#footer {z-index: 10;}
which worked for the header but it didn't help.

Edit: This worked as described in Firebug but when entering in css inserts it still overflowed into the center column.

Last edited by aygart; Mar 13, 2012 at 10:20 PM.
  #13  
Old Mar 13, 2012, 11:20 PM
Jam's Avatar
Jam
 
1,076 posts · Mar 2011
Perth, Western Australia
I know, Im sorry, I was a newb once.

Using a code inspector you currently have:

td#left {
vertical-align: top;
border-right: 1px #04167A;
padding: 330px 10px 10px 10px;
background: #8599A6;
text: #2F4253;
position: fixed;
width: 200px; (try 180px here)
}

and

#left {
width: 170px;
height: 600px;

Im not sure why you want left sidebar the height 600px and fixed, only that the background colour of light blue shows if you dont hide it. So change the background colour to same as the widgets background colour and ditch the height.

The background colour for the page is currently set in:

div#container {
padding: 0;
background: #9EBBE3;
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites

Last edited by Jam; Mar 13, 2012 at 11:25 PM.
  #14  
Old Mar 14, 2012, 08:08 AM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
And just to throw a wrinkle in here. When I look at this site on my laptop your header takes up almost half of the screen and is frustrating to read. When I scroll I expect to see more and can't. I would at least set the header to a narrow height. Something like 100px or at most 150px and even that might be too big with a fixed header.
__________________
~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.
  #15  
Old Mar 14, 2012, 08:31 AM
aygart
 
25 posts · Mar 2012
Thanks both of you for the tips. I'm not sure why it shows two different widths for #left. I only wrote one. I think that I am going to take a different approach and try to fix the widgets in the sidebar and not the sidebars themselves. I think I figured out enough from Firebug to figure out how to do that.

I know that the header needs to be adjusted. The main thing that I want to do is keep the items on the sidebar at all times instead of it becoming blank on a longer page. I'm experimenting with different options. I realize that I will have to keep track that sidebar items shouldn't get lost on smaller screens as well.

In my first job interview as a teacher of a short class when the principal asked me about my experience teaching I told him that there has not yet been anyone born with experience. I got the job and left due to his inexperience and incompetence as a principal.
  #16  
Old Mar 14, 2012, 09:12 AM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
If you want the left and right sidebars fixed add the following to CSS Inserts.
HTML Code:
td#right, td#left {
    position: fixed;
    width: 180px;
}
Make sure there is no conflicting CSS for td#right or td#left
__________________
~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.
  #17  
Old Mar 14, 2012, 11:02 AM
aygart
 
25 posts · Mar 2012
Meanwhile I unfixed the sidebar and header and instead fixed the widgets using
Code:
#search-2 {
	position: fixed;
}
#pages-2 {
	position: fixed;
	padding: 25px 0px;
}
The padding of the page widget needed to be adjusted so it shouldn't overlap the search. Is there any way to just tell it to stay below the widget above it so that it can stay below one even if the size varies (such as a posts widget which will change based on post titles)?

I am starting with the left sidebar and will apply my learning to the right sidebar later.

Also, is there a way to get the widgets to move up when scrolling down so as not to leave a blank space above them but have them stop at the top so that they should not go off the page and leave the whole sidebar blank?
  #18  
Old Mar 14, 2012, 12:10 PM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
Instead of having to set fixed position to all the widgets you could just add the following to CSS Inserts to fix the sidebars and have the background the correct color. Now when you add new widgets you won't have to add anything in the code.
HTML Code:
#bodyrow {
    background: #8599A6;
}
td#right, td#left {
position: fixed;
width: 180px;
}
__________________
~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.
  #19  
Old Mar 14, 2012, 03:04 PM
aygart
 
25 posts · Mar 2012
Thanks. Is there a way to have them move to the top of the screen when scrolling down and then stopping without going off the screen? My guess is that it would need to be done to the widgets by somehow limiting how far they are able to scroll without totally fixing them. I just don't know how to do it (yet).
  #20  
Old Mar 14, 2012, 05:56 PM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
Now I think you will have to wait until you know how to code. I don't have a clue how you would do that.
__________________
~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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Fixed Position Layout with fixed center column? 49Monsters Center area post/pages 1 Nov 3, 2010 03:41 PM
Fixing Sidebar Position / no scroll Craig Atkinson Sidebars & Widgets 0 Nov 29, 2009 01:54 PM
Fixed position Gavin Atahualpa 3 Wordpress theme 7 Nov 17, 2009 02:14 AM
Sidebar position Alex Atahualpa 3 Wordpress theme 2 Feb 27, 2009 12:46 AM


All times are GMT -6. The time now is 04:46 AM.


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