Please upgrade here. These earlier versions are no longer being updated and have security issues.

Developing a new theme using Twitter Bootstrap

raxdyraxdy New
edited January 2013 in Vanilla 2.0 - 2.8

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?

Comments

  • 422422 Developer MVP

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

    UnderDog
  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited January 2013

    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.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

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

Sign In or Register to comment.