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.
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
Hi @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.
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
Thank you,
Yana
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
Hi @quarkelec,
Add these snippets inside the @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.
Thank you again, you helped a lot =)
All worked for me.
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
Thank you
Hey @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.
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://ww.wp.xz.cn/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/reviews/#new-topic-0
