HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Add Color to Tabs

This discussion is related to the BootstrapThemeSwitchLayout addon.
subdreamersubdreamer San Jose, CA
edited March 2016 in Feedback

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! =)



  • jackmaessenjackmaessen ✭✭✭
    edited March 2016

    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.

  • jackmaessenjackmaessen ✭✭✭
    edited March 2016

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

    if($.cookie("css")) {
       $(document).ready(function() {
             $("#layout li a").click(function() { 
                  $.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){
               $("#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

  • subdreamersubdreamer San Jose, CA

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

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

  • subdreamersubdreamer San Jose, CA

    @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! <3

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

Sign In or Register to comment.