WordPress.org

Ready to get started?Download WordPress

Forums

Tabby Responsive Tabs
[resolved] Vertical Tabs (6 posts)

  1. Ramiz Murtaza
    Member
    Posted 2 months ago #

    How i can use this plugin for vertical tabs. . . .

    https://wordpress.org/plugins/tabby-responsive-tabs/

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 2 months ago #

    Tabby responsive tabs was not designed to provide vertical tabs, however I think it should be possible to do this with some custom CSS.

    I don't currently have a custom stylesheet to provide this but I may look into this for to a future version of the plugin or as part of an add-on if I ever had a specific requirement for this in one of my own projects or if someone commissioned the work.

  3. saltydogfishingcharters
    Member
    Posted 2 months ago #

    I made accordion menu because i couldn't make unlimited characters within each tab without it making two rows of tabs...

    Maybe you might like this CSS design. I am back because when the page loads it loads with all tabs closed and would like it to open on tab one when page loads.

    .responsive-tabs .responsive-tabs__heading {
    display: none;
    }

    .responsive-tabs .responsive-tabs__list__item {
    display: inline;
    cursor:pointer;
    }

    .responsive-tabs-wrapper {
    clear: both;
    margin-bottom: 20px;
    zoom: 1;
    width: 550px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 115px;
    }

    .responsive-tabs-wrapper:before,
    .responsive-tabs-wrapper:after {
    content: "";
    display: table;
    }
    .responsive-tabs-wrapper:after {
    clear: both;
    }

    .responsive-tabs .responsive-tabs__heading:focus,
    .responsive-tabs .responsive-tabs__list__item:focus {
    outline: 1px solid transparent;
    }

    .responsive-tabs .responsive-tabs__heading--active:focus,
    .responsive-tabs .responsive-tabs__list__item--active:focus {
    outline: none;
    }

    .responsive-tabs .responsive-tabs__list {
    font-size: 18px;
    line-height: 18px;
    margin: 20px 0 10px 0;
    padding-bottom:0;
    }

    .responsive-tabs .responsive-tabs__list__item {
    border: 1px solid transparent;
    border-bottom: none;
    line-height: 1;
    margin: 0 14px 0 0;
    padding: 10px 20px;
    }

    .responsive-tabs .responsive-tabs__list__item:hover {
    color: #222;
    }

    .responsive-tabs .responsive-tabs__list__item--active,
    .responsive-tabs .responsive-tabs__list__item--active:hover {
    background: #fff;
    border-color: #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #606060;
    }

    .responsive-tabs .responsive-tabs__panel--closed-accordion-only {
    display: block;
    }

    /* --- ACCORDION --- */

    .responsive-tabs .responsive-tabs__list {
    display: none;
    }

    .responsive-tabs .responsive-tabs__panel--closed-accordion-only {
    display: none;
    }

    .responsive-tabs .responsive-tabs__heading {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 10px 0 10px 20px;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(0,0,0,.6);
    border-radius: 5px;
    font-family: 'Pieces of Eight';
    font-size: 22px;
    font-weight: normal;
    color: rgba(255,255,255,1);
    text-shadow: 2px 2px 2px rgba(0,0,0,1);
    text-align: center;
    }

    .responsive-tabs .responsive-tabs__heading:after {
    content:"";
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    height: 0;
    width: 0;
    }

    .responsive-tabs .responsive-tabs__heading:hover {
    background: rgba(0,0,0,.3);
    color: red;
    }

    .responsive-tabs .responsive-tabs__heading--active {
    background: rgba(0,0,0,.3);
    border-radius: 5px 5px 0px 0px;
    border-bottom:none;
    color: red;
    }

    .responsive-tabs .responsive-tabs__heading--active:hover {
    background: rgba(0,0,0,.3);
    color: red;
    }

    .responsive-tabs .responsive-tabs__heading--active:after {
    border-top: 0;
    top: 18px;
    }

    .responsive-tabs .responsive-tabs__panel {
    height: 350px;
    padding: 10px 0px 0px 0px;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(0,0,0,.6);
    border-radius:0px 0px 5px 5px;
    border-top: none;
    overflow: hidden;
    }

  4. saltydogfishingcharters
    Member
    Posted 2 months ago #

    Found the solution to my problem... Changed "display: none;" to "display: block;" and the first tab in accordion mode is opened by default. Example...

    .responsive-tabs .responsive-tabs__panel--closed-accordion-only {
    display: block;
    }

    All's good in my hood with Tabby. ;)

  5. ski4life
    Member
    Posted 2 weeks ago #

    Hi-
    I'm having a similar issue so I thought you might be able to help...
    I have a tab container which is I used the custom setting from the examples in wordpress http://www.artbeyondsight.org/dic/wp-admin/admin.php?page=shortcodes-ultimate-examples but the colors are now right- but how would i change the code to make the tabs vertical instead of horizontal?
    I tried it by adding in some suggestions here but it didn't do anything to the tabs
    [su_tabs class="my-custom-tabs"][su_tabs vertical="yes"]
    <style>
    .responsive-tabs .responsive-tabs__panel--closed-accordion-only {display: block;}
    .su-tabs.my-custom-tabs { background-color: #9999FF}
    .su-tabs.my-custom-tabs .su-tabs-nav span { font-size: 1.3em }
    .su-tabs.my-custom-tabs .su-tabs-nav span.su-tabs-current { background-color: #CCCCFF }
    .su-tabs.my-custom-tabs .su-tabs-pane {
    padding: 1em;
    font-size: 1.3em;
    background-color: #CCCCFF;
    }
    </style>

    What else should I do differently?

  6. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 2 weeks ago #

    ski4life, this is a resolved topic in the Tabby responsive tabs forum. It does not relate to your issue as you are not using Tabby Responsive Tabs.

    For assistance with your specific issue you should post your question as a new topic in the relevant forum for the plugin you are using.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.