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

Chris_Withers

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.

Todd

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.

Todd

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.

Chris_Withers

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 http://www.vancouversouthsiders.ca/forum2/

whu606

Chris

I think this is controlled by DataList

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

}

I wanted to do something similar, and found this here: vanillaforums.org/discussion/17807

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.

422

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

Chris_Withers

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.

http://www.vancouversouthsiders.com/forum2/

Chris_Withers

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!

Todd

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