Back to Top

How to write theme specific CSS in Magento 2?

Updated 5 April 2024

At times, it’s necessary to adapt our module design to accommodate various themes, each with its unique layout.

Since different themes may require adjustments in CSS for better integration, we’ll explore how to achieve this in today’s post.

Assuming you have a module package installed with a custom theme, I’ll simply add the required files here. The module name requiring CSS updates is Webkul_PriceRange, and the theme being used is Webkul_Agorae.

In your app/design/frontend/Webkul/agorae/Webkul_PriceRange/layout directory create a layout file where you want to add the css file and in head add the css file.

<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
		<css src="Webkul_PriceRange::css/qa_agorae.css" />

Now, add the css file qa_agorae.css in app/design/frontend/Webkul/agorae/Webkul_PriceRange/web/css and add the changes you want. Like I add the following changes for my theme.

Searching for an experienced
Magento Company ?
Find out More
.search_bar {
    display: inline-block;
    width: 71%;

    line-height: 1.2;

Now, refresh the page and you will get the desired changes. That’s all for this post, hope it may be helpful.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home