Magento – How to update/customize/override Magento 2 css styles

less-cssmagento2

So I followed the Magento 2 Docs to create my theme for the store.

Step 1: I have created directories
app/design/frontend/<Vendor>/<theme>/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/

Step 2: Added registration.php and theme.xml fiels
...
├── registration.php
├── theme.xml

Registration.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/<Vendor>/<theme>',
__DIR__
);

theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>New theme</title>
<parent>Magento/luma</parent>
</theme>

Step 3: Applied and configured a theme in Admin, to ex.(New theme)

Now this is where I having a problem.
Lets say for example I want to override default css style for class .logo which is
.logo {margin: -8px auto 25px 0;} to .logo {margin: 0;}

How would i properly do that? Do I need to create _styles.less and stick that with updated css in to the app/design/frontend/<Vendor>/<theme>/web/css/ or create app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less or there is other way?

Any help is really appreciated.

Best Answer

First you have to configure compilation of style in admin path given below

Store -> Configuration -> Advanced -> Developer -> Front-end development workflow

change to

Client side less compilation

Then edit your theme styles module wise and other web/css/source (common style)

app/design/frontend/vendor_name/theme_name

run below command to set developer mode

- php bin/magento deploy:mode:set developer

and clear cache and deploy static-content

- php bin/magento cache:clean
- php bin/magento setup:static-content:deploy
Related Topic