Fixed width and Vanilla 1.0

mtm

First I would like to say thank you to everyone here. This is a great program and I learned a lot about it reading the forum. My first question is how can I fix the width of the entire layout? I have been able to fix the width to the body but the search and sign in is outside the width that I set. My second question is after fixing the width how can I center it on the page? Thank you very much for your help! Mike

lech

margin: 0 auto 0 auto; for the main container(s) you want floated center.

jakob_r

yep, as lech said and add a fixed width to the body tag, a different background colour to the background and give #Body a background-color. Fo example:

body {
margin:0 auto;
padding:0px;
background:#ccc url('panelfade.gif') top left repeat-y;
width:750px;}

#Body { background:#fff; }

To position the signin correctly, add width:750px; and margin:0 auto; to #Session and take out the entry right:18px; which is forcing it to that position from the right-hand edge.

If you use the web-developer taskbar for firefox browser, you can display the ID and class info for the individual page elements using Information > Display Id & Class Details or Information > Display Element Information. Using Edit CSS you can try out the changes to achieve what you want.

osid

Hello, I am also trying to alter the width of the forum, in particular the side panel. I have looked through vanilla.css and changed what I could see (including the image widths) but nothing has changed. Here is the css, what else do I need to do to make the side panel 100px wide? /* Panel.. */ #Panel { width:100px; margin-left:18px; float:left; background:url('panelfadetop.gif') top right no-repeat; display: inline; } #Panel * { margin:0px; padding:0px; list-style:none; } #Panel h1 { margin-top:20px; font-size:14px; } #Panel h1 a { color:#c00; font-size:14px; } #Panel h1 a em { font-style: normal; text-decoration: underline; color:#a00; } #Panel h1 a:hover { color:#f00; } #Panel h2 { color:#000; font-size:11px; border-bottom:1px solid #ccc; margin:10px 0px 3px 0px; padding:0px; text-indent: 4px; width:100px; } #Panel ul ul, #Panel ul p, #Panel select { margin:0px 4px; } #Panel ul, #Panel p { color:#335eb7; font-size:11px; } #Panel ul ul { color:#f00; font-size:10px; } #Panel select { width:100px; margin-top:3px; } #Panel ul ul li { width:100px; margin-bottom:3px; overflow: hidden; } #Panel ul ul li a { font-size:11px; display:block; width:100%; color:#335eb7; text-decoration:none; } #Panel ul ul li a span { color: #c00; font-size: 10px; padding-left: 4px; } #Panel ul ul li a:hover { background-color:#ffc; }