Support » Plugin: WP UI - Tabs, Accordions, Sliders » bring tabs closer together

  • Resolved gdisalvo



    It looks like a lot of questions posted here but not a lot of responses. I hope someone can respond to this easy question.

    This is a great plug and works fine. I am using the UI-green CSS and the tab function in visual editor.

    I have created 9 tabs with contents and each tab work fine. However, one tab is located on the second line as a overrun. Is there a way to move this single tab entry onthe second line to the first line.

    I tried to use the CSS and modify it but it is not working or I cannot find the location.

    I did have it working on a single line once but I forgot which area in the CSS I change to remove the padding or margin them over.

    Can someone explain which area in the CSS green will allow the tabs to shift to the left with a one line change or two? Thanks for reading

Viewing 3 replies - 1 through 3 (of 3 total)
  • Try this in
    .wpui-green .ui-tabsAdd
    the padding but don’t forget the !important this will override any other padding settings elsewhere
    padding: 0px !important;


    Thanks for the info. But this is already there. Is there another place you are talking about? Here is what I have:

    .wpui-green .ui-tabs {
    border-radius : 4px;
    -moz-border-radius : 4px;
    -webkit-border-radius : 4px;
    -o-border-radius : 4px;
    padding: 0px !important;

    I think it is more on the size of each tab like a margin that needs to be shorten by a 5px or something. I tried playing with this and is moving the panel (Shifting) not the tabs (shrinking).

    Thanks for the response.

    Well I looked at a quick fix option. someone in another posted mention to add a new style to the style sheet. Since I am running a child and it has its own style sheet, it seems safe on that account. I just need to watch the <DIV> tags in the visual editor. Since I have tables in this page, it may not be a problem.

    Added this:
    #specialtabs {
    overflow: visible;
    width: 98%;
    height: auto;
    valign= top;

    Then added :
    <div> tag before and </div> after the short codes.
    Worked for me – tabs are not closer but the sheet fits in the content window and the tabs are on one line. I hope I do not have more than 10 otherwise I back to two rows of horizontal tabs.

    I will close this post out as resolved.
    Thanks to all who read.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘bring tabs closer together’ is closed to new replies.