0

How to add custom css file in magento2.2.6?

I am in Production mode, using Luma Magento 2.2.6.

Do I have to be in Developer mode to make the solution in the above link work?

Before switching to Developer I have to clear the contents of : 

var/cache generated/metadata generated/code var/view_preprocessed pub/static

But my file structure is different I can never seem to find the correct folders.

I know this is a beginner question but I really appreciate your professional expertise and guidance on this 7 month long obstacle I keep running into.

Thank you in advance!

Improve this question
4
  • You don't need to be in developer mode. If you are in developer mode, changes you made will apply immediately. If you are in production mode, changes directly will not apply. You need to rm -rf var/cache, rm -rf generated rm -rf var/view_preprocessed run php bin/magento setup:static-content:deploy Commented Jan 20, 2019 at 17:11
  • It looks like I don't have permissions to these files. Commented Jan 20, 2019 at 17:41
  • Can I make changes to the less files, style-m.css and style-l.css? If so, do I have to be in developer mode to do this? Commented Jan 20, 2019 at 17:44
  • I am in Production mode. I ran the rm -rf codes mentioned above in the CLR and got this error for all three: >>> [Symfony\Component\Console\Exception\CommandNotFoundException] Command "rm" is not defined. Did you mean this? setup:performance:generate-fixtures Commented Jan 20, 2019 at 21:26

2 Answers 2

Reset to default
0

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.xml app / design / frontend / [vendor] / [theme] / web / css / yourcustom.css

Place this code within default.xml

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

Apply your theme

Don't forget to run setup:upgrade before deploying static-content (sometimes deploying static:content directly doesn't apply changes)

Improve this answer
5
  • Thank you so much. I will give this a try and get back to you all. Commented Jan 20, 2019 at 18:51
  • Is this the order I should follow? 1) Change to developer mode ; 2) create the above file structure ; 3) Then run set:upgrade. 4) delete var/cache, var/generation , and var/page_cache/ ; 5) switch back to production; 6) proceed to fill in content? Commented Jan 20, 2019 at 21:44
  • Sorry I am such a newb... Commented Jan 20, 2019 at 21:47
  • So I changed to developer mode, created the file structure above, added the xml file , ran setup:upgrade, deleted the content of var/cache and var/page_cache folders, ran setup:upgrade again, made a test ID class in "css/yourcustom.css" , created an element in with the ID name in page in the CMS , saved, cleared cache, reindexed, viewed page in browser but did not see any ID style changes from the " css/yourcustom.css " file. Commented Jan 21, 2019 at 0:03
  • I really appreciate this advice and help you have given me. I am learning a lot but can't seem to make it work. I will keep trying. Thank you all. Commented Jan 21, 2019 at 0:16
0

Use a developer mode when you are customizing the Magento

Use a production mode when you want to deploy your Magento on production

The big differences between the both modes:

Developer mode:

  • Static view files are not cached; they are written to the Magento pub/static directory every time they’re called

  • An exception is thrown in the error handler, rather than being logged

  • System logging in var/report is verbose

Production mode:

  • Static view files are served from the cache only.

  • Errors are logged to the file system and are never displayed to the user.

  • You cannot enable or disable cache types using the Magento Admin

  • Does not allow you to enable or disable cache types in Magento Admin

So, you are customizing the Magento, you need to be in Developer Mode.

More information in Magento Devdocs.

Good luck.

Improve this answer
3
  • Thank you PЯINCƏ. I changed to Developer mode, then followed the above instructions best I could but couldn't get it to work yet. Couldn't I change the style-l.css and style-m.css files? or some how add my_custom.css to the: /public_html/pub/static/frontend/Magento/luma/en_US/css/ folder? Thank you Commented Jan 21, 2019 at 0:26
  • How you added your customstyle.css ? Commented Jan 21, 2019 at 13:37
  • Manually, backend with FTP and as css not less. Commented Jan 22, 2019 at 1:29

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.