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!

fmsthird
  • 4,592
  • 4
  • 17
  • 41
Starkemp315
  • 41
  • 6
  • 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 – Pawan Jan 20 '19 at 17:11
  • It looks like I don't have permissions to these files. – Starkemp315 Jan 20 '19 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? – Starkemp315 Jan 20 '19 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

     – Starkemp315 Jan 20 '19 at 21:26

2 Answers2

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)

fmsthird
  • 4,592
  • 4
  • 17
  • 41
  • Thank you so much. I will give this a try and get back to you all. – Starkemp315 Jan 20 '19 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? – Starkemp315 Jan 20 '19 at 21:44
  • Sorry I am such a newb... – Starkemp315 Jan 20 '19 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. – Starkemp315 Jan 21 '19 at 00: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. – Starkemp315 Jan 21 '19 at 00: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.

PЯINCƎ
  • 11,669
  • 3
  • 25
  • 80
  • 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 – Starkemp315 Jan 21 '19 at 00:26
  • How you added your customstyle.css ? – PЯINCƎ Jan 21 '19 at 13:37
  • Manually, backend with FTP and as css not less. – Starkemp315 Jan 22 '19 at 01:29