0

I want to change the background color of a certain button in the customer area. It is the "Compare Product" Button at the left sidebar.

How do I know which .less file I have to change?

enter image description here

The selector is .actions-toolbar .primary

<div class="actions-toolbar">
    <div class="primary">
        <a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary" href="foo"><span>Vergleichen</span></a>
    </div>
    <div class="secondary">
        <a id="compare-clear-all" href="#" class="action clear" data-post="bar">
            <span>Alles löschen</span>
        </a>
    </div>
</div>

Normally I would just override styles-l.css or styles-m.css and make my change. But I've read that these files are generated by .less files, so this would be stupid.

4
  • No need to change existing files or find source code, just add your custom CSS and override!
    – Pawan
    Feb 25 '20 at 15:40
  • @Pawan, where do I have to add my custom CSS? And do I need to use .less or .css?
    – Black
    Feb 25 '20 at 15:42
  • I only used CSS, I can give you solution for that!
    – Pawan
    Feb 25 '20 at 15:48
  • The question is about less though...
    – Black
    Feb 25 '20 at 15:49
1

You can use _buttons.less file to change color of button. You can simply override this file in your theme if not exists. Below is the path

app/design/frontend/[VENDOR]/[THEME]/web/css/source/
1

If you enable sourcemaps your browser's dev tools will tell you which source file the styling is being applied from.

You'll need to make sure you're using Grunt to compile and you have enabled sourcemaps in your browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.