Change the price font size (and other mysterious CSS) - v4

Does anyone know how to change the massive font size of Product Prices in v 4.x?

Styles.css and base.css are called before some other mysterious CSS source I can't find.

I show this multiple class declaration as controlling the size in the base 4.0.2 theme:

.product-main-info .price-num,

That's located line 2892 of styles.css

.product-main-info .price-num {

[color=#ff0000] font-size: 32px;[/color]


And again on line 2943 of base.css

.product-info .price-num {

[color=#ff0000] font-size: 120%;[/color]


But the above are both overwritten by declarations that are called later and from somewhere I'm unable to find or override.

.product-main-info .price-num, .product-main-info.product-quick-view .price-num {

[color=#ff0000]font-size: 36px;[/color]


I did identify the file which is causing my issues


It appears to be related to /scheme.less which has lots of @import calls for all the settings which have been driving me crazy - background, price, copyright etc.

So my guess is the Theme Editor (dear gawd, no, please, no…) is controlling styles randomly and, as a bonus gives no way for me to control .product-main-info .price-num

Stumped at the moment.

Not sure why you don't want to use the Theme Editor.

If you want to do it via CSS then create a custom my_changes LESS file and set the font size for [color=#888888][font=Consolas,][color=#222222].product-main-info .price-num[/color], .product-main-info.product-quick-view .price-num[/font][/color][font=Consolas,] {}[/font]

Why wouldn't I want to use the Theme editor? Because I've never used a GUI to control design (since they generally have shortcomings and in this case lack documentation that I can find to dig beyond changing high level basics), it's way slower to affect change, provides less control, seems to have some classes/controls but not others and… exactly where would I edit this multi class in the Theme Editor?

Price Tag under Fonts.

Doh! thanks Price worked (I was looking for the multi class controls) and it appears to have only changed “price” on the individual product pages, not “price” on category pages. And I see Price color under Colors.

I’m also trying to change the color and size of the footer “powered by” link but it appears that I have to use the Theme Editor and change link size and color globally?

So it would appear some basics can be controlled through the Theme Editor, some items can be controlled via CSS and when those two systems fail - add a third one, a custom “[color=#282828][font=arial, verdana, tahoma, sans-serif]my_changes LESS”. Bingo! that last one is what I’d like to use for all styles.[/font][/color]

I’d never heard of my changes - looks like this does exactly what I’m looking for - as lings as it works when compressed with other CSS I am good to roll: [url=“”][/url]

[color=#282828][font=arial, verdana, tahoma, sans-serif]Thank you for the help and direction![/font][/color]

ps from the doc above “the add-on My Changes is used to handle user modifications with no need to create a separate add-on” - Install an Add-on so you don’t need to install an Add-on :-) Is it past noon yet?