Guide pour styliser le CSS des pages principales et des widgets

Le plugin MemberMouse est conçu pour être aussi indépendant que possible de votre thème, de sorte que le passage d'un thème à un autre ne devrait nécessiter que peu ou pas de mise à jour des éléments MemberMouse sur votre site. Cependant, il se peut que vous souhaitiez appliquer des classes plus spécifiques à certaines zones de votre site. Cet article vous aide à localiser et à styliser les pages principales et les widgets de MemberMouse.

Styliser les pages principales

Lorsque vous installez et activez MemberMouse sur votre site Web, vous constatez qu'un ensemble de pages est créé. Il s'agit des pages principales. Lisez cet article pour en savoir plus sur les pages centrales. les pages principales sont des pages spécifiques à MemberMouse qui sont dotées d'éléments utiles. SmartTags™ pour faciliter le fonctionnement de votre site d'adhésion.

Il y a un total de 9 pages de base que les membres utiliseront indépendamment des droits d'accès de l'utilisateur ou du produit acheté. Vous pouvez créer des pages de base supplémentaires qui peuvent être personnalisées pour offrir une expérience utilisateur dynamique à vos membres. Un grand nombre de ces pages principales sont accompagnées de feuilles de style spécifiques avec des paramètres CSS propres à cette page. Il s'agit notamment de :

• Passer à la caisse page principale
  
  
• Connexion page principale
  
  
• Mon compte page principale
  
  
• Mot de passe oublié page principale
  
  
• Réinitialiser le mot de passe page principale
  

Page principale Paramètres CSS intégrés

Par défaut, dans une nouvelle installation de MemberMouse, les feuilles de style CSS des cinq pages principales énumérées ci-dessus sont contrôlées automatiquement par MemberMouse.

