search

magento / magento2

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.
http://www.magento.com
Open Software License 3.0
11.48k stars 9.29k forks source link

Magento 2.x some css and js not working in custom theme(theme-fallback not working accurately) #8265

Closed VIVEKLUCKY249 closed 7 years ago

VIVEKLUCKY249 commented 7 years ago

I have installed Magento CE 2.1.2 in my local system Windows 7(64 bit) Uwamp.

Now I have created my custom theme and set it up in the backend. Below are the theme specific files and I have kept some folders like web/css/source, web/fonts, web/images etc. empty, as I want those files to be called directly from parent theme.

C:\UwAmp\www\testmage212\app\design\frontend\Vivek\Custom\registration.php:

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vivek/Custom',
    __DIR__
);

C:\UwAmp\www\testmage212\app\design\frontend\Vivek\Custom\theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Custom</title> <!-- your theme's name -->
    <parent>Magento/luma</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
    <media>
        <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
    </media>
</theme>

C:\UwAmp\www\testmage212\app\design\frontend\Vivek\Custom\Magento_Theme\layout\default_head_blocks.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="css/source/style.css" />
</head>

and

C:\UwAmp\www\testmage212\app\design\frontend\Vivek\Custom\media\preview.jpg

which is copied from Luma Theme.

After setting this same theme from backend, everything else works fine with new theme on frontend, but some css & js files are not being called from the parent theme, which results in icons and logo not displaying at all in frontend Homepage, Product Listing page etc. Also the "Hot Sellers" products block from Homepage disappeared.

Any hints on what could be the issue and how to resolve this ?

mrkhoa99 commented 7 years ago

@VIVEKLUCKY249 When deploying static content, Magento may ignore the assets of custom theme if the assets files(css, js) under web were empty. So, we need to put some css or js files under this folder.

naydav commented 7 years ago

Unfortunately, I could not reproduce the issue as you described it on 2.1.3 version. Do you have an ability to verify this bug on 2.1.3 Magento version? If not - we recommend to upgrade to latest Magento version (2.1.3), where this issue is not reproducible

If can - please, format this issue according to the Issue reporting guidelines: with steps to reproduce, actual result and expected result. Your cusotm CSS/LESS files, Screenshots, Theme configuration would be helpful, too.

naydav commented 7 years ago

Unfortunately, I could not reproduce the issue as you described it on 2.1.3 version.

Preconditions:

  1. Server DocumentRoot is configured on pub directory
  2. Permissions is configured
  3. Magento 2.1.3 is installed
  4. Stores > Configuration > Advanced > Developer > CSS Settings settings: Merge CSS Files => No Minify CSS Files => No

Steps to reproduce:

  1. Make sure that you set your Magento application to the developer or default mode.

  2. Create Test theme

    1. Create a directory for the theme under app/design/frontend/TestNamespace/theme_dir
    2. Add app/design/frontend/TestNamespace/theme_dir/registration.php 
      
<?php
use Magento\Framework\Component\ComponentRegistrar;

    ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/TestNamespace/theme_dir', DIR);

    3. Add `app/design/frontend/TestNamespace/theme_dir/theme.xml`
```xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Test Theme</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>
    1. Add app/design/frontend/TestNamespace/theme_dir/media/preview.jpg (can be copied from luma theme)
    2. Test custom CSS file:
      1. Add app/design/frontend/TestNamespace/theme_dir/Magento_Theme/layout/default_head_blocks.xml 
        <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="css/source/custom-css-file.css"/>
</head>
</page>
      2. Add CSS file with some test styles app/design/frontend/TestNamespace/theme_dir/web/css/source/custom-css-file.css 
        /** custom css file test */
footer * {
color: red !important;
}
    3. Test custom LESS file:
      1. Change app/design/frontend/TestNamespace/theme_dir/Magento_Theme/layout/default_head_blocks.xml 
        <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="css/source/custom-css-file.css"/>
    <css src="css/source/custom-less-file.css"/>
</head>
</page>
      2. Add LESS file with some test styles app/design/frontend/TestNamespace/theme_dir/web/css/source/custom-less-file.less 
        /** custom less file test */
@fontColor: red;
.page-header .panel.wrapper, .page-header .panel.wrapper * {
color: @fontColor !important;
}

        If the system does not find the included CSS files, it searches for the same file names with a .less extension.

    4. Override parent styles test:
      1. Add app/design/frontend/TestNamespace/theme_dir/web/css/source/_theme.less 
        /** override parent styles test */
@color-gray-middle3: yellow;
    5. Extend parent styles test:
      1. Add app/design/frontend/TestNamespace/theme_dir/web/css/source/_extend.less 
        /** extend parent styles test */
@import '_test-import.less';
      2. Add LESS file with some test styles app/design/frontend/TestNamespace/theme_dir/web/css/source/_test-import.less 
        /** import styles test */
@headerFontSize: 72px;
@headerFontColor: navy;
h1 {
font-size: @headerFontSize !important;
color: @headerFontColor !important;
}
  3. Apply a theme on backend
  4. Clear the cache
  5. Enable production mode
  6. Open frontend 2017-02-06_1331
  7. Run bin/magento setup:static-content:deploy No errors during style compilation

If your style changes do not apply after refreshing the page, cleaning the static files cache might help. See the Clean static files cache topic for instructions how to do this.

Related reading

Create a storefront theme Simple ways to customize a theme's styles Cascading style sheets (CSS) Include CSS Apply and configure a storefront theme

Aditional questions:

Please add more details to your description of the steps you followed when identifying this issue. Screenshots or logs would be helpful, too. Thanks in advance