Tabs Title and Heading

This topic has 9 replies, 2 voices, and was last updated 4 years, 3 months ago by Edwin.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 24, 2020 at 3:26 am #240130

Edwin
Participant

Hello,

I have changed the color scheme for my website and need to adjust the color of the titles and headings for my product tabs https://www.newpassportpro.com/product/st-lucia-citizenship-by-investment/

Will you kindly send me the code for this?

Thank you,
Edwin

March 24, 2020 at 3:41 am #240131

Edwin
Participant

Hello, I found the code to change the titles, but I still need the code to change the heading color. Please advise – Thank you!

March 24, 2020 at 6:08 am #240141
Skandha
Participant
@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
.product_title.entry-title {
    color: #fff456 !important;
}
```
You can change the color according to your choice.
Let me know if this what you want!
Kind Regards,
Skandha
March 28, 2020 at 9:24 pm #240600

Edwin
Participant

Thanks Skandha.
There is one more issue…

I need to change the search border color for the search box in mobile and desktop. It is not possible to change the color in customizer. The border color and also the X color in mobile need to be adjusted.

Can you fix it?

Thank you.

March 29, 2020 at 12:11 am #240610
Skandha
Participant
@mmhgloba: Hello Edwin,
To change the border color of search box and X icon
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
#header-right .header-search-wrap {
	border-color: #157985;
}
#header-search {
	color: #157985;
}
```
You can change the color according to your choice.

Let me know if this is what you want!
Kind Regards,
Skandha
April 8, 2020 at 10:37 pm #241965

Edwin
Participant

Can you help me change the woocommerce add to cart button style? I have been looking all over for the code but nothing seems to work.

I want to make the color transparent and add a border, also change the text color and style. I also want to adjust the hover style accordingly.

here is a product page from my website: https://www.elitepassports.com/product/grenada-citizenship-by-investment/

Thanks for any assistance you can provide…

April 9, 2020 at 12:10 am #241981
Skandha
Participant
@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    background-color: transparent;
    border: 1px solid #000;
}
.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
    background-color: #f23456;
    color: #fff;
}
```
You can change the color according to your choice.
Let me know if this is what you want!

Kind Regards,
Skandha
April 9, 2020 at 7:59 am #242045

Edwin
Participant

Hi Skandha, thanks for the feedback.

I tried to insert the code as a whole, but it didn’t work. However, I took the snippit “border: 1px solid #000;” and added it to the code I was already using and it worked well. Also, I added this snippet to round out the corners of the button: “border-radius: 10px;” Everything is fine but for one issue in the chrome browser (I noticed this on desktop).

When I click the add to cart button, the radius expands to where the corners used to be. Can you fix this?

Here is the css code I am using in total:

.woocommerce form.cart button.button {
background-color: #ffffff;
border: 1px solid #205996;
border-radius: 10px;
color: #2a8fbf;
}
.woocommerce form.cart button.button:hover {
background-color: #137eb0;
border: 1px solid #205996;
border-radius: 10px;
color: #ffffff;
}

Also, here is a link to view the issue: https://www.goldenbuddha.net/product/oxidized-copper-15-25-chenrezig-statue-gold-face-painted/

In mozilla firefox it works fine, but I tried it in chrome and I noticed this issue.

Thank you for your help.

Edwin

April 10, 2020 at 6:07 am #242192
Skandha
Participant
@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
/* To remove the outline when the add to cart button is clicked in chrome */
button {
    outline: none;
}
```
Let me know if this works out!
Kind Regards,
Skandha
August 1, 2020 at 9:39 am #254656

Edwin
Participant

Hi Skandha,

This is fixed in desktop browsers, but it is still ghosting in the chrome mobile browser. Can we enhance the code? It is doing it on this website iglobal.net

Thanks, Edwin
Author

Posts