Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

edited February 2012 in Vanilla 2.0 - 2.8

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?

Best Answer

  • whu606whu606 MVP
    edited February 2012 Answer ✓

    @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

Answers

  • whu606whu606 MVP
    edited February 2012 Answer ✓

    @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

  • Thanks @whu606

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

  • @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.

  • Good advice @whu606

    There was an error rendering this rich post.

  • 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?

  • 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.

    There was an error rendering this rich post.

  • 422422 MVP
    edited February 2012

    Will create a new thread, with sample theme.

    See it here

    There was an error rendering this rich post.

  • whu606whu606 MVP
    edited February 2012

    @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!

Sign In or Register to comment.