Title: Tabs name CSS Last modified: March 7, 2019 --- # Tabs name CSS * Resolved [quarkelec](https://wordpress.org/support/users/quarkelec/) * (@quarkelec) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/) * Hi there, 1. Would that be possible to change a layout of custom tabs on mobile view please? Please see the example how we would like them to look: [https://pasteboard.co/I4kxY46.png](https://pasteboard.co/I4kxY46.png) * To be clear, all the tab names are above the tab content. “Key features” is a part of a “description” tab. Hope it’s clear. * 2. If the option above is not possible, I would like to apply a custom CSS to it to make it stand out more. For example, different text color, background, border etc. * Could you help please? Thank you, Yana * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftabs-name-css%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 10 replies - 1 through 10 (of 10 total) * Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/) * (@yikesitskevin) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11286690) * Hi Yana, * I’ve mocked up some styles at the `800px` width. However, after making the screen smaller I noticed that you’re already applying mobile styles (at `767px`). Do you want to get rid of your current mobile styles? It would be much easier to make new mobile styles than to try and overwrite the existing ones. * Regardless, check out these styles for widths `767px-800px`. They can obviously be improved but it’s a good starting point I think. * ``` @media ( max-width: 800px ) { .product_content_row .rt_tabs.tab-style-1 ul.tab_nav { border-left: 1px solid #e8e8e8; } .product_content_row .rt_tabs.tab-style-1 .tab_nav li { width: 100%; text-align: center; } } ``` * Also, do you know how you’re adding that icon on the Additional Information tab? WooCommerce strips all HTML from tab titles so you must be injecting the span using JavaScript and adding content with CSS, is that right? * Cheers, Kevin. * Thread Starter [quarkelec](https://wordpress.org/support/users/quarkelec/) * (@quarkelec) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11289636) * Hi there, Thank you, the code _nearly_ works =) * I pasted it and nothing happened, than I changed it to **max-width: 1000px** and it worked just as needed, but only until I resized the window to mobile size. It seems that the original settings overwrite your code by default. I also tried adding !important, but that didn’t work either. Maybe I add it to the wrong place? Could you help please? * _Do you want to get rid of your current mobile styles?_ Yes we do. * _It would be much easier to make new mobile styles than to try and overwrite the existing ones._ How do we do make new styles instead of overwriting? Just by adding CSS? **Currently there is no CSS that I can see for custom tabs**, unless it’s hidden somewhere?.. * _Also, do you know how you’re adding that icon on the Additional Information tab? _ To be honest, I have no idea. Seems like it is a default woocommerce tab, and we are planning to get rid of it via changing some PHP * Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/) * (@yikesitskevin) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11290335) * Hi [@quarkelec](https://wordpress.org/support/users/quarkelec/), * I see I see. Remove the previous styles and add these. This will make sure the original tab titles are always shown and will hide the “mobile” styles that your theme is adding. * ``` @media ( max-width: 800px ) { .product_content_row .rt_tabs.woo_tabs ul.tab_nav.hidden-xs { display: block !important; } .product_content_row .rt_tabs.woo_tabs .tab_title.visible-xs { display: none !important; } .product_content_row .rt_tabs.tab-style-1 ul.tab_nav { border-left: 1px solid #e8e8e8; } .product_content_row .rt_tabs.tab-style-1 .tab_nav li { width: 100%; text-align: center; } } ``` * Cheers, Kevin. * Thread Starter [quarkelec](https://wordpress.org/support/users/quarkelec/) * (@quarkelec) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11290565) * Hi, Thanks a lot, it did its magic! =) Code works perfect * I am working on CSS at the moment, changing colour, font size etc, just to make it more “visible” and different from the rest of text on the page. Is there a way to highlight an active tab please? E.g. change a background colour on an active tab. * Also, how can I add lines between tab names please? * [https://pasteboard.co/I4tCQUm.png](https://pasteboard.co/I4tCQUm.png) * Thank you, Yana * Thread Starter [quarkelec](https://wordpress.org/support/users/quarkelec/) * (@quarkelec) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11290583) * And another question, probably the last one. Hope it’s ok to ask in the same topic. Is there a way to add something like “close tab” button in the end of the tab content? So when customer reads till the end of the page, it is easy to see all the tabs again. Some product pages have a lot of technical information on it, and option like this would be very useful. Thank you * Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/) * (@yikesitskevin) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11290616) * Hi [@quarkelec](https://wordpress.org/support/users/quarkelec/), * Add these snippets inside the [@media](https://wordpress.org/support/users/media/) query from the previous snippet so they’re only active when the screen size is less than 800px (hope that makes sense). * 1. Change the background color of the active tab title: * ``` .product_content_row .rt_tabs.tab-style-1 .tab_nav li.active { background-color: #f1efef; } ``` * 2. Lines between the tabs * ``` .product_content_row .rt_tabs.tab-style-1 .tab_nav li { border-bottom: 1px solid #d2d0d0; } ``` * 3. There is no good way to add a close button. It would require custom JS and overwriting some default tab behavior. You could add a simple HTML anchor tag“ back to top” though. There are plenty of resources about HTML anchor tags on line. * Thread Starter [quarkelec](https://wordpress.org/support/users/quarkelec/) * (@quarkelec) * [7 years, 3 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11290625) * Thank you again, you helped a lot =) All worked for me. * Thread Starter [quarkelec](https://wordpress.org/support/users/quarkelec/) * (@quarkelec) * [7 years, 2 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11329881) * Hi there, another question =) I just can’t work it out myself, no matter what I do. How do I get rid of this orange bottom border please, as well as borders around? * [https://pasteboard.co/I68rsgWM.png](https://pasteboard.co/I68rsgWM.png) Thank you * Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/) * (@yikesitskevin) * [7 years, 2 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11330022) * Hey [@quarkelec](https://wordpress.org/support/users/quarkelec/), * You don’t like the orange? I kind of like it. * Anyway, it’s being added via the pseudo selector `after` so it’s understandable why it’s more difficult to manipulate. * This will remove the border from all of your tabs: * ``` .product_content_row .rt_tabs.woo_tabs .tab_nav > li:after { border: 0px; } ``` * This will change the orange color for the active tab to blue: * ``` .product_content_row .rt_tabs.woo_tabs .tab_nav > li.active:after { border-color: blue; } ``` * Let me know if you need any more help 🙂 * Cheers, Kevin. * Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/) * (@yikesitskevin) * [7 years, 2 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11330027) * Oh, also, I don’t usually do this, but if you’re enjoying the plugin & the support, feel free to leave us a nice rating and review 🙂 * [https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/reviews/#new-topic-0](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/reviews/#new-topic-0) Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Tabs name CSS’ is closed to new replies. * ![](https://ps.w.org/yikes-inc-easy-custom-woocommerce-product-tabs/assets/icon- 256x256.png?rev=1558461) * [Custom Product Tabs for WooCommerce](https://wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/) * [Frequently Asked Questions](https://wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/#faq) * [Support Threads](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/) * [Active Topics](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/unresolved/) * [Reviews](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/reviews/) ## Tags * [border](https://wordpress.org/support/topic-tag/border/) * [color](https://wordpress.org/support/topic-tag/color/) * [css](https://wordpress.org/support/topic-tag/css/) * 10 replies * 2 participants * Last reply from: [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/) * Last activity: [7 years, 2 months ago](https://wordpress.org/support/topic/tabs-name-css/#post-11330027) * Status: resolved