1. REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Add CSS to the item tabs (the small area you click on to change tabs)

Discussion in 'Showcase Closed Suggestions' started by mouth, Feb 2, 2013.

  1. mouth

    mouth Member CAS Premium EMS Early Adopter RMS Premium SC Premium UBS Premium Sportsbook

    .... so that they can be styled separately, eg. coloured backgrounds on the tab titles, etc.
     
  2. Bob

    Bob Developer Staff Member

    I can't say Yes or No until I research it, but will look into it. If someone else wants to do the R&D, thats fine with me. They can just post the howto and I will implement it after testing to make sure it doesn't effect anything else.
     
  3. mouth

    mouth Member CAS Premium EMS Early Adopter RMS Premium SC Premium UBS Premium Sportsbook

    Yes, please. Bueller, Bueller, Bueller ... anyone? Bueller? :)
     
    Bob likes this.
  4. Bob

    Bob Developer Staff Member

    @mouth is this for the ITEM page only or for ALL tabs throughout showcase ie, index page, category pages, member pages.
     
  5. mouth

    mouth Member CAS Premium EMS Early Adopter RMS Premium SC Premium UBS Premium Sportsbook

  6. Bob

    Bob Developer Staff Member

    OK, those are covered now. I'll do sorting tabs in a future version.

    the New classes are:

    scTab1
    scTab2
    scTab3
    scTab4
    scTab5
    scTabImages
    scTabField-{$fieldId} (This is for the new custom field tabs)
    scTabReview
    scTabDiscussion
     
  7. mouth

    mouth Member CAS Premium EMS Early Adopter RMS Premium SC Premium UBS Premium Sportsbook

    Hi Bob,
    Tried to implement this, but not sure how to do it.
    Could you provide an example?
     
  8. Bob

    Bob Developer Staff Member

    If you want to style the First Tab on an item, you use the class .scTab1
    HTML:
    .scTab1
    {
    color: red;
    }
    These are unique to showcase and only apply to the showcase_item template, so you don't need to join other class names
     
    mouth likes this.
  9. mouth

    mouth Member CAS Premium EMS Early Adopter RMS Premium SC Premium UBS Premium Sportsbook

  10. Bob

    Bob Developer Staff Member

    You forgot to add a (since its a link) to the CSS class.

    This will make the ACTIVE tab text color red. (need to use !important on it)
    HTML:
    .showcaseTabs li.active a {
    
    color: red !important;
    }
    This will make the Tab 1 text red all the time. (need to use !important on it)
    HTML:
    .scTab1 a
    {
    color: red !important;
    }
     
  11. clove

    clove Member Showcase

    Hi Bob,

    How about if I want the whole tab color and not only the text to have different color? How can I do that? Thanks!
     
  12. Bob

    Bob Developer Staff Member

    Same as above, just a different element of the class

    color = text color.

    for the tab itself you'll need to change:
    background-color
    border

    HTML:
    .showcaseTabs li.active a
    {
         background-color: red !important;
    }
    
    .scTab1 a
    {
    background-color: red !important;
    }
     
    clove likes this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.