web-dev-qa-db-fra.com

les conflits de style de plugin, comment remplacer?

Mon client utilise ces deux plugins: - Boutons Tout en Un - Palette Genesis Design

Si vous consultez cet exemple de page http://bsc.mustor.com/testing-buttons/ , le texte de l'heure sur le bouton est marron et rouge (survol). C'est censé être blanc.

La feuille de style insérée par Genesis Design Palette est prioritaire sur les boutons Tout en un ET sur les styles de thème. Ceci en dépit du style.css de All In One Buttons et du style.css du thème, qui font tous deux référence spécifiquement à l'élément en question aio-orange. Le style de la palette de conception de Genesis remplace un style plus général appliqué au contenu de l'entrée.

Comment puis-je donner la priorité aux styles corrects dans cette situation?

Merci

pluginsthemesstylesheetstyles
1
sammond

Sur la définition du bouton aio-orange dans les boutons tout-en-un/css/display.css? Ver = 4.1.1, ajoutez! Important après le #FFF.

La couleur est écrasée car vous chargez les styles AIO en premier, puis un autre style qui remplace les styles de bouton ou non. Avec! Important, vous pouvez indiquer au navigateur d’utiliser celui-ci même si ce n’est pas la dernière définition.

Donc, ce serait comme

a.aio-orange, a.aio-orange:link, a.aio-orange:hover, a.aio-orange:visited, a.aio-orange:active, a.aio-orange:focus {
color: #FFF !important;
}

Ou quelque chose comme ça.

1
jimihenrik

Idéalement, l’un de ces plugins aurait la possibilité de charger son fichier CSS en dernier ou en premier. Vous voudriez que le bouton AIO soit chargé en dernier.

Sinon, vous pouvez éditer la classe CSS avec la couleur de votre choix sous la forme "! Important" comme l'a suggéré jimihenrik, bien que cela ne soit pas recommandé pour les solutions à long terme.

Vous pouvez également remplacer le style CSS incriminé par le style de Genesis Design Palette en étant encore plus "spécifique" que dans votre règle CSS.

Exemple de précision: leur code dit:

body.gppro-custom .content > .entry .entry-content a { color: maroon; }

Votre code peut l'écraser en étant plus spécifique avec la règle CSS:

body .content > .entry .entry-content .aio-button-center a { color: white; }

Cela modifiera tous les liens .aio-button-center au sein du contenu .entry en blanc. Vous pouvez placer ceci dans n'importe quel fichier CSS de votre choix ... comme votre CSS personnalisé pour le thème.

Pour plus d'informations, lisez cet article amusant sur la spécificité CSS: https://css-tricks.com/specifics-on-css-specificity/

0
Sean Grant