WordPress.org

Ready to get started?Download WordPress

Forums

Post UI Tabs
[resolved] Need clear guide to using Custom CSS with Post UI Tabs (16 posts)

  1. jordanjpayne
    Member
    Posted 2 years ago #

    I've looked through the support here and there's only some vague clarification provided about where the styles are located but it would be great if someone could provide the steps to customizing the CSS start to finish. I've got my customized styles ready but I'm not quite sure about making it work with PUT.

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

  2. gnosis_wp
    Member
    Posted 1 year ago #

    Been using this plugin with:

    http://wordpress.org/extend/plugins/thethe-tabs-and-accordions/

    to enter custom css, but seems roundabout.

    What was your solution?

    Thanks!

  3. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    Sorry i wasn't around sooner to answer, if you want to provide your own CSS you're pretty much going to need to replicate what the jQuery UI theme CSS provides and then twiddle around with it(to make it your own). The easiest solution being to add your CSS to your theme's main stylesheet and also checking the *Disable Skins* option on the plugin's settings page.

    Having said that, the option to supply your own CSS was a bit of an afterthought(as were the two filters i provided in the plugin) and i think the support i added in wasn't done using the sanest of methods, so i'll try and provide something easier to use with a better example in the next update.

    UPDATE: Updated the plugin and provided an easier avenue to using your own stylesheet for tab styling, read below.

    Please see the FAQ section for the plugin with the heading "How do i include my own CSS in place of one of the jQuery UI themes?" for an easy example of using your own stylesheet with the plugin.

    Also marking this as resolved, please feel free to change the thread status if you still seek support.

  4. breeze76
    Member
    Posted 1 year ago #

    I am lost on this... I looked at the FAQ and I have added the code to my CSS style sheet, but it is not picking it up.

    I disable the the plugin stylesheet by: Enable this option if you want to define your own CSS for the tabs.

    Below is my coding:

    #tabs1-1, #tabs1-2, #tabs1-3
    {
    	line-height:20px;
    	font-size:12px;
    }
    
    #tabs1-1 a, #tabs1-2 a, #tabs1-3 a
    {
    	color:#4378A2;
    	font-weight:bold;
    }
    #tabs1-1 a:hover, #tabs1-2 a:hover, #tabs1-3 a:hover
    {
    	color:#FF9000;
    	font-weight:bold;
    }
    
    #tabs1-2 UL, #tabs1-3 UL
    {
    	border: none;margin-top:-2px;margin-bottom:4px;
    }
    
    #tabs1-2 UL LI, #tabs1-3 UL LI
    {
    	border: none; padding-bottom: 2px;padding-top: 3px;
    }
    
    #tabs ul li, #tabs1 ul li
    { line-height:16px; }

    Do I need to do something else so the plugin picks it up??

  5. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    Are you including that CSS in your theme's stylesheet or a separate file?

  6. breeze76
    Member
    Posted 1 year ago #

    It is in my theme's stylesheet. But if that is a problem, I can move it..

  7. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    I'm using a few CSS definitions(for tabs) in a child theme, that also worked just fine under the parent.

    Do you have firebug, are you sure it's not just a problem of CSS inheritance?

    Try adding !important to your CSS rules, if that resolves the issue, then we at least know it's just a case of other rules in your stylesheet getting preference over your new rules.

    Note: I think a few of your csss selectors may be a little off..

    #tabs1 ul li

    Should be..

    #tabs-1 ul li

    And likewise for other rules..

    Post UI Tabs uses the following format for each tab set..

    #tabs-n1 {}
    #tabs-n1-n2 {}

    Where n1 is the set of tabs(or instance) and n2 is the given tab in that set.

  8. breeze76
    Member
    Posted 1 year ago #

    Where would I put the !important at in the tabs code??

  9. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    I've updated my response above, could the issue be that some of your CSS selectors are incorrect?

    Example using !important definition though, if you want to test..

    #tabs-1 ul li { line-height:1.5em!important; }
  10. breeze76
    Member
    Posted 1 year ago #

    The code:

    #tabs-n1 {}
    #tabs-n1-n2 {}

    Where do I put that??

    Yes I do have firebug. What would I look for in it?

    Sorry for all the questions, I am not your average coder and am still trying to figure this out..

  11. breeze76
    Member
    Posted 1 year ago #

    Yes I do see a lot of inheritance. What do I do about it and is some of it supposed to be like that??

  12. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    If the issue is CSS rule importance, use the !important definition as i've shown above in the example.

    The issue could just be using the wrong selector though, your CSS should be using..

    #tabs-1

    not..

    #tabs1
  13. breeze76
    Member
    Posted 1 year ago #

    OK sorry for all this..

    #tabs-1-1, #tabs-1-2, #tabs-1-3{
    	line-height:20px;
    	font-size:12px;
    }

    I this correct format?? Is there a way to shorten it so I do not have to put down all the tabs I am using and will this carry over to any other instance where I use tabs?

    As for the !important, do I need to put it next each line in the code or is there a specific place that would maybe cover the whole tabs thing?

  14. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    Yes, you could target the classes that are attached to the tab elements instead and it would cover all sets of tabs.

    If you want to target the main tab container, as you're doing in your above CSS, use the ui-tabs class, eg.

    .ui-tabs { line-height:20px; }

    Or the tab buttons, for example.

    .ui-tabs-nav li { /* CSS here */ }

    Check the source of the page and you'll see the tab sets have various classes added to each of the elements that make up the tabs.

    Hope that helps.

  15. breeze76
    Member
    Posted 1 year ago #

    I noticed in the firebug, that it is pulling a lot of the styling from the jquery on most of the style coding... is that ok or do I need to do something to stop it so it will pull from mine?

  16. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    That's normal, unless you specifically want to define all the styling(that's alot of CSS to cover).

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.