Fork me on GitHub
Please upgrade to 2.1.x here. The 2.0 branch is no longer being updated.
Critical: Update to 2.1.8, released 15 Jan.

How difficult is it to put a frame around the content in a custom theme.

edited December 2011 in Vanilla 2.0 Help

Basically, I'd like to put a background image around the forum, so that the look of my site is completely consistent no matter if a user jumps from the wordpress part to the vanilla part. The VanillaPress 2010 theme does this, but I'm not sure how.

Best Answer

  • ToddTodd Chief Product Officer Vanilla Staff
    edited December 2011 Answer ✓

    If you are theming and aren't using Firebug/Chrome you are giving yourself a serious headache. We do all of our css changes using the following technique:

    1. Open firebug.
    2. Click the select in page element.
    3. Select the element you want to change.
    4. Look at the Style tab in firebug.
    5. Go in and edit the style in real time to see what does and doesn't work.
    6. Once you are ready then cut and paste the css into your custom.css.

    Knowing how to do this makes things 1032% easier I promise you. It's the secret that all designers use. If you know a designer that hasn't told you about doing this then you need to smack that smug bastard in the jim jams.

    Another tip I can offer you is that sometimes Vanilla's default theme over cascades some rules. So you think you are setting things correctly, but the default still takes precedence. Try putting !Important after your rule.


  • ToddTodd Chief Product Officer Vanilla Staff

    It's very easy to theme Vanilla. Instead of having a header.php and footer.php like in Wordpress you have a default.master.php or default.master.tpl that does both.

    Check out the theming quick start for more information.

  • Ok, I thought I had this figured out, but it's not working. Can I do different background images for two different div elements, using custom.css?

    I've got the #Frame div to correctly display the background image that I want surrounding the forum, but now I want the Body div to have a plain white background. I've tried setting background: #ffffff and I've also tried setting a white background image. Neither worked. Is this even possible?

    I'm testing the theme at

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator


    I think this is controlled by DataList

    .DataList .Item {
    background-color: #FFFFFF;


    I wanted to do something similar, and found this here:

    which shows how to differentiate the comment backgrounds of alternating comments, using

    .DataList .Alt {
    background-color: #FAFAFA;

    I tried it in the Vanilla festive theme, which has a background image, and it works.

  • 422422 Developer MVP
    edited December 2011

    Plus you can add new wrap elements, in default_master.php then control them with your css and as todd says, without firebug its an absolute no go.

    Be careful with id and classes tho, as these can also be trigger elements within javascript. Oh and ids and classes are case sensitive.. Menu menu ... Etc

    422 Real Estate Australia , now open Check it out

  • Firebug helped a lot guys, thanks. There's one thing that I can't track down, and I'd really appreciate it if someone could take a look for me. After making all the changes I wanted, the textarea is shrunk and aligned to the right, and I don't know why. As far as I remember, I've edited nothing but custom.css and default_master.php.

  • edited December 2011

    Fixed. Was missing a closing </div>. Kudos to those of you who make a profession out of this. I have a bruised forehead. Thanks again for all the help!

  • ToddTodd Chief Product Officer Vanilla Staff

    Awesome work. Css ain't easy and is in many ways broken so kudos to you too.

Sign In or Register to comment.