HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to go about Editing the Default Theme

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited September 2013 in Tutorials

If you just started with Vanilla it is likely you are using the Vanilla Default theme. Because this is the default theme, it calls the main style.css which resides in the dashboard/design folder. DO NOT EDIT THAT .

You must create a design folder if there is not one, and inside that one you must create a custom.css file in which you will be putting all of the edits you will be doing to the theme from now on. In essence you will be creating a new or modified Default theme.

The reason for not editing the one in the Dashboard/design folder is obvious to most people in the know, but in case you did not know this, DO NOT EDIT THE MAIN STYLE.CSS doing so will create problems for you in case you want to use other themes. So please create a custom.css file and edit that to your hearts content.

The new file will be empty so you need to fill it with your edits , where to find edits? Use a Web Inspector Like Firebug to help you find the areas you wish to change and then change them inside the web inspector, once you are happy with the changes, copy that css code block into the custom.css you created .

The best way is to copy the code as you edit into a notepad or text editor then copy that into your custom.css file. The important thing is that now you have started a new theme :)

Your best friend here is the web inspector you use so choose one that is easy to use and shows you what you need and is capable of being edited live. There are many discussions covering this so you will not be short of resources.

The default theme may not have a default.master.php in the views folder if you wish to edit the view/layout or content, you might have to copy the main one and create a new file to put in the default theme folder. The file may be a default.master.tpl if you use the beta versions of Vanilla.

You should download several themes to study their construction and help you edit your own more effectively.


  • Options

    I agree the style.css should not be edited. But in my opinion you shouldn't mess with the default theme at all, so you can switch to the pristine default theme when debugging problems in a very easy way. Just go to default theme.

    If you make "copy" as explained in the following link you can create a custom.css, add themehooks, add defaultmaster.tpl or default.master.php in your new theme directory.

    fall back.

    I stand by the instructions here.....


    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Options
    TamaTama United Kingdom ✭✭✭

    I've split the style into different files here: https://github.com/Tama63/VanillaSass/tree/master/includes

    There was an error rendering this rich post.

Sign In or Register to comment.