WordPress.org

1. brazmus
   Member
   Posted 1 year ago #
   

   Just installed and loving the possibilities.

   See on this page:

   http://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?

   http://wordpress.org/extend/plugins/tabber-tabs-widget/

2. sbruner
   Member
   Plugin Author
   Posted 1 year ago #
   

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

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

3. brazmus
   Member
   Posted 1 year ago #
   

   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;
   }

4. sbruner
   Member
   Plugin Author
   Posted 1 year ago #
   

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

5. brazmus
   Member
   Posted 1 year ago #
   

   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.

6. MountainStream
   Member
   Posted 1 year ago #
   

   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. http://www.mountainstreamgroup.com Any ideas what's causing this?

Topic Closed

This topic has been closed to new replies.