How to Override Magento Theme Layout File

layoutmagento2overridestheme

I am a newbie to Magento 2.2.4 and i want to get bootstrap 4 css and my own js files.. As a first step trying to override the theme layout file.

I created a theme and enabled it successfully. (All js and css call are routed to my theme). The theme is inherited from magento-blank theme

Now i am trying to override the parent blank theme with my theme layout following this guide
https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/layouts/layout-override.html

I am getting the following error :

Trying to override modular view file 'C:/xampp/htdocs/magento/app/design/frontend/TridentTechnominds/store/TridentTechnominds_Theme/layout/override/theme/magento/blank/default_head_blocks.xml'
for theme 'magento/blank', which is not ancestor of theme
'TridentTechnominds/store'

I tried all methods like :

theme/Magento/theme-frontend-blank/default_head_blocks.xml => getting error over here

theme/Magento/frontend-blank/default_head_blocks.xml

theme/Magento/blank/default_head_blocks.xml => getting error over here

theme/magento/theme-frontend-blank/default_head_blocks.xml

Kindly guide me the right folder structure. I have been just making and googling for 6 hours now.

Attached is the folder structure…

Update 1:

My mistake in naming convention of the folder. The blue underlined folder name was changed.

Even then, the trident.css is getting loaded from position black underlined i.e. under layout folder.

If i take it inside theme/magento/blank it doesnt work.
Note: I tried Magento as foldername too.

Attaching the updated folder structure.

Best Answer

To override layout from parent theme, here in your case default_head_blocks.xml from Magento/blank :

app/design/frontend/{Vendor}/{themeName}/Magento_Theme/layout/override/theme/Magento/blank/default_head_blocks.xml

More information in Magento DevDocs.

Related Solutions

Magento – magento2 theme development process step by step

Make sure you have inherit theme from parent theme luma.

Create theme directory app/design/frontend/MySite/MyTheme
Create theme.xml file under app/design/frontend/MySite/MyTheme and configure it using following content:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>New theme</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media><!-- media tag is optional -->
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

Add registration.php file in theme directory (MyTheme) and content of this would be

 <?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/MySite/MyTheme',
    __DIR__
);

Login to admin panel, Go to Store->Configuration->design. Select your theme and save it.
Refresh magento cache, it will work.

How to override/modify css file

You can modify the style(css) of your theme by 2 ways. Method 1 - By overriding _theme.less file in your theme. Method 2 - By including custom css file in your theme.

Method 1 - To overriding _theme.less file in your theme, you need to copy _theme.less file of your parent theme. Then add your style or override class/id of style sheet. Path of _theme.less file in your theme should be app/design/frontend/MySite/MyTheme/web/css/source/_theme.less.

Method 2 - Create new custom css file (mystyle.css) in your theme (app/design/frontend/MySite/MyTheme/web/css/mystyle.css). Then to include it in all pages, you need to modify default_head_blocks.xml file of Magento_Theme module. Extend the Magento_Theme module in your theme, and including the required stylesheets in this file. Your custom default_head_blocks.xml file path should be app/design/frontend/MySite/MyTheme/Magento_Theme/layout/default_head_blocks.xml. Content of your default_head_blocks.xml file should be like: -

<?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/styles-m.css" />
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print" />
        <css src="css/mystyle.css"/>
    </head>
</page>

Note: Clear your magento cache (Flush Magento Cache)

Magento – style-m.css not found error for custom theme in magento 2

I just had this issue, too, and found that it is because of the order by which the css and less are compiled. You need to use the style.less file. Copy that from the blank theme and I noticed that the .css files were then auto generated with my custom css directory. However, any changes that would need to be made in the styles.less could mostly likely be made in the _theme.less. This is how I ultimately solved the issue. Within the _theme.less you can make specific css changes or make changes to variables like colors and such.

Here are a couple of examples:

*Overriding colors
@color-darkslateblue: #2d5986;
@color-bluehover: #426992;
@color-floralwhite: #f8f8ee;
@color-blue1: @color-darkslateblue;
@color-blue2: @color-bluehover;

/*customizations*/
.nav-sections {
  background: @color-darkslateblue;
}

Best Answer

Related Solutions

Magento – magento2 theme development process step by step

Magento – style-m.css not found error for custom theme in magento 2

Related Topic