0

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>
  • ARGH. I think doing rm -rf var/view_preprocessed/; rm -rf pub/static/; rm -rf var/cache/ has caused the problem because the .htaccess in pub.static has also been removed.... doh doh doh – Jon Holland Jun 21 at 13:36
  • Still won't show. Unable to resolve the source file for 'frontend/[vendor]/[theme]/en_GB/css/styles-abc.css' <pre>#1 Magento\Framework\App\StaticResource->launch() called at [lib/internal/Magento/Framework/App/Bootstrap.php:257] #2 Magento\Framework\App\Bootstrap->run(&Magento\Framework\App\StaticResource#0000000058c3c5010000000075a67a47#) called at [pub/static.php:13] </pre> – Jon Holland Jun 24 at 11:49
0

You can extend the css by following way,

Create a new file on following path, web\css\source\_extend.less

@import '_custom.less';

Note: here "_custom.less" is the custom file that you have created.

  • thanks for this although at the moment it doesn't even pick up the CSS I have added directly into web/source/css/_extend.css (which for testing purposes is body{background:red;} !) – Jon Holland Jun 20 at 14:33
  • do not add the css directly that will not work, import your custom file into following path web\css\source_extend.less – Oscprofessionals Jun 20 at 14:53
  • Why would an import work in _extend.less but no css in that file? Not trying to be tricky just understand. Thanks – Jon Holland Jun 21 at 10:25
  • 1
    Magento has two root source file by default - styles-l.less and styles-m.less. Both the files import the _extend.less file in them. So if you write down css directly to _extend.less, sometimes those rules will not work but if you import the file it will 100% work. – Oscprofessionals Jun 26 at 10:24

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.