Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Fixed width and Vanilla 1.0

edited January 2008 in Vanilla 1.0 Help
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


  • Options
    lechlech Chicagoland
    margin: 0 auto 0 auto; for the main container(s) you want floated center.
  • Options
    edited May 2006
    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;
    background:#ccc url('panelfade.gif') top left repeat-y;

    #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.
  • Options
    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; }
This discussion has been closed.