Remplacement des styles de thèmes vides dans Magento 2

Comment feriez-vous pour remplacer les styles de navigation d'un thème personnalisé lors de l'héritage du thème vierge dans Magento 2?

J'ai un theme.cssfichier dans mon app/design/frontend/<Vendor>/<theme>/web/cssdossier, mais je suis conscient que Magento 2 utilise MOINS. Je peux facilement remplacer les styles dans ma theme.cssfeuille de style, mais je ne veux pas avoir à continuer à utiliser !important.

En outre, j'utilise Bootstrap 3, et je suppose que les styles du thème vide remplaceront toutes les instructions de style qui correspondent à Bootstrap. Quelle est la meilleure façon d'aborder cela?

— Gareth Daine
source

Réponses:

Les 2 façons recommandées par Magento pour remplacer ou étendre les styles à partir d'un thème parent:

1. Un moyen simple

Étendre:

Dans votre répertoire de thèmes, créez un web/css/sourcesous-répertoire. (Vous avez déjà fait cette partie) Créez un _extend.lessfichier là-bas.

Selon la documentation :

"L'extension d'un thème à l'aide de _extend.less est l'option la plus simple lorsque vous êtes satisfait de tout ce que contient le thème parent, mais que vous souhaitez ajouter plus de styles."

Passer outre:

Au lieu de créer le _extend.lessfichier, vous créez un _theme.lessfichier. Dans ce cas, vous devez copier toutes les variables dont vous avez besoin à partir du parent _theme.less, y compris celles qui ne seront pas modifiées. Effectuez ensuite vos modifications.

Selon la documentation , l'inconvénient est:

"Vous devez surveiller et mettre à jour manuellement vos fichiers chaque fois que le _theme.less du parent est mis à jour."

2. Manière structurée

Étendre:

Cette méthode vous permet de mieux organiser votre code. Vos modifications seront structurées. Au lieu d'utiliser un seul _extend.less fichier pour inclure toutes vos modifications, vous créez un fichier d'extension pour chaque composant de la bibliothèque d'interface utilisateur Magento que vous souhaitez modifier.

Disons que vous souhaitez étendre les styles à partir des boutons et des composants de navigation. Dans votre répertoire thématique créer 2 fichiers: _buttons_extend.lesset _navigation_extend.less, puis ajouter vos modifications pour chaque composant dans le fichier correspondant.

Ensuite, vous créez le _extend.lessfichier en ajoutant ce code:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Passer outre:

Dans votre thème, créez une copie du fichier correspondant au composant de l' interface utilisateur que vous souhaitez modifier ( _buttons.less, _navigation.less, etc.) Ce fichier remplacera le _buttons.lessdu thème parent.

Il est important de noter la différence entre remplacer et étendre .

Vous pouvez en savoir plus sur la substitution et l'extension dans cette documentation ou sur CSS dans Magento 2 dans le Guide du développeur frontal .

— Luis Garcia
source

Disons donc que j'ai un dossier Vendor_Namespace, j'y ajoute un autre dossier nommé "web / css / source / _extend.less" et le _extend.less-File dans web / css / source / saura où se trouve le fichier correspondant? Est-ce que je comprends bien

— Max

Oui, il suffit de créer le fichier web/css/source/_extend.lesset d'y mettre vos styles.

— Luis Garcia

J'ai créé un fichier _extend.less avec importation d'un _slider.less: <theme_folder> / css / source / les deux fichiers sont dans le même chemin, mais ne fonctionnent pas, toutes les règles dans _slider.less étaient introuvables dans les fichiers générés par .css, Je suis en mode développeur et je lance "php magento setup: static-content: deploy"

— xzegga

Avez-vous supprimé le cache de votre navigateur?

— Luis Garcia

Puis-je remplacer <theme_folder> / css / source / lib / variables? comment je peux changer une variable d'un fichier moins? (disons que je veux remplacer le @ bouton-fond par exemple) - je dois l'écrire dans _buttons_extend.less ou je peux remplacer tout le lin / web / css / source / lib / variables

— Goldy

J'ai eu un problème similaire en utilisant Foundation. La façon officielle de le faire est de remplacer le fichier less du module spécifique et d'y modifier le CSS. Il sera ensuite récupéré par Magento lors de la compilation

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

Finalement, j'ai fini par supprimer tous les fichiers CSS par défaut créés par Magento. J'ai trouvé qu'il était beaucoup plus facile d'écrire du CSS personnalisé, en particulier en utilisant un framework comme Bootstrap, que d'essayer de remplacer tous les différents modules. Vous pouvez le faire dans:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
source

Bon moyen de commettre des trucs. Mais la question consiste à "étendre" un thème complet et à en ajouter davantage.

— Miguel Felipe Guillen Calo

Non, la question concerne le dépassement.

— Black

Disons que vous voulez remplacer styles-m.css , puis mettez la copie web/cssde votre thème, nommez -la custom-styles-m.css .

Utilisez ensuite ce code dans vos thèmes 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>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— Noir
source