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: 

how to call css files dynamically in magento 2

SOLVED
Go to solution
‎10-22-2018 10:50 PM
‎10-22-2018 10:50 PM

how to call css files dynamically in magento 2

hi guys , i have created staic blocks in magento admin and i inserted content as well as css to but i want to move all the css from blocks to one external css file. I did that but i just want to call that css file dynamically . can anyone help me ?

Labels:
0 Kudos
Reply
3 ACCEPTED SOLUTIONS

Accepted Solutions
‎10-22-2018 11:14 PM
‎10-22-2018 11:14 PM

Re: how to call css files dynamically in magento 2

Hi @bharath553

 

 

you can create custom CSS file, follow these steps to create custom CSS file,

app/design/frontend/vendorname/theme/web/css/custom.css

app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

 

<css src="css/custom.css" order="100"/>

after that, you run these commands

 

rm -rf var/cache pub/static/frontend

php -dmemory_limit=6G bin/magento setup:upgrade

php -dmemory_limit=6G bin/magento setup:static-content:deploy -f

php bin/magento cache:flush 

 

 ------------------------------------------------

If my answer is useful, please Accept as Solution & give Kudos

View solution in original post

Reply
‎10-22-2018 11:26 PM
‎10-22-2018 11:26 PM

Re: how to call css files dynamically in magento 2

Hi @bharath553

 

You can place your css file in app/design/frontend/VendorName/theme/web/css/yourcustom.css

 

Then you required to call this files in default_head_blocks.xml file.

 

You can create this default_head_block.xml file on this location app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

 

Below is code of default_head_block.xml :

 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/yourcustom.css" />
  </head>
</page>

Hope it helps ! 

if issue solved,Click Kudos & Accept as Solution

View solution in original post

Reply
‎10-23-2018 12:03 AM
‎10-23-2018 12:03 AM

Re: how to call css files dynamically in magento 2 

php bin/magento setup:static-content:deploy

Hello @bharath553,

 

 

In order to do add custom css and load last, you must set up a custom theme.

  1. Create theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Make sure that you set your Magento application to the developer mode.
  3. Add the following folders to your custom them
    app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
app / design / frontend / [vendor] / [theme] / web / css

    Create the following files:
    app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

    place this code within default_head_blocks.xml
    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  4. Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  5. Deploy static resources (SSH to magento root):

--
If my answer is useful, please Accept as Solution & give Kudos

View solution in original post

Reply
3 REPLIES 3
‎10-22-2018 11:14 PM
‎10-22-2018 11:14 PM

Re: how to call css files dynamically in magento 2

Hi @bharath553

 

 

you can create custom CSS file, follow these steps to create custom CSS file,

app/design/frontend/vendorname/theme/web/css/custom.css

app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

 

<css src="css/custom.css" order="100"/>

after that, you run these commands

 

rm -rf var/cache pub/static/frontend

php -dmemory_limit=6G bin/magento setup:upgrade

php -dmemory_limit=6G bin/magento setup:static-content:deploy -f

php bin/magento cache:flush 

 

 ------------------------------------------------

If my answer is useful, please Accept as Solution & give Kudos

Reply
‎10-22-2018 11:26 PM
‎10-22-2018 11:26 PM

Re: how to call css files dynamically in magento 2

Hi @bharath553

 

You can place your css file in app/design/frontend/VendorName/theme/web/css/yourcustom.css

 

Then you required to call this files in default_head_blocks.xml file.

 

You can create this default_head_block.xml file on this location app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

 

Below is code of default_head_block.xml :

 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/yourcustom.css" />
  </head>
</page>

Hope it helps ! 

if issue solved,Click Kudos & Accept as Solution
Reply
‎10-23-2018 12:03 AM
‎10-23-2018 12:03 AM

Re: how to call css files dynamically in magento 2 

php bin/magento setup:static-content:deploy

Hello @bharath553,

 

 

In order to do add custom css and load last, you must set up a custom theme.

  1. Create theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Make sure that you set your Magento application to the developer mode.
  3. Add the following folders to your custom them
    app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
app / design / frontend / [vendor] / [theme] / web / css

    Create the following files:
    app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

    place this code within default_head_blocks.xml
    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  4. Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  5. Deploy static resources (SSH to magento root):

--
If my answer is useful, please Accept as Solution & give Kudos

Reply