Price font color

This topic has 10 replies, 2 voices, and was last updated 8 months, 3 weeks ago by Artem Temos.

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

Author

Posts
February 27, 2024 at 2:49 am #544059

Tuomo
Participant

Hi there,

Where can I change the font colors for the prices in Basel theme?
I am having some complaints in google pagespeed insights about this: The contrast ratio of the background and foreground colors is not sufficient.

Best Regards,
Tuomo Nurkkala

Attachments:
You must be logged in to view attached files.

February 27, 2024 at 10:05 am #544118

Artem Temos
Keymaster

Hello,

You can change this in Theme Settings -> Typography -> Advanced typography as shown on the screenshot https://gyazo.com/d89bf5768699cc16055ad8e259b2c768

Kind Regards

February 28, 2024 at 12:24 am #544464

Tuomo
Participant

Hi Artem,

Thanks! Is there a way to keep the discount price color as it is now? With your adjustments it changes all of the price colors, but it would be nice to highlight the discount color when other prices colors are darker.

Best Regards,
Tuomo Nurkkala

Attachments:
You must be logged in to view attached files.

February 28, 2024 at 10:46 am #544565
Artem Temos
Keymaster
Use the following custom to change all “gray” prices and prices that have primary color will stay. Before doing this, you need to remove all advanced selectors you placed previously.
```
body .amount,
body .price del,
body .price del > .amount,
body.single-product .price del, 
body.single-product .price del .amount,
body .popup-quick-view .price del, 
body .popup-quick-view .price del .amount {
	color: black;
}
```
February 28, 2024 at 2:20 pm #544667
Tuomo
Participant
Hi Artem,

These codes made the trick.
I just adjusted this part from your code with hex color:
```
        color: #4C4C4C;
}
```
February 28, 2024 at 3:48 pm #544716

Artem Temos
Keymaster

Great, we are glad that you sorted it out. Feel free to contact us if you have any further questions.

February 28, 2024 at 4:33 pm #544734

Tuomo
Participant

Btw where can I change these label sizes and swatches sizes?

Attachments:
You must be logged in to view attached files.

February 29, 2024 at 3:18 am #544866
Tuomo
Participant
I wasn’t able to make bigger fonts for product-labels. I tried 15px for that, but the ball roundness wasn’t so good.
I got it working for desktop view just fine, but then it didn’t look good on mobile view.
I tried this:
```
.labels-rounded .product-label {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    padding: 7px 7px;
    font-size: 15px;
    border-radius: 35px;
}
```
and this:
```
@media (max-width: 768px)
.labels-rounded .product-label {
    min-height: 45px;
    font-size: 15px;
}
```
But the -50% discounts looks weird.

I got the swatch on grid work just fine:
```
.single-product-content .variations .swatches-select .colored-swatch {
    margin-top: 7px;
    margin-bottom: 7px;
    border: 1px solid #000 !important;
}
.basel-hover-alt .swatches-on-grid .swatch-on-grid {
    margin-top: 7px;
    margin-bottom: 7px;
    border: 1px solid #000;
	  margin-right: 23px;
	  width: 24px;
    height: 24px;
}
.single-product-content .variations .swatches-select :is(.image-swatch,.colored-swatch) {
    margin-top: 7px;
    margin-bottom: 7px;
    border: 1px solid #000;
	  margin-right: 30px;
}	

.swatches-on-grid .swatch-on-grid {
    width: 24px;
    height: 24px;
}
```
February 29, 2024 at 10:35 am #544949
Artem Temos
Keymaster
Here is a custom CSS, only with one condition that our standard labels are not always round in fact, and if they have more content than to put in a circle, they expand, if that’s why labels are always round for out-of-stock font and you need to set it separately from others
```
body .labels-rounded .product-label {
	font-size: 26px;
	aspect-ratio: 1;
	border-radius: 50%;
	width: 80px;
	max-width: 80px;
}

body .labels-rounded .product-label.out-of-stock {
	font-size: 12px;
}

@media (max-width: 768px) {
	
	body .labels-rounded .product-label {
		font-size: 18px;
		width: 60px;
		max-width: 80px;
	}
	
	body .labels-rounded .product-label.out-of-stock {
		font-size: 8px;
	}
}
```
March 1, 2024 at 1:06 am #545222
Tuomo
Participant
Thanks Artem!
I tweaked your CSS-codes a little and they look good now:
```
body .labels-rounded .product-label {
	font-size: 16px;
	aspect-ratio: 1;
	border-radius: 50%;
	width: 60px;
	max-width: 80px;
}

body .labels-rounded .product-label.out-of-stock {
	font-size: 12px;
}

@media (max-width: 768px) {
	
	body .labels-rounded .product-label {
		font-size: 16px;
		width: 55px;
		max-width: 70px;
	}
	
	body .labels-rounded .product-label.out-of-stock {
		font-size: 8px;
	}
}
```
March 1, 2024 at 1:26 pm #545396

Artem Temos
Keymaster

Great, we are glad to help. Feel free to contact us if you have any further questions.
Author

Posts