[Resolved] tabs

[Author]

Posts

[kayser]

Hi
In image 1 you see my tabs in admin
in image 2 you see tab online
One below the other
this site is under construction

Thanks for your help
Guyk

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Well - you mean tabs are not displaying side by side in the horizontal row?

1)
Do you see any Javascript error on your browser's console? If yes, could you please share the possible error you see.

2)
Could you please activate WP_DEBUG from the wp-config.php file and send me possible errors for review.

3)
Could you please try to resolve your issue by deactivating all third-party plugins as well as the default theme to check for any possible conflicts with any of the plugins or themes?

[kayser]

Hello

1)
no error in console
2
no error
3
i try without plugin keeping toolset plugins and toolset starter theme

always the same

Guyk

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Ok - I hope you already went through our Dcos and ensure that you followed the correct steps:
=> https://toolset.com/documentation/user-guides/tabs-cell/

If your issue still persits, you need to upload your site on some test server where I can debug your issue further.
OR
You can try to reproduce the same issue with our test platform: discover-wp.com
=> https://toolset.com/faq/how-and-why-to-create-a-test-site-in-discover-wp/

[kayser]

Please look at this page to see the problem
hidden link

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Ahh - you mean tab content is switching when you click on the tab. I have setup a test example for you on the following page and I can see the tab is working fine at top of the following page:
=> hidden link

1)
I need access details to check how you set up your tab and content. Can I have few screenshot about what is your expected output?

2)
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Could you please try to recreate your tabs as I tested with new test page here:
=> hidden link

I've added two tabs and its working fine - the layout used with above page is:
=> hidden link

[kayser]

Thanks Minesh
Any chance to get different css by tab ?

Guyk

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - you can style it by targeting the selectors using custom CSS. Please refer following Doc for more info:
=> https://toolset.com/documentation/user-guides/using-html-css-style-layout-cells/#adding-css-code-for-custom-styling

[kayser]

Hi
hidden link
i try to style table titles with css (three different colors)
i put three id tag for three tables
i cant find it with firebug
why ?
Guy

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

I've added following JS code at: Toolset => Layouts CSS and JS section

jQuery(document).ready(function($){
  var arr = ['red','#FFFFFF','#FFFFFF'];
  $('ul.nav-tabs li.active a ').each(function(index){
    
    $(this).prop('style','color:'+arr[index]);
  });
});

As you can see you will see the different color tabs now.

[kayser]

The first tab is OK when is active
but not the two others

jQuery(document).ready(function($){
  var arr = ['green','black','blue'];
  $('ul.nav-tabs li.active a').each(function(index){     
    $(this).prop('style','background-color:'+arr[index]);
  });
});

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - there is bootstrap CSS that is overriding the CSS:

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #666;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default;

This is the file from where the above CSS coming from:
hidden link

[kayser]

in advanced settings i desactived theme css
my problem is that I want to change color when the table is active

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

I've set the selected tab color to red. I've added following CSS to CSS section at:
=> Toolset => Layout CSS and JS

.nav-tabs > li.active a{
    background-color: red !important;
}

I hope this solution will help you to resolve your issue.