7 replies to this topic

[Evelyn Alba]

Hi,

I've used the tabber plugin a lot without any issues. This time I'm working with a theme from Elegant Themes and using the tabber widget in a sidebar. The tabs are lined up vertically. I;ve disabled the very few plugins in use, have twicked the css but nothing has workd. Any suggestions to help me?  Thanks.

Site http://caribbeanbeachforsale.com/

Attached Thumbnails

• 

[Elise Alley]

Hi Evelyn,

Looking at the screenshot, it appears as if the tab widths are too wide, which is putting them on their own line.  The site you linked to is behind a maintenance page.  If you can send login information, I can take a look.  You can pm me the information or email it to me at elise@ithemes.com.  Please include a link to this post so I know what it's in regards to.

Thanks,

Elise

[Elise Alley]

Hi Evelyn,

It looks like part of the issue is the width of the sidebar you have the Tabber Widgets in.  You can add this code to the bottom of your stylesheet (Appearance > Editor):

.tabber-widget-tabs li {
display: inline-block;
width: 80px;
}

That will make the tabs smaller, but only the first two will appear on the top line as there isn't enough space.  You can widen the Tabber Widget container of course, but that pushes the content out of the sidebar.  When I made the width in the code above 70px instead of 80px, that puts them all on one line, but also makes the box they're in too small for the "Description" tab.

If you choose to make the width 70px, you can try adding this code to the bottom of your stylesheet as well:

.tabber-widget-tabs li a {
text-align: center;
padding-left: 3px !important;
}

Together, those will work.  The word "Description" doesn't look perfectly centered, but unless you're staring and looking at that (like I was ), I'm not sure anyone else would notice.  

Give that a try and then let us know if you have any additional questions.

Thanks,

Elise

[Evelyn Alba]

Elise,

I tried it. Placed your code in the tabber css, in the parent theme css. Reduced it to 65 px; reduced the tab titles but no change at all.

[Elise Alley]

Hi Evelyn,

I'll go back in and take another look.  Looks like you're making changes right now, so I wanted to make sure you knew I was in there, so we're not making changes at the same time.

Thanks,

Elise

[Elise Alley]

Hi Evelyn,

I add this to the stylesheet (Appearance > Editor):

.tabber-widget-basic-dark ul.tabber-widget-tabs li {
float: none !important;
}

That seems to have taken care of the issue.

Let me know if you have any other questions.

Thanks,

Elise

[Evelyn Alba]

Wow! I owe you one. Thanks!!!

[Elise Alley]

Happy to have helped, Evelyn!  Let us know if you have any additional questions.

Thanks,

Elise