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.

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

2 Answers 2

Reset to default
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/
Improve this answer
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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