This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: ,

Tab Border and Color

  • Creator
    Topic
  • #18936
    sunday
    Participant

    I’d like to differentiate the look of the TABS from the rest of the page’s color and font, and assume that I can apply some custom CSS.

    I did see (and apply) the note about the background color.
    Would like the customer css to control the default color and font if possible. Borders would be nice too.

    A brown-nose btw:
    I recently upgraded to the newer version of Alyeska and appreciate the ease of installation and continued quality.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #18943
    Jason Bobich
    Keymaster

    Hi,

    I see we’ve chatted about CSS customizations in the past. — What kind of inspector are you using to help identify the changes you want to make? If this isn’t something you’ve dived into since my previous advice to you last year, I would suggest using the developer tools that are built into Google Chrome browser. I find these are the easiest to work with, and make locating CSS you want to override from your Custom CSS super easy.

    So, get your page up with the tabs the way you want. Then, Right Click > Inspect in your Chrome browser. What do you see that you could possibly override from your Custom CSS? See any CSS selectors that could be helpful as you click the HTML elements belonging to the tabs, and see what CSS is applied over in right the right CSS panel?

    #20490
    sunday
    Participant

    Hey Jason,

    Getting back to this late, too many projects!
    I do use the Inspect option in Chrome, and test changes. I figured out the rollover color.
    But for the life of me I cannot seem to find the CSS option for enabling a tab border or changing the default color of the ‘inactive’ tab (from white).

    Help appreciated, as always.

    #20493
    Jason Bobich
    Keymaster

    See where this gets you:

    .nav-tabs > li.active > a, 
    .nav-tabs > li.active > a:hover, 
    .nav-tabs > li.active > a:focus {
      background-color: #fff;
      border-top-color: #ddd;
      border-left-color: #ddd;
      border-right-color: #ddd;
    }
    .tb-tabs-framed .tab-content {
      background: #fff;
      border-color: #ddd;
    }

    Note that when you’re styling the active tab <a>, it’s important that you don’t style the bottom border color. This is why I have top, right, and left. If I were to use simply border-color, it’s going to screw up how the bottom of the tab blends with the tab content.

    #23638
    sunday
    Participant

    It’s been a great year since you replied! How about yours? 😉

    The above css code you gave (thx) works for changing the background of the open tab, and the background of the hovered tab color (when you change the #colors).

    Here’s the line I needed to add to change the background of the tabs that are just sitting there doing nothing.

    .nav-tabs>li>a {
    background-color: #EAE9E9;
    }

    (#color to taste)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.