Re: How to add custom CSS file in magento 2.4

uir347gmai8039 · ‎06-07-2023

how can i add custom css file for

johnwebdes40a5 · ‎06-08-2023

To add a custom CSS file in Magento 2.4, you can follow these steps:

Create your custom CSS file:
- Start by creating your custom CSS file with the desired styles. You can create this file using a text editor and save it with a .css extension. For example, let's assume you've named it custom.css.
Place the CSS file in your theme directory:
- In Magento 2.4, it is recommended to add custom files in your theme directory to ensure easy maintenance and upgrade compatibility. Locate your theme directory, which is typically located in app/design/frontend/{Vendor}/{theme}/. Create a new directory named web within your theme directory, and inside the web directory, create a new directory named css. Place your custom.css file inside this css directory.
Register the CSS file in your theme's default_head_blocks.xml file:
- To include your custom CSS file in the head section of your theme, you need to register it. Open or create the default_head_blocks.xml file for your theme. This file is usually located in app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/. Add the following code inside the default_head_blocks.xml file:
```
<?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" />
		</head>
	</page>
```
Clear the cache:
- After adding the custom CSS file and registering it, you need to clear the Magento cache for the changes to take effect. You can do this by running the following command in your Magento root directory:
```
php bin/magento cache:clean
```
Verify the changes:
- Visit your Magento storefront and inspect the page source code to ensure that the custom CSS file is included correctly. You should see a <link> tag referencing your custom.css file in the head section of the page.

With these steps, you have successfully added a custom CSS file in Magento 2.4, and it will be loaded on your storefront, allowing you to apply custom styles to your theme.

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Thank You,

WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

Location: 150 King St. W. Toronto, ON M5H 1J9

PHPCuong · ‎09-11-2023

Please watch this video How to add the JS and CSS files into a custom module in Magento 2 https://www.youtube.com/watch?v=JGli227W1ks, it will help you to complete your requirements.

Milople · ‎01-11-2024

Hi @uir347gmai8039,

In Magento 2, you can add a custom CSS file by following these steps:

Create a Custom Theme (if not already created):

If you don't have a custom theme, you can create one. Create a new theme directory in the app/design/frontend directory.
For example, if your theme's name is "CustomTheme," your theme directory structure should look like:

app/design/frontend/Vendor/CustomTheme/

Create or Identify the default_head_blocks.xml File: In your custom theme directory, check if there is a default_head_blocks.xml file. If it doesn't exist, create one. This file is used to declare assets that should be included in the head section of the HTML document.

The path to the file should be:

app/design/frontend/Vendor/CustomTheme/Magento_Theme/layout/default_head_blocks.xml

Declare the CSS File in default_head_blocks.xml: Add the following content to your default_head_blocks.xml file to declare the custom CSS file:

<?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-styles.css" />
    </head>
</page>

In this example, css/custom-styles.css is the path to your custom CSS file relative to your theme directory.

Create the Custom CSS File: In your custom theme directory, create a web/css directory. Inside this directory, create your custom CSS file. For example:
app/design/frontend/Vendor/CustomTheme/web/css/custom-styles.css

Add your custom styles to this file.

Deploy the Static Content: After creating the custom CSS file, you need to deploy the static content. Run the following command from your Magento root directory:

bin/magento setup:static-content:deploy

This command will deploy the static content, including your custom CSS file.

Clear Cache: Finally, clear the Magento cache to apply the changes:

bin/magento cache:clean

Now, your custom CSS file should be included in the head of your Magento store pages. Make sure to customize the paths and file names according to your theme structure and preferences.

If the issue will be resolved, Click Kudos & Accept as a Solution.