[Plugin: Tabber Tabs Widget] Tabs move when clicked

  • Just installed and loving the possibilities.

    See on this page:

    https://primalhealth.co/food

    Click on ‘Recent’ Popular’ or ‘keywords’ and you will see that the tab to the left of it moves to the left.

    The owner of theme I bought helped me with another issue prior where all the tabs were left justified so he got me to add the margin-left: 13px; as below:

    .style1 ul.tabbernav li a { /* inactive tabs */
background-color:#fff;
border:1px solid #ccc;
color:#666769;
font-size:11px;
padding:5px;
font-weight: bold;
}
.style1 ul.tabbernav li.tabberactive a{ /* active tab */
background-color:#666769;
border:1px solid #666769;
color:white;
font-size:11px;
padding:5px;
margin-left: 13px;
}

    If I put the same margin code at the bottom of both the active and inactive tab areas, it places a 13px between each tab. I prefer the way it is now close to each other, but 13px from the left so it looks lfush with the edge of where the image starts. Is this possible?

    https://www.ads-software.com/extend/plugins/tabber-tabs-widget/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Steve Bruner

    (@sbruner)

    @brazmus– Try removing the maring-left:13px rule, and try adding this:

    .style1 ul.tabbernav {
margin-left: 18px;
}
    Thread Starter brazmus

    (@brazmus)

    Hi @sbruner

    Didn’t work so either I didnt put it in the right spot or it’s the wrong code. See what I’ve done:

    /********************************************************************************
    Style 1
    ********************************************************************************/
    /*————————————————–
    .tabber = before the tabber interface is set up
    .tabberlive = after the tabber interface is set up
    ————————————————–*/
    .style1 {
    background: #D6D6D8;
    }
    .tabberlive.style1 {
    padding:15px 0 3px;
    }

    /*————————————————–
    ul.tabbernav = the tab navigation list
    li.tabberactive = the active tab
    ————————————————–*/
    .style1 ul.tabbernav {
    margin-left: 18px;
    margin:0;
    padding: 1px 0;
    font: bold 12px; /* Verdana, sans-serif*/
    }
    *html .style1 ul.tabbernav{ /* ie6 only */
    padding: 2px 0;
    }
    *+html .style1 ul.tabbernav{ /* ie7 only */
    padding: 2px 0;
    }
    .style1 ul.tabbernav li {
    list-style: none;
    margin: 0;
    display: inline;
    }
    .style1 ul.tabbernav li a { /* inactive tabs */
    background-color:#fff;
    border:1px solid #ccc;
    color:#666769;
    font-size:11px;
    padding:5px;
    font-weight: bold;
    }
    .style1 ul.tabbernav li.tabberactive a{ /* active tab */
    background-color:#666769;
    border:1px solid #666769;
    color:white;
    font-size:11px;
    padding:5px;
    }
    .style1 ul.tabbernav a:hover {
    background:#666769;
    text-decoration:none;
    color:#fff;
    }
    .style1 ul.tabbernav {
    margin:0 5px !important;
    padding: 3px 0 0 5px !important;
    font: bold 12px Verdana, sans-serif;
    }

    /*————————————————–
    .tabbertab = the tab content
    Add style only after the tabber interface is set up (.tabberlive)
    ————————————————–*/
    .style1.tabberlive .tabbertab {
    background:none repeat scroll 0 0 #FFFFFF;
    margin:10px;
    padding:10px;
    border: 1px solid #CCCCCC;
    }

    /* Example of using an ID to set different styles for the tabs on the page */
    .style1.tabberlive#tab1 {
    }
    .style1.tabberlive#tab2 {
    }
    .style1.tabberlive#tab2 .tabbertab {
    height:200px;
    overflow:auto;
    }

    .style1 .tablist {
    font-size:.8em;
    }

    Plugin Author Steve Bruner

    (@sbruner)

    @brazmus– It’s not very good practice to edit plugins. If we push a new version, all your changes will be lost.

    It’s better to do this in your theme’s STYLE.CSS file:
    -open your STYLE.CSS file
    -add this to the bottom:

    .style1 ul.tabbernav {
    margin-left: 18px !important;
}

    Save… that’s it!

    Thread Starter brazmus

    (@brazmus)

    Yep that did it mate. The theme has a custom css section on the dashboard. Just popped it in there and presto it worked. Yes just discovered that problem with I upgraded for the first time and a lot of the changes to the theme were lost. WordPress newbie ?? I’ll get there.

    Thanks for your help.

    I just installed your widget in Atahualpa 3.7.3 and I’m having an issue with the tabs jumping all over the place when hovering over them to click on them. https://www.mountainstreamgroup.com Any ideas what’s causing this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: Tabber Tabs Widget] Tabs move when clicked’ is closed to new replies.