Reading list Switch to dark mode

    How to write theme specific CSS in Magento 2?

    Sometimes, we need to design our module according to different themes. As different themes have different layout, its obvious you cant build a universal design module. Somewhere you need to make changes in your css to fit better to the theme used. Today, we will see How can we achieve this in this post.

    I am considering you have a module package installed with custom theme, here I will just add the require files. Module name for which I need to update the css is Webkul_PriceRange and the theme I am using 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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    	<head>
    		<css src="Webkul_PriceRange::css/qa_agorae.css" />
    	</head>
    </page>
    

    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.

    .search_bar {
        display: inline-block;
        width: 71%;
    }
    
    button.wksearch_button{
        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.

    Searching for an experienced
    Magento Company ?
    Read More
    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published.

    Be the first to comment.

    Back to Top
    Customer service rep Abhishek & developer Abhinav have been helpful in resolving a few issues with the app eShopSync for BigCommerce. Very responsive and timely.
    Mildred Shao
    Global Sales Ops & CRM
    www.lalamove.com
    Talk to Sales

    Global

    Live Chat

    Message Sent!

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

    Back to Home