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

Style customization help

edited April 2008 in Vanilla 1.0 Help
Hello, I recently installed a Vanilla forum at http://www.captainoccam.com/forum/ . I’m working on creating a custom style for the default theme, and there’s still a lot more for me to do (especially with the colors), but by now you should be able to see what sort of thing I have in mind. I’d like for the “content” div to be a separate color from the rest of the page, with a border around it. On the main discussions page this looks fine, but if you go to some of the other pages such as http://www.captainoccam.com/forum/categories.php , the gray div box doesn’t extend all the way down the page. Is there something I can change in the theme to make this div always extend to the bottom of the page, regardless of how much space is taken up by the content in it?


  • edited March 2007
    For the category page, it's because the ol#Categories is floating. You just need to put it back in the document flow (or add something at the end of div#Content with a clear: both; rule).

    <div id="ContentBody"> <ol id="Categories"> ... </ol> <div style="clear: both;"/> </div>
  • It isn't just the categories page I'm thinking of, though. Even on pages where everything is part of the document flow, the content div box still doesn't extend much further down than the elements it contains. Another example of this is the search page: http://www.captainoccam.com/forum/search.php What can I do to make the content div extend all the way to the bottom of the search page also?
  • this is one of those things that is "a feature, not a bug." elements only extend as far as the content that is placed within them. there's ways to extend it with javascript and so on and so forth, but as for "pure" methods, i'm not sure of any. this is an issue i've run into many times, so i've learned to design along different lines of thought now.

    sorry that this isn't much help, if an "easy answer" exists to this, it'd be as welcome news here as any.
  • If I'm going to take Dinoboff's suggestion, what do I need to change in the CSS in order to accomplish this? Setting clear: both for the content div just moves the whole content box down the page, without changing its size.
  • edited March 2007
    use a pseudo tag tag:after { clear:both; content:''; display:block; }
  • You're saying I should put that in the CSS? I've tried that, and it doesn't do anything. Here's what my CSS for the contend div looks like with your suggestion: #Content { height: 100%; background-color:#DBDBDB; margin:0px 18px 10px 235px; padding: 18px; border-top: 1px solid #0E0E0E; border-right: 1px solid #0E0E0E; border-left: 1px solid #0E0E0E; border-bottom: 1px solid #0E0E0E; tag:after { clear:both; content:''; display:block; } } I've never used this kind of syntax at all before. Is that what you had in mind, or did I misinterpret your comment?
  • #AccountProfile:after, #AccountHistory:after { content:' '; display:block; clear:both; } try the above: in the profile page it should fix your problem.
  • Yeah, it does. Thanks. How do I fix the same problem on the categories page, though?
  • had the same problem as Agahnim. Thanks for the fix. Agahnim, I fixed the category page the same way, buy adding "CategoryPage:after" as well, the result being this: #AccountProfile:after, #AccountHistory:after, #CategoryPage:after { content:' '; display:block; clear:both; }
This discussion has been closed.