[LobsterassParticipant]

Hi awesome deveolopers!

I have almost succeeded in styling my product entry page but there are 2 things I still would love to get answered:

1. How do I add another tab? I want 3 tabs just like in this demo.

2. I’ve given my tabs a 1px border instead of the default 2px in Renew. Being a blonde ;), I can’t seem to figure out how to make the x-nav-tabs.top border-bottom white (invisible) when active. Also, the inactive x-nav-tabs.top border-bottom is now 1 px too high up. Please see attached image.

THIS IS MY CURRENT CSS:

select, input[type=”number”]{
border: 1px solid #ddd ;
}
x-nav-tabs .x-tab-content {
border: 1px solid #ddd;
}
.x-nav-tabs.top > li {
border-right: 1px solid #ddd;
}
.x-nav-tabs.top > li a {
border-bottom: 1px solid #ddd;
}

It would be awesome if you could help me sort this. 🙂

<3

A

[RupokMember]

Hi there,

Thanks for writing in!

#1. You can enable the Tabs from Customize > WooCommerce – http://prntscr.com/br4zf1

#2. Let’s replace the below code :

.x-nav-tabs {
  border-bottom: 1px solid #fff !important;
  border-top: 1px solid #ddd !important;
}

with this :

.x-nav-tabs {
  border-bottom: medium none;
  border-top: 1px solid #ddd !important;
}

.x-nav-tabs.top > .active > a, .x-nav-tabs.top > .active > a:hover {
  border-bottom: medium none !important;
}

.woocommerce div.product .woocommerce-tabs .x-tab-content {
  border-top: medium none;
}

Hope this helps.

Cheers!

[LobsterassParticipant]

Hi!

Thanx, but I didn’t get that to work.

1. I have enabled that tab. It still doesn’t show. Do I need to add some field backend in order for it to show up? Please see image again of my settings.

2. I must have misunderstood what to change in my css because most borders (all red in my second attached image) are now 2px. I would like them 1 px and i would like the active tab to have a invisible bottom border.

Please assist. Here is the css I now have:

.x-nav-tabs {
border-bottom: medium none;
border-top: 1px solid #ddd !important;
}
.x-nav-tabs.top > .active > a, .x-nav-tabs.top > .active > a:hover {
border-bottom: medium none !important;
}
.woocommerce div.product .woocommerce-tabs .x-tab-content {
border-top: medium none;
}

[LobsterassParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating.

#1. Yes this tab will be displayed if you set color, weight etc.

#2. It’s actually very confusing to override the custom CSS and provide you tailored answer. It would be better if you take off all of you custom CSS related to this and clarify what you are trying to achieve.

Cheers!

[LobsterassParticipant]

Hi Rupok!

1. Could you please login to my site and see the settings for yourself? I do have color and size set up. This X-version is a copy of an already live webshop made with a different theme. I need one more tab to put all the written text about the product in.Could you please activate the third tab for me, as I still have no clue where to do this?

2. I’m am trying to make ALL borders 1px on product entry pages. Everything is by default set to 2px border. I have managed to give the other items on the page 1 px border. The .x-nav-tabs still doesn’t show only 1 px borders. Please see attached product_entry_tabs_borders_and_add_one_tab_4.jpg.

HERE IS THE CURRENT CSS FOR THIS:
/*
// Product entry
*/
@media only screen and (min-width: 768px) and (max-width: 1000px) {
.woocommerce div.product .images {
width: 100%;
}
}
@media only screen and (min-width: 1001px) {
.woocommerce div.product .images {
width: 69%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
.woocommerce div.product .summary {
width: 100%;
}
}
@media only screen and (min-width: 1001px) {
.woocommerce div.product .summary {
width: 28%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
.woocommerce div.product .summary .product_title {
margin: 0.9em 0 0.25em !important;
}
}
a.x-img-thumbnail {
border: 1px solid #ddd !important;
padding: 0px !important;
}
a.x-img-thumbnail :hover{
outline: 1px solid #59c3c4 !important;
padding: 0px !important;
}
select, input[type=”number”], textarea {
border: 1px solid #ddd ;
}
.woocommerce div.product .images {
box-shadow: 0 8px 6px -7px #999 !important;
}
.woocommerce div.product .summary .product_title {
font-size: 170%;
line-height: 1.3;
}
.x-tab-content {
border: 1px solid #ddd;
}
.x-nav-tabs.top > li {
border-right: 1px solid #ddd;
}
.x-nav-tabs.top > li a {
border-bottom: 1px solid #ddd;
}
.x-nav-tabs {
border-bottom: medium none;
border-top: 1px solid #ddd !important;
}
.woocommerce div.product .woocommerce-tabs .x-tab-content {
border-top: medium none;
}

[RupokMember]

Hi there,

Thanks for updating.

#1. When you have the extra information (i.e. color, weight etc.) for the products then it will displayed there in Additional Information tab. So let’s put some such information for your products.

#2. I can see it’s showing 1px border for the inactive Tab – http://prntscr.com/brlpnr

And you wanted no border for the active tab. So I think it’s showing right. What else you are trying to achieve?

Hope this makes sense.

[LobsterassParticipant]

Please Rupok, please try to read my questions a little more carefully. I’ve been asking the same things over and over again in two threads with you.

If I bother you too much, please ask somebody else to help me. Please. <3

#1. Please login, write some text in the correct field and SHOW ME how that third tab is added! Please. I have no clue where this is done. I think it’s a bug or conflict somewhere. I’ve spent a whole day trying to figure this out and you’re not helping me by repeating the same thing over and over again.

#2. Again, if you could please look at the attached images that I spend time to create for effective commmunication, you would know that the left and right .x-nav-tabs are not 1px.

[ChristianModerator]

Hey there,

1. Additional Information is showing. But, because you don’t have product description, the Product Description tab won’t show up.

View post on imgur.com

(see attachment also)

2. For the border, please add the code below in your Appearance > Customize > Custom > CSS

.x-nav-tabs {
    border: 1px solid #e5e5e5;
}

View post on imgur.com

I hope that clarifies.

[LobsterassParticipant]

THANK YOU Christian! Awesome! 🙂

#1. I just knew this issue was simple to solve! Great!

#2. Cool. Got it. In case anybody else has the same issue (wanna make ALL lines on product entry pages 1 px instead of default 2px in Renew) here is the css for it to make it look like attached image:

/*
// Product entry
*/
a.x-img-thumbnail {
border: 1px solid #ddd !important;
padding: 0px !important;
}
a.x-img-thumbnail :hover{
outline: 1px solid #59c3c4 !important;
padding: 0px !important;
}
select, input[type=”number”], textarea {
border: 1px solid #ddd ;
}
.woocommerce div.product .summary .product_title {
font-size: 170%;
line-height: 1.3;
}
.x-tab-content {
border: 1px solid #ddd;
}
.x-nav-tabs.top > li {
border-right: 1px solid #ddd;
}
.x-nav-tabs.top > li a {
border-bottom: 1px solid #ddd;
}
.x-nav-tabs {
border-bottom: medium none;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.woocommerce div.product .woocommerce-tabs .x-tab-content {
border-top: medium none;
}

[JadeModerator]

You’re most welcome. 🙂

[Author]

Posts