Price font color

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.

Hello,

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

Kind Regards

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.

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;
}

Hi Artem,

These codes made the trick.
I just adjusted this part from your code with hex color:

        color: #4C4C4C;
}

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

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

Attachments:

You must be logged in to view attached files.

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;
}

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;
	}
}

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;
	}
}

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

[Author]

Posts