I am running Magento 2.3 on Ubuntu 18.04 server with Apache 2.4, MariaDB and PHP 7.2. Magento is running in developer mode.
I have created a custom theme which inherits from the Magento/blank
theme.
I have also created a module, which should override the theme's style and apply a background image to the header.
I have created a basic module according to Magento's documentation. Styles are contained within the module's _module.less
file which are intended to override the background
property which was set within my custom theme.
Once I upload the module and issue the commands php bin/magento cache:flush
, php bin/magento setup:upgrade
and then php bin/magento module:status
, I can see that my module has been successfully registered and enabled.
When I inspect the source of my website using my web browser's code inspector, I can see that the value I assigned is not compiled into the CSS files.
My initial thought was that I had bad syntax in my _module.less
file, but I don't see any compilation errors, so I assume that either the _module.less
file is never acknowledged during compilation, or that my theme's styles are prioritised over those of the module.
The [module_author]/[module_name]/view/frontend/web/css/source/_module.less
file contains the following code:
// /**
// * Copyright © Joshua Flood. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Variables
// _____________________________________________
@header__background-image: "../../images/header-background-image.png";
@header__background-color: #EEF;
@header__background: @header__background-image,
@header__background-color;
//
// Common
// _____________________________________________
& when (@media-common = true) {
//
// Header
// ---------------------------------------------
.page-header {
.lib-css(background, @header__background);
}
}
The obvious solution to this problem would be to ensure that the syntax is correct and then to ensure that the module styles properly override the theme styles.
I would be happy, however, if someone could explain to me how I would go about integrating the background styling into my existing theme, but create a file upload form on the backend which would allow the admin user to replace the background image, although I'm not sure that this can be done without implementing a separate module.