1

I have created custom theme which is inherit from blank theme,

I have created more than one CMS block and include into CMS page for home page design.

One of my CMS block named service banner

In the CMS block i have created some design:

<div class=" container service-banner">

<div class="row">
<div> </div>
</div>

<div class="row">
<div> </div>
</div>

<div class="row">
<div> </div>
</div>

</div>

I have created _cms_block.less file under

app\design\frontend\Myrwd\mytheme\web\css\source\ _cms_block.less

@media only screen and (max-width: 600px) {
    .container service-banner{
        body {
            background-color: lightblue;
        }
    }
}

and imported into _extend.less file

@@import "_cms_block.less";

How to include custom theme directory CSS file into my CMS block?

2
  1. Create a folder named Magento_Theme and place the CSS styles (in less format obviously) in the _extend.less(web/css/source) file.
  2. This CSS will be applied to all the places the block is called.

You can place the CSS style in any of the _extend.less files in the theme. But it is good practice to place it under Magento_Theme folder.

If you want the CSS to be applied to a set of specific pages out of all the pages the block is being rendered, then differentiate the CSS codes using the class name of the body.

Example, product listing page contains the body class of catalog-category-view and product view page has the body class of catalog-product-view.

10
  • Yes, here i have created _cms_block.less under app\design\frontend\Myrwd\mytheme\web\css\source_cms_block.less then import _cms_block.less into _extend.less, My question how to add this path into my CMS Block(Not CMS Page) – zus Dec 21 '20 at 9:15
  • 1
    My class name : class="container service-banner" In my less file using @media only screen and (max-width: 600px) { .container service-banner{ body { background-color: lightblue; } } } – zus Dec 21 '20 at 9:18
  • If you have created _cms_block.less under we/css/source of the theme itself, then import the file in _theme.less(web/css/source). Magento will load the CSS along with the other CSS codes. – Mathanagopal S Dec 21 '20 at 9:19
  • What is the best practice, i want to add css to my cms block (not cms page)that's it. – zus Dec 21 '20 at 9:25
  • 1
    Its not good practice right (for development i did like this) and also page load time increase. May i know how to achieve my task? – zus Dec 21 '20 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.