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: 

adding a custom CSS file in Magento 2

SOLVED
Go to solution
‎09-30-2018 09:35 AM
‎09-30-2018 09:35 AM

adding a custom CSS file in Magento 2

 
Hello everyone,
first of all, I don't use terminal or Linux, I use Windows 8.1 putty program/ssh I installed a theme in Magento on my website. now I am trying to customize it, I edited one of the ccs files then upload it again by using FTP FileZilla program then flush all Magento cache but nothing changed, do you have any idea about how to solve this issue?
Labels:
0 Kudos
Reply
3 ACCEPTED SOLUTIONS

Accepted Solutions
‎09-30-2018 09:42 PM
‎09-30-2018 09:42 PM

Re: adding a custom CSS file in Magento 2

 

Hi @safaa_alnabhan

 

this is the path of where style sheet saved

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 you've found one of my answers useful, please give"Kudos" or "Accept as Solution"

View solution in original post

Reply
‎09-30-2018 09:42 PM
‎09-30-2018 09:42 PM

Re: adding a custom CSS file in Magento 2

Hello @safaa_alnabhan

 

Please try run below commands using "Windows putty program/ssh":

 

rm -rf var/cache var/di pub/static/frontend
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Let me know if you still face any issue after this. 

Manish Mittal
https://www.manishmittal.com/

View solution in original post

Reply
‎09-30-2018 10:18 PM
‎09-30-2018 10:18 PM

Re: adding a custom CSS file in Magento 2

Hello @safaa_alnabhan,

 

How to use PuTTY? Here is good example, Please review it 

https://mediatemple.net/community/products/dv/204404604/using-ssh-in-putty-

 

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 theme
     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):

--

After login terminal, please go to magento root directory and follow below command

rm -rf pub/static/frontend/* pub/static/adminhtml/* var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ var/composer_home generated/
php bin/magento setup:upgrade
php -dmemory_limit=6G bin/magento setup:static-content:deploy -f
chmod -Rf 777 pub/ var/
php bin/magento cache:clean

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

View solution in original post

Reply
4 REPLIES 4
‎09-30-2018 09:42 PM
‎09-30-2018 09:42 PM

Re: adding a custom CSS file in Magento 2

 

Hi @safaa_alnabhan

 

this is the path of where style sheet saved

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 you've found one of my answers useful, please give"Kudos" or "Accept as Solution"

Reply
‎09-30-2018 09:42 PM
‎09-30-2018 09:42 PM

Re: adding a custom CSS file in Magento 2

Hello @safaa_alnabhan

 

Please try run below commands using "Windows putty program/ssh":

 

rm -rf var/cache var/di pub/static/frontend
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Let me know if you still face any issue after this. 

Manish Mittal
https://www.manishmittal.com/
Reply
‎09-30-2018 10:18 PM
‎09-30-2018 10:18 PM

Re: adding a custom CSS file in Magento 2

Hello @safaa_alnabhan,

 

How to use PuTTY? Here is good example, Please review it 

https://mediatemple.net/community/products/dv/204404604/using-ssh-in-putty-

 

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 theme
     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):

--

After login terminal, please go to magento root directory and follow below command

rm -rf pub/static/frontend/* pub/static/adminhtml/* var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ var/composer_home generated/
php bin/magento setup:upgrade
php -dmemory_limit=6G bin/magento setup:static-content:deploy -f
chmod -Rf 777 pub/ var/
php bin/magento cache:clean

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

Reply
‎03-07-2019 12:42 AM
‎03-07-2019 12:42 AM

Re: adding a custom CSS file in Magento 2

after copy vendor/magento/theme-frontend-blank/web dir to my custom theme working fine 

Matin
0 Kudos
Reply