Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I have created a child theme with a Luma theme as a parent. and activate the theme from the configuration.
Now I need to do some modifications in the CSS file like I need to change the background color of the .header.content class.
Please guide me for doing the same.
To customize the CSS in Luma theme in Magento 2, you can follow these steps:
Create a child theme: Create a child theme with Luma as the parent theme. You can do this by creating a new folder under app/design/frontend with the name of your theme and then creating a theme.xml file in it. In this file, set the parent node to "Magento/Luma".
Create a _extend.less file: In your child theme folder, create a web/css/source/_extend.less file. This file will be used to override the Luma theme's CSS.
Modify the CSS: In the _extend.less file, you can modify the CSS by targeting the appropriate selectors. For example, to change the background color of the .header.content class, you can add the following code:
.header.content {
background-color: #f0f0f0;
}
Compile the CSS: After modifying the _extend.less file, you need to compile the CSS so that the changes take effect. To do this, run the following command in the Magento root directory:
bin/magento setup:static-content:deploy -f
This will compile the CSS for your child theme and make it available in the frontend.
Note: It is recommended to use the _extend.less file to modify the CSS in the Luma theme instead of directly modifying the Luma theme's CSS file. This will make it easier to maintain your customizations when updating Magento or the Luma theme in the future.
You should add custom css file and apply style there.
for add custom css.
app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
app / design / frontend / [vendor] / [theme] / web / css
create or update
app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<css src="css/custom.css" />
</head>
</page>
Create your custom css file.
app / design / frontend / [vendor] / [theme] / web / css / custom.css
