Magento 2 - Remplacer CSS sans utiliser! Important partout

10

Je travaille actuellement sur un site Magento 2 pour un client. Supposons que la marque de mon client soit boofaret que le thème que j'essaie d'étendre / remplacer soit celui foobarque j'ai défini comme thème parent à l'aidefrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Ensuite, sous frontend/Foobarthemes/boofar/web/css/source/_theme.lessj'ai écrit le code CSS que je veux remplacer. J'ai également essayé cela avec _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Je suis obligé d'utiliser !importantquoi que ce soit pour travailler ici. Aucun des éléments de police et de texte ne fonctionne dans le code ci-dessus.

N'ai-je pas bien compris le workflow frontend de Magento 2?

magento2 theme css frontend less-css Francis Kim
la source
Où se trouve la règle css d'origine?
Aaron Allen
magento.stackexchange.com/questions/102994/… devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… magento.stackexchange.com/questions/112655/… magento.stackexchange.com/questions / 108684 /…
Ankit Shah
1
Essayez de mettre à jour ceci dans web / css / custom.css (simple css) et n'oubliez pas de supprimer var / folder et pub / static / content / frontend / yourtheme_package / yourtheme / en_US / remove css folder & run php bin / magento setup: static -cotent: déployer la commande.
Nits
Vous avez dans theme.xml "foobar1" vers le thème parent et non "foobar"
St3phan

Réponses:

8

Vous ne souhaitez avoir vos styles dans le _theme.lessfichier que si vous souhaitez remplacer le _theme.lessfichier du thème parent . Pour ce fichier, un seul d'entre eux est chargé et ce sera toujours le thème sélectionné si le fichier existe. À partir de là, il utilisera le schéma de secours pour trouver ce fichier et l'utiliser.

Donc, dans votre cas, l'utilisation du _extend.lessfichier est le bon fichier à utiliser.

C'est un peu déroutant cependant, car le code qui est placé dans le _extend.lessfichier est chargé en dernier lorsque Magento compile tous les styles qui existent sur le site. Je me demande donc s'il y a un problème avec l'ordre de chargement.

En examinant la façon dont vous l'avez configuré, essayez de configurer votre thème dans un espace de noms différent et non dans le même thème. Cela pourrait ne pas résoudre le problème, car la façon dont vous avez configuré votre thème est la même que Magento a configuré le thème luma / vide. Mais pour tout le travail que j'ai fait, j'ai mon espace de noms de vendeur qui s'étendra ensuite à partir d'un thème tiers ou de luma / blank.

La prochaine chose à essayer serait d'encapsuler votre code dans les requêtes multimédias intégrées. J'entre plus en détail ici , mais en gros, cela empêche vos styles d'être chargés deux fois dans styles-l.cssles styles-m.cssfichiers et.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}

À partir de là, tout se résume à la spécificité CSS. S'il y a autre chose qui est plus élevé que le vôtre, vous devez être plus précis dans votre définition de classe / id dans les styles. Vous voudrez peut-être publier une image de la structure DOM pour montrer ce que vous ciblez et ce qui dépasse ce que vous cherchez à cibler.

cerclesix
la source
bon point - peut-être que le thème que j'utilise (3e partie) fait quelque chose de bizarre, mais d'après ce que vous dites, si je fais la même substitution pour le thème par défaut, je ne devrais pas avoir à utiliser! important. Vaut-il la peine d'essayer?
Francis Kim
1
Je pense que oui, vous pouvez simplement créer un thème rapide avec juste le registration.php, theme.xmlet le dossier web. Recompilez-le puis sélectionnez-le dans l'administrateur et voyez ce qui se passe. Je pense que quelque chose d'autre se passe, mais cela m'est venu à l'esprit comme une possibilité.
circlesix
1
En outre, tout comme un contrôle de santé mentale, vous pouvez entrer une valeur unique dans vos styles (j'aime utiliser background-color: tomatocar personne n'utiliserait jamais cette couleur) et vérifier pour voir dans les styles compilés où se trouve la feuille dans la feuille. recherchez les pub/static/frontend/{package}/{theme}/en_us/cssdeux fichiers de styles. si ce n'est pas à la fin du fichier, quelque chose se passe avec l'ordre de chargement par défaut.
circlesix
4

Si vous pouvez appliquer vos styles dans le fichier _extend.less, cela signifie que vous avez des problèmes avec la spécificité CSS. Comme Magento2 utilise moins de compilation, la plupart des styles sont très spécifiques. Pour les remplacer, vos sélecteurs de styles doivent être plus ou moins spécifiques. Je ne publierai pas les détails du concept lui-même ici car il existe de nombreux articles en ligne.

Timik
la source
3

Si vous utilisez la configuration LESS par défaut, assurez-vous que TOUT votre MOINS est écrit dans les requêtes multimédias M2 LESS. Si vous ne le faites pas, vous vous retrouverez avec des CSS en double et probablement des problèmes de spécificité.

Tout cela se résume à la spécificité et à l'ordre de chargement, votre CSS devrait se charger après les thèmes parents (ou modules), donc pour passer outre, tout ce que vous devez faire est de répondre à leur spécificité.

Par exemple, si le thème parent utilise

.parent-selector .selector {
    ...
}

Ensuite, vous devrez écrire le même sélecteur, si pour une raison quelconque, cela ne fonctionne pas, vous devez simplement ajouter un autre sélecteur avant. Un moyen simple consiste à ajouter du corps avant, car il couvre tous les sélecteurs et ajoute de la spécificité. Ainsi:

body .parent-selector .selector {
    ...
}

Cet article contient de bonnes informations sur la spécificité CSS.

Alternativement, vous pouvez remplacer le fichier entier

Si vous faites beaucoup de personnalisations, il est préférable d'écraser le fichier entier au lieu de l'étendre. Pour ce faire, ajoutez simplement le fichier à votre thème en utilisant le même chemin de fichier et le même nom.

Ben Crook
la source
0

Pour une priorité plus élevée, vous pouvez dupliquer le sélecteur: 

  .home.home {
    display: none;
  }
Victor Sl
la source
Bon conseil! Mais malheureusement pas ce que je recherche.
Francis Kim
0

Vous devez remplacer le même .lessfichier du thème parent que vous souhaitez remplacer, comme si vous souhaitez remplacer le _theme.lessfichier, alors vous devez copier ce fichier dans le thème enfant ici (assurez-vous que le même chemin d'accès du thème parent)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

vous pouvez remplacer votre css ici.

Dipesh Rangani
la source