Add Color to Tabs

subdreamer

This looks like something I could use, thanks for that! Now, before I try it I would like to make a small feature request: have colored tabs or have the tabs change color on hover so it reflect the main/dominant "theme" color. This will help better identify the color scheme as the theme names are not very descriptive. Again, thank you so much for making this. You beat me to it!

firstcomment

jackmaessen

in your file switchlayout.js add these lines:

$(document).ready(function() {
    $("#layout li a").bind("click", function(){
        $("#layout li a").removeClass("clickedlayout"); // remove the class
        $(this).addClass("clickedlayout"); // add the class only for actually clicked element
    });
});

In your file switchlayout.css add these lines:

a.clickedlayout {
    background-color: #428bca; /* change this color to your needs */
    color: #f6f6f6; /* change this color to your needs */
}

NOTE: this solution works clientside and only on the same page. If you hit a topic an look back to the menu, you will see that the active layout is not highlighted anymore.

jackmaessen

Found a solution for the problem. After refresh, the added class is still active.
Your switchlayout.js:

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;
         });
         /* store active layout */
         if(localStorage.saveActive) {
          $('#layout li a[data-id="'+localStorage.saveActive+'"]').addClass('clickedlayout');    
         }
         $("#layout li a").click(function(e){
           e.preventDefault();
           $("#layout li a").removeClass("clickedlayout"); // Remove all highlights
           $(this).addClass("clickedlayout"); // Add the class only for actually clicked element
           localStorage.saveActive = $(this).data('id');
         });

   });

In your default.php you have to add a data-id to the anchors like this:

    <li><a data-id="default" href="#" rel="/themes/bootstrap/design/style.css">Default style</a></li>
    <li><a data-id="bootstrap" href="#" rel="/themes/bootstrap/design/custom_bootstrap.css">Bootstrap</a></li>
    <li><a data-id="cerulean" href="#" rel="/themes/bootstrap/design/custom_cerulean.css">Cerulean</a></li>
    <li><a data-id="cosmo" href="#" rel="/themes/bootstrap/design/custom_cosmo.css">Cosmo</a></li>
    <li><a data-id="cyborg" href="#" rel="/themes/bootstrap/design/custom_cyborg.css">Cyborg</a></li>
    <li><a data-id="darkly" href="#" rel="/themes/bootstrap/design/custom_darkly.css">Darkly</a></li>
    <li><a data-id="flatty" href="#" rel="/themes/bootstrap/design/custom_flatly.css">Flatty</a></li>
     <!-- and so on -->

Result: when you click on a layout, the background color changes and stays unchanged even with a refresh or visiting other links on the forum

subdreamer

Thanks, @jackmaessen! I will give this a try sometime tomorrow and report back. Will you implement this into the plugin by any chance?

jackmaessen

Plugin updated version 1.1 with original colors of the layout in the menu dropdown

subdreamer

@jackmaessen said:
Plugin updated version 1.1 with original colors of the layout in the menu dropdown

Why not rename BootstrapThemeSwitchLayout to "Bootstrap Layout Switcher"? It might also be nice if the text, "Switch Theme Layout" could be shortened to just "Switch Layout" (or "Change Colors" or "Change Style"). Also, I think the "Switch Theme Layout" text should be place in the gear (Account Options). Perhaps have a plugin options page so users can choose the placement of the layout switcher?

Now the plugin works fine. I'd love to have the color change on mouse hover but it works fine as is. Thank you for making this plugin. I look forward to hear from you. Keep up the great work!

jackmaessen

I'd love to have the color change on mouse hover but it works fine as is.

You mean when you hover over Switch Theme Layout text? The background-color should be changed the same as the links below of it?