As a seasoned Magento 1 developer, which is of no use what-so-ever here, I am attempting to work on creating a custom Magento 2 theme for a new multi-store site. What a perpendicular learning curve this is turning out to be.
The initial data migration into M2 is a 4-store/language set up.
I have created a theme folder (shown below -css files marked * are all files tested). The theme appears in the admin, and is selected for the different stores, the correct logo appears. However, the frontend source keeps looking for css files inside locale specific folders and the actual CSS files do not exist.
e.g.
http://mag2.local/pub/static/frontend/[company]/[themename]/en_GB/css/abc.css
I end up with completely css-less front end pages.
Q1. Does all the CSS need to be generated in locale-based folder? Can there not be a general all-store CSS? It is the same design for all stores. Q2. I have tried adding CSS into local subfolders such as css/en_GB/abc.css but that doesn't work either.
I have used Grunt to do the CSS processing but that always requires a locale too, and have tried client side processing (set in the admin).
I have looked at a ton of online guides to this, including the the official Mag one and they all "just work" or do things slightly differently. In true Magento style - they seem to make the "simple things" exceedingly complicated. I have been doing web dev for nearly 20 years and now I can't even change the sodding font colour!
I do
bin/magento cache:clean
and
rm -rf var/view_preprocessed/; rm -rf pub/static/; rm -rf var/cache/
between changes.
Please help...
Theme directory structure (inside /app/design/frontend/)
[company]
- [themename]
- etc/
view.xml
- Magento_Theme
- layout
default.xml
- media
- web
- css
- source
_extend.less *
_theme.less *
styles-abc.less *
abc.css *
styles-l.css *
- fonts
- images
- js
composer.jsn
registration.php
theme.xml
theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>My new theme</title>
<parent>Magento/blank</parent>
</theme>
registration.php
<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME,'frontend/[company]/[themename]', __DIR__);
composer.json
{
"name": "[company]/[themename]",
"description": "My new Theme",
"config": {
"sort-packages": true
},
"require": {
"php": "~7.1.3||~7.2.0",
"magento/framework": "102.0.*",
"magento/theme-frontend-blank": "100.3.*"
},
"type": "magento2-theme",
"autoload": {
"files": [
"registration.php"
]
},
"version": "0.0.1"
}
Magento_Theme/layout/default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/companylogo.png</argument>
<argument name="logo_img_width" xsi:type="number">338</argument>
<argument name="logo_img_height" xsi:type="number">54</argument>
</arguments>
</referenceBlock>
</body>
<head>
<css src="css/abc.css" />
<css src="css/styles-abc.css" />
</head>
</page>
I have also tried specifying the css inside a default_head_blocks.xml file, e.g.
<?xml version="1.0"?>
<default xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-abc.css" />
<css src="css/styles-m.css" media="screen and (min-width: 768px)"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/_extend.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
</head>
</default>
