Developing a new theme using Twitter Bootstrap

raxdy

Hey all! New to Vanilla Forums, but I've jumped right in with trying to develop a theme.
I'm running Version 2.0.18.4. I understand to edit any HTML you should first copy the views within "/applications/vanilla/views" and place them in my theme's views folder.

My question is, I'm trying to edit/change the html within the menu. By default, it is written ul id="Menu" and I want to change it to ul class="nav". Which file contains this html for me to edit?

422

one sneaky way is to addclass / toggleclass to add class to ul element ( defined ) using jquery

Kasper

Ran into the same obstacle when writing a Bootstrap theme for Vanilla back in April. What I ended up doing, was using LESS to add the Bootstrap classes to the Vanilla classes as mixins:

.Menu {
    .nav();
}

What I'm doing now in the dev build of my Bootstrap theme is use the SASS extend function like this:

.Menu {
    @extend .nav;
}

If you want to use jQuery instead, you can to so like this:

$(".Menu").toggleClass("Menu nav");

I can highly recommend the SASS approach as it's currently the middle ground between the somewhat heavy LESS solution and the bonky and rather slow jQuery solution. Directly editing the views is not a super good idea as it often causes problems later on.

raxdy

Thanks Kasper, I've been following your progress here lately. I will consider developing with SASS, not completely comfortable with it, but thanks! I appreciate the response.