CSS Help, would like to add a sidebar to Sterile theme!

sshepherd

I'm pretty new to CSS, oldschool tables fan but I've been getting by.

I was wondering if anyone could point me in the right direction on how to add a right sidebar to the Sterile theme.

I'd like to keep the main index of the gallery centered as with the standard sterile layout, but attach a 180px sidebar to it's right with a 10px padding between the two.

I've tried adding one myself, and making the zen.css changes I thought it needed, but the box kept getting placed underneath the gallery and above the zen link.

Thanks!

trisweb

Try the "float" attribute. Specifically, "float: right;" Then try placing the sidebar div above or below (code-wise) the div you want it to be next to, and see if that makes a difference.

You might also need to reduce the width of the other div, to "make room" for the new one.

Good luck!

sshepherd

No luck.

It always appears over or under the main body CSS.

Tried adding float left to the body CSS, still didn't get the sidebar to shift down off it's right side.

Probably some conflicting CSS in there that I don't know of.

Chilifrei64

I would think that this shouldnt be too difficult to accomplish.. it should follow roughly the same concept of integrating it into wordpress. I too had many css conflicts while trying to integrate mine into wordpress but all went well once i discovered the "float" option. I may have some time later tonight to take a look at it .. right now I am getting ready to tear up my backyard:-/

Chilifrei64

Well here is something that I literally threw together(and you will see what I mean when you click on the link)
http://beta.chilifrei.net/sbzenphoto

In short, what I did was in the zen.css I created div id called nav and added
float: right;
padding-left: 10px;
width: 170px;
margin: 20px auto;
background: #fff;
padding: 20px 30px 70px;

Then I hacked it into the theme file.. Place your sidebar code between the body and main div in each template (index.php, image.php and album.php) file.
I would imagine you could create a function to display the sidebar and include it in the zproot index.php like how zp/wp integration does it.. I just hacked this together real quick..
hope this is a good start..

Chilifrei64

bah!!!.. I hate css.. view it in IE, it doesnt show up right in firefox.. but hopefully you get the idea..

sshepherd

Yeah, that looks really close to how I'd like to have mine, except I'd like to to not move when the browser is re-sized smaller.

Chilifrei64

Alright..I went a little farther and this is what I came up with

I the zen.css
add this to body
width:850px;

add this to #main
float: left;

Create a new id called #nav
/*sidebar
-----------------------------------*/
#nav {
float: right;
text-align: left;
width: 170px;
margin: 20px auto;
background: #fff;
border-top: 1px solid #E6E6DF;
border-right: 1px solid #E6E6DF;
border-bottom: 5px solid #E6E6DF;
border-left: 1px solid #E6E6DF;
padding-bottom: 15px;
}

Place your sidebar code between the body and main div, in the nav div in each template (index.php, image.php and album.php) file.

Reclick the link i posted above to see how it changed..
Really.. in all honesty.. I really dont know css real well and I am just using dreamweaver to edit the css file and I am just trying one after another to try to get it work..
and this time it works in both firefox and IE(yay!!)

sshepherd

Ok, after a bit of modification that's working good. When resizing my browser however, the sidebar gets pushed down under the content, If I could get it to be fixed permantly and not budge when the browser squeezes it, that'd be perfect.

Chilifrei64

What browser are you viewing my link at.. I am using IE and Firefox and it is not moving...?

ravi

You can use the CSS element — `position: fixed;`