Si l'une de ces pages centrales ne s'affiche pas correctement (par exemple, il n'y a qu'une seule colonne ou le bouton Paypal ne s'affiche pas), vous devez vérifier que MemberMouse charge la feuille de style.

Suivez les étapes ci-dessous pour activer ou désactiver l'intégration automatique par MemberMouse des feuilles de style CSS de votre page principale :

1. Dans le menu MemberMouse, cliquez sur Paramètres générauxpuis cliquez sur le bouton Autres paramètres tabulation.
   
   
2. Faites défiler la page jusqu'à la section Core Page CSS Settings (Paramètres CSS de la page principale).
   
   
3. Si la case à cocher située à côté de la page principale est active, MemberMouse doit charger automatiquement la feuille de style CSS de cette page :
   
   
   
   
4. Si vous souhaitez désactiver le chargement de la feuille de style (afin de pouvoir appliquer vos propres styles personnalisés), décochez la case.

Localisation de la référence de la feuille de style CSS

Vous pouvez voir cette référence à la feuille de style dans les pages principales énumérées ci-dessus :

1. Dans le tableau de bord de WordPress, cliquez sur Pages.
   
   
2. Dans la section Pages, vous verrez une liste de toutes vos pages WordPress. Lorsque MemberMouse est installé, vous disposez de filtres au-dessus de la liste qui vous permettent d'afficher uniquement les pages principales :
   
   
   
   
3. La liste peut vous aider à identifier les pages centrales qui sont les pages centrales par défaut pour tous les utilisateurs :
   
   
   
   
   En vertu de la Type de page principale vous verrez le type de page centrale, ainsi que si la page est la page par défaut pour tous les utilisateurs. Si l'icône du drapeau apparaît à côté de la page Type de page principalecette page est la page par défaut. La page par défaut sera utilisée pour tous les membres qui n'ont pas de page principale différente assignée à leur niveau d'adhésion ou à leur offre groupée de produits.
   
   
4. Survolez la page que vous souhaitez modifier. Une liste d'options s'affiche. Cliquez sur Modifier :
   
   
   
   
5. Une fois la page éditée, vous devrez localiser la référence CSS dans le WYWSIWYG. Assurez-vous d'être en mode d'édition "texte" pour visualiser et modifier correctement le code :
   
   
   
   
   
6. La référence CSS se présentera comme suit :
   
   <link rel='stylesheet' type='text/css' href='http://www.yourURL.com/wp-content/plugins/membermouse/resources/css/user/mm-checkout.css' />

Modification de l'emplacement de la feuille de style CSS par défaut

Une autre option pour styliser vos pages consiste à copier les feuilles de style CSS de MemberMouse. La dernière section de cet article contient les liens vers les feuilles de style disponibles à télécharger. Ensuite, vous pouvez modifier la référence CSS dans le code de votre page principale pour refléter l'emplacement de cette nouvelle feuille de style, comme ceci :

 <link rel='stylesheet' type='text/css' href='http//:www.yourURL.com/sitespecifics/customestylesheet.css'/>

Modification des feuilles de style de MemberMouse

NOTE : L'une des meilleures façons de voir ce que ce code affiche réellement est d'utiliser l'inspecteur d'éléments dans votre navigateur. Si vous ne savez pas comment utiliser l'inspecteur d'éléments, lisez le document suivant cet article pour Google Chromeou cet article pour Firefox.

Vous avez toujours la possibilité de modifier les feuilles de style CSS fournies par MemberMouse pour les adapter à vos besoins. Pour cet exemple, nous examinerons la feuille de style utilisée sur la page d'accueil de Passer à la caisse page de base.

Voici une section de la Passer à la caisse code de la page :

[MM_Form_Section type='accountInfo']
<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
<h3>Informations sur le compte</h3>
<p class="mm-formField">
 <label>Prénom :</label>
 [MM_Form_Field type='input' name='firstName']
</p>

Lorsque vous ouvrez l'inspecteur d'éléments, vous pouvez l'utiliser pour localiser les div ID ou les classes que vous voyez dans le code de votre page. Dans l'exemple ci-dessous, j'ai localisé la div id="mm-account-information-section" à laquelle est appliquée la classe "mm-checkoutInfoBlock" :

Si nous voulions appliquer une couleur d'arrière-plan, alors dans la feuille de style mm-checkout.css, nous ajouterions simplement :

couleur de fond : #333 ;

à la feuille de style. Ce type d'édition est disponible pour toute propriété CSS que vous souhaitez appliquer. Vous pouvez également supprimer des classes CSS si vous le souhaitez.

Utilisation de classes personnalisées sur les étiquettes intelligentes

Si vous préférez appliquer des classes déjà créées à vos pages principales, vous pouvez également le faire. C'est une excellente option si votre thème contient des classes CSS déjà préparées que vous pouvez réutiliser. NOTE : Si vous ne savez pas comment les classes CSS sont utilisées en HTML, veuillez lire cet article.

Pour utiliser une classe CSS personnalisée, vous devez connaître le nom de la classe que vous souhaitez utiliser. Pour ce faire, il vous suffit de regarder le code de votre page principale (en suivant les étapes suivantes) Ensuite, lorsque vous connaissez l'élément que vous souhaitez modifier, il vous suffit de remplacer la classe existante :

<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
 
avec votre nouvelle classe CSS

<div id="mm-account-information-section" class="myownclass">

Utilisation des styles de boutons de MemberMouse

Lorsque MemberMouse est activé sur votre site Web, vous avez accès à plus de 60 styles de boutons Web 2.0. Lisez cet article pour apprenez à utiliser ces styles de boutons sur votre site.

Exemples de feuilles de style CSS

Vous trouverez ci-dessous des liens vers les feuilles de style CSS utilisées sur certaines pages centrales et dans le widget de contenu protégé :

• Passer à la caisse page principale - mm-checkout.css
  
• Connexion page principale - mm-login.css
  
• Mon compte page principale - mm-myaccount.css
  
• Mot de passe oublié page principale - mm-pour-mot-de-passe.css
  
• Widget contenu protégé - mm-protectedcontentwidget.css
  
• Tous les fichiers CSS Zip - mm-stylesheets.zip