WordPress.org

Ready to get started?Download WordPress

Forums

Post UI Tabs
[resolved] ThemesKingdom CSS Breaking Tabs (4 posts)

  1. SchoolNewsAssistant
    Member
    Posted 1 year ago #

    Hi,

    I'm trying to use this plugin with ThemesKingdom's theme Dreamy, but it looks like the theme CSS is breaking the tabs. Can you help?

    You can see the issue here: http://sunshine.schoolnewsassistant.com/tabbed-content-testing/

    Thanks for your time!
    Ashley

    http://wordpress.org/extend/plugins/put/

  2. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    Hi,

    Firstly you have an incorrect shortcode for the tabs included, which is outputting a paragraph with the raw(non-existant) shortcode.

    <p>[tabset]</p>

    There is no such shortcode in the Post UI Tabs plugin, remove that part from your test post/page and that'll alleviate the chunk of empty space above the tabs.

    Following on from that, there are a few conflicting style definitions if your theme's stylesheet, they are as follows.

    Line 2258

    .shortcodes ul li{
        float: left;
        color: #5D5D5D;
        font-size: 15px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 21px;
        padding: 0px 0 0 0px;
        margin: 0 0 12px 0;
        list-style-type: disc;
        width: 100%;
    }

    Line 2382

    .tk-preview li, .shortcodes li{
        float: left;
        width: 96%;
        color: #5D5D5D;
        font-size: 15px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 21px;
        padding: 2px 0 0 32px;
        margin: 0 0 12px 0;
        list-style: none;
    }

    Line 2817

    .contact-text p {
        float: left;
        width: 100%;
        color: #5d5d5d;
        font-size: 15px;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 21px;
        margin-bottom: 25px;
    }

    Line 2282

    .shortcodes p{
        margin: 10px 0!important;
        display: inline-block;
    }

    You can either modify those defintions directly or add some new ones to override the problem defitions, in either case a theme update would overwrite your changes/additions to the theme's stylesheet.

    I'll highlight the specific properties of the above style defintions that are causing a problem and you can choose how you want to implement changes or overrides to fix the problem.

    • .shortcodes ul li - the width property
    • .tk-preview li, .shortcodes li - the width property
    • .contact-text p - float and margin properties
    • .shortcodes p - the margin property

    The easy overrides to quickly sort this out without changing the existing CSS definitions would be to add the following to the bottom of the stylesheet.

    .ui-tabs ul li { width:auto!important; }
    .ui-tabs p { margin:0!important;float:none!important; }

    That should fix it for the most part, just bear in mind that a theme update will naturally wipe these changes(it is only two lines of code which you can add back as appropriate though).

    Of course, if you want to approach the problem another way(avoiding overrides), go for it.. :)

    Hope that helps.

  3. SchoolNewsAssistant
    Member
    Posted 1 year ago #

    It's working perfectly now. Thanks so much for the help!

  4. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    You're welcome. :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.