1

Magento 2.1.2 Development Mode.

I want to overwrite the styles of the Luma theme blocks.

I have included the default_head_blocks.xml file in the path:/app/design/frontend/Vendor/mytheme/Magento_Theme/layout The file has the following code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<css src="css/custom.css" />
<css src="css/custom_mobile.css" media="screen and (min-width: 768px)"/>
</head>
</page>

In the path: /app/design/frontend/Vendor/mytheme/web/css I created the custom.css file, and in the file I have included the styles I want to modify,for example:

.womens-category-pants img, .womens-category-tanks img, .womens-category-shorts img, .mens-category-tees img, .mens-category-hoodies img, .mens-category-shorts img, .gear-category-bags img, .gear-category-equipment img, .gear-category-watches img {
max-width: 100% !important;
position: absolute;
z-index: 0;
top: 0;
right: 0;
left: 10%;
}

Then I have executed the following commands:

rm -rf var/generation var/view_preprocessed var/cache var/page_cache
rm -rf pub/static
bin/magento cache:clean
bin/magento cache:flush
php bin/magento setup:static-content:deploy
php  bin/magento setup:static-content:deploy es_ES
bin/magento indexer:reindex

But the styles are not applied, although in the /pub/static/frontend/Vendor/ mytheme/es_ES/css directory the custom.css file is located with the code that I included in that file.

Next I tested including the _sources.less file in the path /app/design/frontend/Vendor/mytheme/web/css and with the following code:

// /**
//  * Copyright © 2016 Magento. All rights reserved.
//  * See COPYING.txt for license details.
//  */

@import '_variables.less';
@import (reference) '_extends.less';
@import '_typography.less';
@import '_layout.less';
@import '_tables.less';
@import '_messages.less';
@import '_navigation.less';
@import '_tooltips.less';
@import '_loaders.less';
@import '_forms.less';
@import '_icons.less';
@import '_buttons.less';
@import '_sections.less';
@import '_pages.less'; // Theme pager
@import '_actions-toolbar.less';
@import '_breadcrumbs.less';
@import '_popups.less';
@import '_price.less';
@import (css) 'custom';

I have added the last line taking as reference the documentation of http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-preprocess.html

I re-executed the commands deleting the directories and displaying static content, but without success.

Can anyone tell me I'm doing wrong?

0

The styles of Luma's static blocks are stored here: /vendor/magento/module-cms-sample-data/fixtures/styles.css I've tried creating a _styles_extend.less file and importing it into the extends.less file, without success. I have tried creating a _styles.less file (for overwriting) with the original file contents plus Luma styles in the Vendor/mytheme/web/css/ source directory, but in this case I get the following errors:

FileError: 'http://www.conservera.es/pub/static/frontend/Conservera   /tarifa/es_ES/css/styles-m.css' wasn't found (404)
in styles-m.css

FileError: 'http://www.conservera.es/pub/static/frontend/Conservera/tarifa/es_ES/css/styles-l.css' wasn't found (404)
in styles-l.css

The next test has been to include the mentioned file _styles.less in Vendor/mytheme/web/css, but throws the same mistakes as in the previous test.

Another additional test has been to include the _styles.less file in the web/source directory of my theme but removing from this file the following lines that are copied from the original file:

@import 'source/lib/_lib.less'; // Global lib
@import 'source/_sources.less'; // Theme styles
@import 'source/_components.less'; // Components styles (modal/sliding panel) 

In this case there are no errors but the modification of the styles is not applied.

I still need help.

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.