Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Best practice for adding css and js for CMS Block

‎12-09-2020 11:56 PM
‎12-09-2020 11:56 PM

Best practice for adding css and js for CMS Block

I have added css design part for a static block in the same block,

 

<div class="container">

    <div class="row">

        <div class="col-sm">
            <img src="{{media url="image.png"}}" alt="">
        </div>

        <div class="col-sm">

        <div class="row" style="top: 822px; left: 864px; width: 266px; height: 156px; text-align: left; font: normal normal normal 28px/41px Laca; letter-spacing: 0px; color: #404040; text-transform: capitalize; opacity: 1;">Welcome to store</div>

        <div class="row" style="top: 1021px; left: 870px; width: 272px; height: 210px; text-align: left; font: normal normal normal 16px/22px Laca; letter-spacing: 0px; color: #707070; opacity: 1;">Her is my text</div>

        <div class="row" style="top: 1231px; left: 870px; width: 118px; height: 50px; background: #F1592A 0% 0% no-repeat padding-box; border-radius: 4px; opacity: 1;">Read More</div>
        </div>

    </div>

</div>

how to create an external css file and include inside the static block, i am working on a custom theme that is inherited from a blank theme. My custom css placed under app/design/frontend/mytheme/theme/web/css for some other design.

0 Kudos
1 REPLY 1
‎01-13-2021 08:22 AM
‎01-13-2021 08:22 AM

Re: Best practice for adding css and js for CMS Block

Hello, @Aveeva 

 

Please do follow the following steps.

Step 1: You need to create file a css file in /app/design/frontend/<Theme_Name>/web/css/local.css

Step 2: At this step, create default_head_blocks.xml file in app/design/frontend/<Theme_Name>/<Module_NameSpace>/layout/

Step 3: In default_head_blocks.xml, using css tag (css) to include a css file which we created at Step 2.

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      layout="2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/local.css" />
    </head>
</page>

 Thanks