Making tabs standout more

  • Resolved AJ Don

    (@cultural-keys)


    9 years, 2 months ago

    Visitors have been telling me it’s easy to miss the tabs I use within my pages, so I was wondering if there is a way to make them stand out more, such as bolding the tab headings or changing tab colors?

    I’m using the standard shortcode to create the tabs;

    [tabs]

[tab title="Program Content" start=open]

    Which obviously doesn’t have any options. So if anyone knows what I need to do to make these stand out a bit more, that would be awesome.

    What i have now can be seen here;

    https://www.ckmartialhearts.com/shaolin-temple-itinerary

    Thanks guys!

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    Hey,
    You can edit with this css:

    .nav-tabs>li>a {
    font-weight: 600;
    color: #000;
}

    Just replace with your own values and paste into your custom css box in Theme Options > Advanced Settings.
    Hope it helps!

    Hannah

    Thread Starter AJ Don

    (@cultural-keys)

    Thanks Hannah, that’s awesome!

    But, and I don’t mean to trouble you, is there anyway to make them stand out just a little bit more? Such as underlined titles or making the edges of the tabs a bit easier to see?

    Thanks in advance, again!

    hannah

    (@hannahritner)

    Try adding this:

    .nav-tabs {
    border-color: #000;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border-color: #000;
}
.nav-tabs>li>a {
    font-size: 16px;
}
.tab-content {
    border-color: #000;
}

    Hope that’s helpful!

    Hannah

    Thread Starter AJ Don

    (@cultural-keys)

    Beautiful! No one will miss our content now. Thanks so much Hannah! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Making tabs standout more’ is closed to new replies.