1

I want to change the background colour of my magento 2 default page but it doesn't seem to be working. My code is:

Pulsestorm/StartinWithLess/etc - module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="pulsestorm_StartingWithLess" setup_version="0.0.1"/>
</config>

Pulsestorm/StartinWithLess/view/frontend/layout - default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 
 xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento
/Framework/View/Layout/etc/page_configuration.xsd">
<head>
    <css src="Pulsestorm_StartingWithLess::red-alert.css"/>
</head>
</page>

Pulsestorm/StartinWithLess/view/frontend/web - red-alert.css

body
{
background-color:#f00;
}    

Pulsestorm/StartingWithLess - registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Pulsestorm_StartingWithLess',
    __DIR__
);

Any help would be much appreciated :)

  • Does your css loaded in your theme? Did you run static content deploy? – Sukumar Gorai Aug 22 '18 at 15:44
  • I did yeah but still doesn't work – Greg Aug 22 '18 at 16:31
  • Css is loading or not? – Sukumar Gorai Aug 22 '18 at 16:39
1

You forgot Pulsestorm/StartingWithLess/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Pulsestorm_StartingWithLess',
    __DIR__
);

Check casing (and spelling!) is the same for all uses of Pulsestorm and StartingWithLess

Install the module with

php bin/magento setup:upgrade

Then set the store to developer mode so the static content does not need to be deployed

php bin/magento deploy:mode:set developer
  • No luck i'm afraid – Greg Aug 22 '18 at 16:31
  • 1
    Edited my answer, also saw you spelled startinwithless wrong in the folder names – Alex Aug 23 '18 at 8:54
1

If you take a look at the file lib/web/css/source/lib/variables/_colors.less, you will see a less variable called @page__background-color. You can override this variable in your theme.

Create a file in your theme at web/css/source/lib/variables/_colors_extend.less

@page__background-color: #FF0000;

Create a file in your theme at web/css/source/_extend.less

@import 'lib/variables/_colors_extend';

Then reload your files. You might need to:

rm -R pub/static/frontend
rm -R var/view_preprocessed

After this, refresh your page and you should be good to go.

One common mistake that developers make in Magento 2 is that they directly style common elements. However, it is my belief that they are breaking the system. Use the _extend.less file, which will be automatically imported by Magento, to import your custom file which contains overrides of only the specific variables you want to override while leaving the rest of the theme intact.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.