Where is the vanilla.css (default theme) file in the new build?

ryanlloyd

I have been looking for the css file so I can edit the colors of the default theme, but it is no where to be seen!

Where is it?

whu606

@ryanlloyd

For reference it is in applications/design/style.css

However, you shouldn't edit core files, otherwise every Vanilla update risks overwriting your changes.

The correct route is to create your own theme, with a custom.css file to which you add any changes you want.

Rules in your theme's custom.css usually override any other css rules, so the custom.css file only has to have rules for things you want to change, whilst the core Vanilla css file sorts out the rest.

See here for how to set a theme up: http://vanillaforums.org/docs/themequickstart

whu606

@ryanlloyd

For reference it is in applications/design/style.css

However, you shouldn't edit core files, otherwise every Vanilla update risks overwriting your changes.

The correct route is to create your own theme, with a custom.css file to which you add any changes you want.

Rules in your theme's custom.css usually override any other css rules, so the custom.css file only has to have rules for things you want to change, whilst the core Vanilla css file sorts out the rest.

See here for how to set a theme up: http://vanillaforums.org/docs/themequickstart

ryanlloyd

Thanks @whu606

I like everything the way it is except I want the links and background from blue to green!

whu606

@ryanlloyd

No problem.

Obviously, you can edit the core files, but it is worth taking the small trouble to organise a theme for your forum.

You probably already know about it, but just in case, when I started changing the theme someone put me on to Firebug in Firefox, which allows you to see exactly what rule you need to change for any element in Vanilla, by inspecting the code on the page.

422

Good advice @whu606

ryanlloyd

I am a noob when it comes to creating themes, I have created a custom.css file within the default files it asks to duplicate but I still don't have all the styles the current default theme has! Where do I get to them so I can duplicate it?

422

Copy default theme folder to desktop.

Rename it Dave for example.

Then redo the about.php file within that folder.

Upload.

Dashboard > select Dave as new theme.

In dave folder > design

Create new file called custom.css

Add new css rules to this file.

Save.

Refresh forum.

New styles change as you make changes.

Vanilla still loads style.css but also loads custom.css automagically.

422

Will create a new thread, with sample theme.

See it here

whu606

@ryanlloyd

Not wishing to go into competition with @422, who is a professional, whilst I am a hobbyist, but if you want to you can download this theme:

http://vanillaforums.org/addon/annotated_css-theme

I made it after I had I had learned with help from users on here (including @422) how to make a theme, and thought about what I wished had been there for me.

I've annotated the custom.css file so it tries to explain each rule and what it affects.

The idea to get clear in your head is that when you make a theme you don't edit an existing rule in a file, you create a new rule in the custom.css file, which then (normally) takes precedence.

So you use Firebug (or similar) to find the class you want to affect on a page, and write a rule for that class in your custom.css, which will override the existing rule.

If you don't already have one, set up a local server on your PC using something like XAMPP and you can play to your heart's content.

Enjoy!