Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Please upgrade to 2.3 here. The 2.2 and earlier branches are no longer being updated.

Is it possible for users to choose a particular bootstrap theme?

This discussion is related to the Bootstrap addon.

If not, is it very hard to implement?

Comments

  • hgtonighthgtonight ∞ · New Moderator

    Yes you can do it. Bootstrap decides styles to load based on the configuration of theme options. You would need to change the configuration based on a user preference. I would suggest using the user meta convenience functions.

    1. Display a user visible GUI to select the theme
    2. Store the preference in the user's meta
    3. Look for the user meta preference and change the configuration option
    4. Relax.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • kopnakopna Coimbra Portugal ☯

    @hgtonight написал:
    Yes you can do it. Bootstrap decides styles to load based on the configuration of theme options. You would need to change the configuration based on a user preference. I would suggest using the user meta convenience functions.

    1. Display a user visible GUI to select the theme
    2. Store the preference in the user's meta
    3. Look for the user meta preference and change the configuration option
    4. Relax.

    Hello,
    I also interested in this issue. But I do not understand - how and where to make changes. I would appreciate if you make a little more detailed explanation. Thank you again. :)

  • noncenonce Necro-on Forensics

    you can use profile extender as the gui and as a medium to store the theme preference in the meta- give a choice specific bootstrap themes. Look for the user meta preference by reading the usermeta table and change the configuration option per user session.

    hgtonightvrijvlinder
  • i have made a "switchlayout" for users where they can choose one of the themeoptions from bootstrap. This is based on a cookie which will be stored.
    Script below stores a cookie to a tag which has the class "switchlayout".

      if($.cookie("css")) {
             $(".switchlayout").attr("href",$.cookie("css"));
          }
       $(document).ready(function() {
             $("#layout li a").click(function() { 
             $(".switchlayout").attr("href",$(this).attr('rel'));
             $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
             return false;
          });
       });
    

    The default style from bootstrap theme is style.css in folder themes/bootstrap/design/style.css
    To only this file, we add the class"switchlayout"

     public function base_beforeToString_handler($sender, $args) {
          $tags = $sender->tags();
          foreach ($tags as $key => $value) {
         // here we add a class to style.css in bootstrap design folder
          if (substr($value['href'], 0, 34) == '/themes/bootstrap/design/style.css') {
            $tags[$key]['class'] = 'switchlayout';
          }
          }
          $sender->tags($tags);
       }
    

    (Thanks to @R_J for this solution)

    Now in the default.master.tpl we add these links somewhere you want them to appear:

    <div class="dropdownlayout">
            <span class="switchtheme" style="color:red">Switch Theme Layout</span>
            <div class="dropdownlayout-content">
                <ul id="layout" class="PanelInfo">
    
                   <li><a href="#" rel="/themes/bootstrap/design/style.css">Default style</a></li>
                   <li><a href="#" rel="/themes/bootstrap/design/custom_bootstrap.css">Bootstrap</a></li>
                   <li><a href="#" rel="/themes/bootstrap/design/custom_cerulean.css">Cerulean</a></li>
                   <li><a href="#" rel="/themes/bootstrap/design/custom_cosmo.css">Cosmo</a></li>
                   <li><a href="#" rel="/themes/bootstrap/design/custom_cyborg.css">Cyborg</a></li>
                   <li><a href="#" rel="/themes/bootstrap/design/custom_darkly.css">Darkly</a></li>
                   <li><a href="#" rel="/themes/bootstrap/design/custom_flatly.css">Flatty</a></li>
                       <!-- and so on... -->
                </ul>
            </div>
            </div>
    

    The links are visible when you hover the Switch Theme Layout text. (in red in the navbar at the top)

    http://develop3.webprofis.nl/
    The plugin attached below: Enabe the plugin and put the links somewhere in your default.master.tpl

    Eclipsekopnasubdreamerhgtonight
  • kopnakopna Coimbra Portugal ☯

    Nice idea, thank you!
    One more, i would like to create their own plugins for Vanilla. Where can i find information about it. Sorry for off topic :)

    vrijvlinder
  • subdreamersubdreamer San Jose, CA

    That's pretty awesome, @jackmaessen! I hope @Kasper includes this as an option on the next update. I will give this a try sometime today and report back. Thanks everyone for all the help around this site! <3

  • jackmaessenjackmaessen ✭✭✭
    edited March 2016

    I have made a full plugin in which you can switch from theme layout

    subdreamer
  • Hey jack, what could be the problem , after activation i saw the link but when i click nada.

  • @maxyaeger Oke, so you do see the link. When you hover over the link, there should expand a dropdown with all the layout links. You cant see that dropdown menu?

  • yes i can see all including the dropdown but it doesn't activate. Ty

  • when you click on a layout, it should swap immediately to that style. But therefore, you have to allow that a cookie is stored on your computer. I dont know an other reason why it doesnt work. So check that storing a cookie is allowed in your broswer

  • @jackmaessen said:
    when you click on a layout, it should swap immediately to that style. But therefore, you have to allow that a cookie is stored on your computer. I dont know an other reason why it doesnt work. So check that storing a cookie is allowed in your broswer

    I can confim that it doesn't work in Version 2.1.11 (I know it's a outdated version). in Chrome Version 49.0.2623.110 m (64-bit). I see the dropdown, but nothing happens then click on a layout. I allow cookies :-)

  • Look into the source code of your website. 2 javascripts must be loaded into the head of your site like below:

    <script src="/plugins/BootstrapThemeSwitchLayout/js/jquery.cookie.js?v=1.1" type="text/javascript"></script>
      <script src="/plugins/BootstrapThemeSwitchLayout/js/switchlayout.js?v=1.1" type="text/javascript"></script>
    

    You can see them?

  • Hi.

    Wow, what a fast answer :-) I looks like both of the js-files is loaded on, then tracking in Chrome. Guess it's a problem with testing at dev-environment.

    To be honest, i did use my own plugin - but i really like you're solution, and will think about using it, in the future.

    jackmaessen
Sign In or Register to comment.