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.

Bootstrap Responsive Design

I will like to add bootstrap responsive design to my vanilla 2.3.1 forum so that it will be responsive across all devices. I know how to do it if I am to hard code from scratch but for vanilla which uses smarty, I don't know. I will like to have a guide on how to do it.



  • Options

    will @vrijvlinder be of help here?

  • Options

    @Carlo_13 it's not going to work for me becuase I am building my own theme from scratch.

    What I really want is how I can add them to my source code. I have not been able to get this online.

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    @haliaeetusvocifer said:
    @Carlo_13 it's not going to work for me becuase I am building my own theme from scratch.

    You should be quite careful on how much work you invest: "from scratch" is the wrong way to go. The problem with building from scratch is that you most probably will not be able to update your forum any more after you did something like that.

    You can read some of the documentation of how to build a custom script:

    The genius in @Kasper's Bootstrap adoption is that it doesn't changes the css class names which are used in Vanilla and doesn't require any html changes beyond what could be done in the default.master.tpl. This way, his theme works with almost all plugins.
    Vanilla has a (php) class which purpose is to write html form elements. If you think you need different elements for forms or that they must contain some special css classes, you would have to re-write a complete (and complex) php class. Obviously that is the wrong way to go.

    And as Kasper has proven, it is not needed.

    I bet at least 80% of what you need can be solved with css alone. For the rest you can ask here. With the help of "ThemeHooks" - Vanilla speak - you can change almost everything else. And if even that is not enough you will at the end be able to override views, but for the sake of compatibility, you should avoid that.

    Sorry if this sounds harsh and it really(!) should be no offense, but if you "only" know bootstrap and not css, you will not be able to succeed.
    Starting with Kasper's Bootstrap theme might be a helpful way to start.

    Please don't hesitate to ask questions like "I want info this & that before/behind somewhere..." or "I really need that element to be enclosed in an extra div" or "Can I add a class to this element" and I promise you will get an understanding of how to theme Vanilla very quickly once you get an understanding of what an MVC framework is and how that structure applies to Vanilla.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    As long as you stick with the same vanilla classes and Ids , you can build a theme from scratch. I suggest you study a theme or two and emulate the structure. I have made some 14 themes from scratch but used the vanilla structure as a base.

  • Options

    @R_J I tried installing the boostrap theme on my live environment but it's not rendering fine. I read the readme file and it says I have to install node and npm first. My issue is I am working in my live environment. How do I install node and npm?

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    You should definitely set up a development installation. There is a plugin by hgtonight which creates sample data for a forum so that you have something to look when doing the styling.

    Info about how you can install node.js and npm can be found on the respective homepages.

Sign In or Register to comment.