3

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.

Improve this question
1

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
Improve this answer
0

Not sure if I got it properly right way, but I got it working.
I ended up copying and pasted default_head_blocks.xml from luma theme to the folder app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/

default_head_blocks.xml
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/custom.css" media="screen and (min-width: 768px)"/> </head> </page>

Then added custom.css file to the folder app/design/frontend/<Vendor>/<theme>/web/css. But, now I get issues with my Varnish, I have to restart it every time I do the change in the custom.css file, otherwise it won't update the code.

Improve this answer
0

well, in my case i've created:

app/design/frontend///web/css/source/_extend.less file and set backend 'compiling less client side', an that's all, refresh the project.

Do all the style changes in that file (only for frontend, i'm working in overriding backend...)

Improve this answer

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.