Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Sidebar position:fixed (http://forum.bytesforall.com/showthread.php?t=17016)

aygart Mar 13, 2012 10:53 AM

Sidebar position:fixed
 
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.

juggledad Mar 13, 2012 11:20 AM

What version of Atahualpa and WP?
What is the URL?

aygart Mar 13, 2012 11:39 AM

WP 3.3.1
Atahualpa 3.7.3
http://lowerwatt.com/getquote/

I will redo this so that you can see.

aygart Mar 13, 2012 11:45 AM

Doing from the two threads together gives slightly different results, but you can see for yourself.

aygart Mar 13, 2012 02:23 PM

It is back to the attmpted position:fixed so that you can see what I mean

juggledad Mar 13, 2012 03:02 PM

ry adding thins to the CSS Inserts
HTML Code:

div.header-image-container {z-index: 10;}

aygart Mar 13, 2012 03:38 PM

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.

juggledad Mar 13, 2012 04:06 PM

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.

aygart Mar 13, 2012 04:55 PM

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

Jam Mar 13, 2012 06:22 PM

A wise man once said (many many many many many times)

Quote:

Originally Posted by juggledad (Post 81799)
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 ;)

aygart Mar 13, 2012 06:44 PM

I just started with WordPress and atahualpa a week ago. Give me a chance!;)

aygart Mar 13, 2012 09:14 PM

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.

Jam Mar 13, 2012 10:20 PM

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;

lmilesw Mar 14, 2012 07:08 AM

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.

aygart Mar 14, 2012 07:31 AM

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. :confused:

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.:p

lmilesw Mar 14, 2012 08:12 AM

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

aygart Mar 14, 2012 10:02 AM

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?

lmilesw Mar 14, 2012 11:10 AM

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;
}


aygart Mar 14, 2012 02:04 PM

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).

lmilesw Mar 14, 2012 04:56 PM

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.


All times are GMT -6. The time now is 03:54 AM.

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