Style Classic Tabs

Support
#1

Hi,

I would like to be able to design the classic tabs element in a particular way. So specifically I would like to be able to:

  1. Change the background colour of the Tab title on it’s own
  2. Change the background colour of the Tab content on it’s own
  3. Change width or remove completely the border of the Tab content and title
  4. Make the Tab title text bold

Thank you for any help!

Jamie

#2

Hello Jamie,

Thanks for asking. :slight_smile:

I am not quite sure what you meant by on it’s own. However, do make the necessary changes please add following CSS under X/Pro > Theme Options > CSS:

.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
    background-color: #ddd;
    border: 0;
}

.x-tab-content>.active {
    background-color: #ededed;
}

.x-nav-tabs.two-up>li {
    border: 0;
}

.x-tab-content {
    border: 0;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Great thanks very much for this. Two strange things have happened in my X Pro. When I go to X Pro > Theme Options > CSS has dissapeared from the menu. Also when I try to go to the template manager, the page just hangs on white and never loads properly.

#4

Hi There,

Can you confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Thanks.

#5

Hi,
Yes. I can confirm that I am up to date with the Theme and all plugins. I still have these two issues.

Thanks,
Jamie

#6

Hi there,

In that case, please provide your site’s URL and login credentials in a secure note for further checking.

Thanks!

#7

Hi I have actually resolved the issue. I cleared the cache after updating and it seems to be fine. The links to the CSS resources were excellent as well.

Thank you!
Jamie

#8

Hey Jamie,

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.