[Edwin]

Hello,

I changed the color of my website background, but there is one small glitch. There is a thin white small line at the base of woocommerce product description tabs. You can view it here: https://taxresidents.com/product/turkish-citizenship/

Can you assist with some CSS to correct it? I can fill in the correct color code.

Thank you!

[Sakin]

Hello Edwin,

That’s the active tab border color, if you don’t want it then make it the same as your background color. For that, just add the following CSS in the “Appearance => Customize => Additional CSS” box:

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: #f7f7f7;
}

Regards,
Sakin

[Edwin]

Hi Sakin,

Thanks for the follow up. I managed to adjust the border color, but it seems that there is a discoloration in the corner at each end of the border. What is that and how can I change it?

Also, would you kindly give me the css to change the bottom header border color and also the top footer border color? As you can see that there are faint lines there now but I would like to change to something darker.

Thank you!

[Sakin]

Hi Edwin,

You can remove that box shadow by adding the following CSS:

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
  box-shadow: none;
}

For Header Border Color, you can add the following CSS:

#masthead {
  border-color: #eee;
}

For Header Border Color, you can add the following CSS:

#colophon {
  border-color: #eee;
}

Regards,
Sakin

[Edwin]

Thanks Sakin, that worked well.

 

I have one more issue…

For some reason, this table does not scroll horizontal in mobile. On this page here: https://taxresidents.com/2023/12/30/panama-tax-haven/

It is the second table down on the page, scroll down and you will see it. It has 4 column width.

Is there some way to make this scroll so it will be responsive in mobile? It would be helpful there was some site wide css that would prevent this from reoccurring in the future.

Can you assist?

Thank you!

 

[Edwin]

The above has been resolved, you can disregard. Thank you!

[Sakin]

Welcome and let me know if you have any other issues. Have a nice day.

[Edwin]

Hi Sakin,

I do have one more issue, seems that I need to change the woocommerce tab border color, it is this bright color that does not fit with my site color scheme. You can view it here: https://taxresidents.com/product/turkish-citizenship/

Can you send the CSS?

Thank again,

Edwin

 

[Edwin]

Sakin,

I found one more issue. Regarding the password protected posts, pages, products et cetera, I need to change the format, entry retainer size, button color and features et cetera. It is especially bad if you check it on mobile. Can you assist? You can view the example here: https://taxresidents.com/product/st-kitts-and-nevis-citizenship-by-investment/

Thank you!

 

[sujeet]

Hi Edwin,

To change the woocommerce tab border color, just add the following CSS in the “Appearance => Customize => Additional CSS” box:

.woocommerce div.product .woocommerce-tabs ul.tabs:before {
   border-bottom-color: #dddddd;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
   border-color: #dddddd;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:after,
.woocommerce div.product .woocommerce-tabs ul.tabs li:before {
   border-color: transparent;
}

And as for password protected design and button add the following CSS:

input[type="submit"] {
   background: transparent;
   background-color: #008080;
   color: #ffffff;
   border: none !important;
   box-shadow: none !important;
   transition: all 0.3s ease-in-out;
   padding: 9px 20px !important;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
   background: transparent;
   background-color: #000000;
   color: #ffffff;
}

.post-password-form label input {
   box-sizing: border-box;
}

@media screen and (max-width: 560px) {
   .post-password-form label input {
      width: 100%;
      margin-top: 7px;
   }

   input[type="submit"] {
      margin-top: 10px;
   }
}

You can change the colors as you want. Let me know if this worked for you. Thank you.

Regards,
Sujeet

[Author]

Posts