Magento Question posted in
The official documentation can be found here.

How to customize Magento 2 theme?

I’m new to Magento 2 and front-end development I just know how to use html and css, I want to customize blank theme in Magento 2 to understand how the things work, I was reading the documentation of Magento 2 but I didn’t get any idea of how to do that, I want to customize the theme what I should change? is it the css files or the hole layout (the xml) files?

I tried to walk-through some tutorial to add css file but nothing changed.

this is the 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/source/style.css" />
  </head>
</page>

and this is the css file 

.navigation {
    background: #40e936;
    font-weight: 700;
    height: inherit;
    left: auto;
    overflow: inherit;
    padding: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 3;
}
Tags:

2

Answers


  1. 0

    To add custom CSS theme file to Magento 2, you need to:

    1. Create file custom.css in pub/media/
    2. Go to Admin > Content > Configuration > [choose the theme currently in used] > HTML Head > Scripts and Style Sheets
    3. Input: <link rel="stylesheet" type="text/css" media="all" href="{{MEDIA_URL}}custom.css" />

    However, the method above is not recommended in Magento 2. In Magento 2, you should style by creating a child theme then edit CSS and LESS files that is extended from the parent theme.

    Login or Signup to reply.
  2. 0

    Magento 2 can now process 2 types of files for styling website: CSS file and LESS file, which allows you to manage complicated CSS files with ease.
    If your custom theme is from Magento default themes Luma or Black, you can just override the LESS files by, for example changing the values of the variables that are in default files.
    Here are some easy steps:

    • Create a new theme that inherits from the Black theme, we can call it Orange theme.
    • Add the code of overriding is
      app/design/frontend/OrangeCo/orange/web/CSS/source/_theme.less

    In the orange theme folder, you can change the color of the button or any changes which you want.
    You can hire a developer if you are getting much problems while customizing. Here is a link if it can help kodematix

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search