WordPress.org

Support

Support » Plugins and Hacks » Post UI Tabs » [Resolved] ThemesKingdom CSS Breaking Tabs

[Resolved] ThemesKingdom CSS Breaking Tabs

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Mark / t31os

    @t31os_

    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.

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

    Plugin Author Mark / t31os

    @t31os_

    You’re welcome. 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] ThemesKingdom CSS Breaking Tabs’ is closed to new replies.
Skip to toolbar