Solved: Re: how to call css files dynamically in magento 2

bharath553 · ‎10-22-2018

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 ?

syedhasan · ‎10-22-2018

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

Manthan Dave · ‎10-22-2018

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

gelanivishal · ‎10-23-2018

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.

Create theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Make sure that you set your Magento application to the developer mode.

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>

Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Deploy static resources (SSH to magento root):

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

View solution in original post

syedhasan · ‎10-22-2018

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

Manthan Dave · ‎10-22-2018

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

gelanivishal · ‎10-23-2018

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.

Create theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Make sure that you set your Magento application to the developer mode.

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>

Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Deploy static resources (SSH to magento root):

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