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

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

2 Answers 2

Reset to default
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
Improve this answer
2
  • No luck i'm afraid
    – Greg
    Commented Aug 22, 2018 at 16:31
  • 1
    Edited my answer, also saw you spelled startinwithless wrong in the folder names
    – Alex
    Commented Aug 23, 2018 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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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