Anleitung zur Gestaltung des CSS von Hauptseiten und Widgets

Das MemberMouse-Plugin ist so konzipiert, dass es so wenig wie möglich von Ihrem Thema abhängt, so dass beim Wechsel von einem Thema zu einem anderen die MemberMouse-Elemente auf Ihrer Website kaum oder gar nicht aktualisiert werden müssen. Möglicherweise möchten Sie jedoch in bestimmten Bereichen Ihrer Website spezifischere Klassen anwenden. Dieser Artikel soll Ihnen helfen, die MemberMouse-Kernseiten und -Widgets zu finden und zu gestalten.

Gestalten von Hauptseiten

Wenn Sie MemberMouse auf Ihrer Website installieren und aktivieren, werden Sie feststellen, dass eine Reihe von Seiten erstellt wird. Dies sind die Hauptseiten. Lesen Sie diesen Artikel, um mehr über die Hauptseiten erfahren. Kernseiten sind MemberMouse-spezifische Seiten, die mit nützlichen Funktionen ausgestattet sind. SmartTags™. um die Funktionsweise Ihrer Mitgliederseite zu vereinfachen.

Es gibt insgesamt 9 Hauptseiten, die von den Mitgliedern unabhängig von den Zugriffsrechten oder dem gekauften Produkt genutzt werden können. Sie können zusätzliche Kernseiten erstellen, die für eine dynamische Benutzererfahrung für Ihre Mitglieder angepasst werden können. Viele dieser Kernseiten verfügen über spezielle Stylesheets mit CSS-Einstellungen, die für die jeweilige Seite spezifisch sind. Dazu gehören:

• Kasse Kernseite
  
  
• Anmeldung Kernseite
  
  
• Mein Konto Kernseite
  
  
• Passwort vergessen Kernseite
  
  
• Passwort zurücksetzen Kernseite
  

Integrierte CSS-Einstellungen der Hauptseite

Standardmäßig werden bei einer Neuinstallation von MemberMouse die CSS-Stylesheets für die fünf oben aufgeführten Hauptseiten automatisch von MemberMouse gesteuert.

Wenn Sie Probleme mit der korrekten Anzeige einer dieser Hauptseiten haben (z. B. gibt es nur eine Spalte oder die Schaltfläche "Paypal" wird nicht angezeigt), dann sollten Sie überprüfen, ob MemberMouse das Stylesheet lädt.

Führen Sie die folgenden Schritte aus, um zu aktivieren oder zu deaktivieren, dass MemberMouse Ihre CSS-Stylesheets für die Hauptseite automatisch einbezieht:

1. Gehen Sie im Menü MemberMouse auf Allgemeine Einstellungenund klicken Sie dann auf das Symbol Andere Einstellungen tab.
   
   
2. Blättern Sie nach unten zum Abschnitt CSS-Einstellungen für Hauptseiten.
   
   
3. Wenn das Kontrollkästchen neben der Hauptseite aktiviert ist, sollte MemberMouse das CSS-Stylesheet für diese Seite automatisch laden:
   
   
   
   
4. Wenn Sie das Laden des Stylesheets deaktivieren möchten (damit Sie Ihre eigenen benutzerdefinierten Stile anwenden können), deaktivieren Sie das Kontrollkästchen.

Auffinden der CSS-Stylesheet-Referenz

Sie können diese Stylesheet-Referenz in den oben aufgeführten Hauptseiten sehen:

1. Klicken Sie auf dem WordPress-Dashboard auf Seiten.
   
   
2. Im Abschnitt Seiten sehen Sie eine Liste aller Ihrer WordPress-Seiten. Wenn MemberMouse installiert ist, haben Sie oberhalb der Liste Filter, mit denen Sie nur die Hauptseiten anzeigen können:
   
   
   
   
3. Anhand dieser Auflistung können Sie feststellen, welche Hauptseiten die Standardseiten für alle Benutzer sind:
   
   
   
   
   Im Rahmen der Kernseite Typ sehen Sie den Typ der Hauptseite und ob die Seite die Standardseite für alle Benutzer ist. Erscheint das Flaggensymbol neben dem Kernseite Typ, dann ist diese Seite die Standardseite. Die Standardseite wird für jedes Mitglied verwendet, das seiner Mitgliedsstufe oder seinem Produktpaket keine andere Hauptseite zugewiesen hat.
   
   
4. Bewegen Sie den Mauszeiger über die Seite, die Sie bearbeiten möchten. Sie sehen dann eine Liste von Optionen. Klicken Sie auf "Bearbeiten":
   
   
   
   
5. Sobald Sie die Seite bearbeitet haben, müssen Sie die CSS-Referenz im WYWSIWYG finden. Vergewissern Sie sich, dass Sie sich im "Textbearbeitungsmodus" befinden, um den Code richtig anzeigen und bearbeiten zu können:
   
   
   
   
   
6. Die CSS-Referenz sieht dann so aus:
   
   <link rel='stylesheet' type='text/css' href='http://www.yourURL.com/wp-content/plugins/membermouse/resources/css/user/mm-checkout.css' />

Bearbeiten des Standard-CSS-Stylesheet-Speicherorts

Eine weitere Möglichkeit zur Gestaltung Ihrer Seiten besteht darin, die MemberMouse-CSS-Stylesheets zu kopieren. Im letzten Abschnitt dieses Artikels finden Sie die Links zu den verfügbaren Stylesheets zum Herunterladen. Anschließend können Sie den CSS-Verweis in Ihrem Hauptseitencode so ändern, dass er den Speicherort dieses neuen Stylesheets wiedergibt, etwa so:

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

Bearbeiten der MemberMouse-Stylesheets

HINWEIS: Eine der besten Möglichkeiten, um zu sehen, was dieser Code tatsächlich anzeigt, ist die Verwendung der Elementinspektoransicht in Ihrem Browser. Wenn Sie mit der Verwendung des Elementinspektors nicht vertraut sind, lesen Sie bitte dieser Artikel für Google Chrome, oder dieser Artikel für Firefox.

Sie haben jederzeit die Möglichkeit, die von MemberMouse bereitgestellten CSS-Stylesheets an Ihre Bedürfnisse anzupassen. In diesem Beispiel sehen wir uns das Stylesheet an, das auf der Seite Kasse Kernseite.

Hier ist ein Ausschnitt aus der Kasse Seitencode:

[MM_Form_Section type='accountInfo']
<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
<h3>Konto-Informationen</h3>
<p class="mm-formField">
 <label>Erster Name:</label>
 [MM_Form_Field type='input' name='firstName']
</p>

Wenn Sie den Elementinspektor öffnen, können Sie ihn verwenden, um alle Div-IDs oder Klassen zu finden, die Sie im Code Ihrer Seite sehen. Im Beispiel unten habe ich das div id="mm-account-information-section" gefunden, auf das die Klasse "mm-checkoutInfoBlock" angewendet wurde:

Wenn wir eine Hintergrundfarbe anwenden wollten, dann würden wir im Stylesheet mm-checkout.css einfach hinzufügen:

Hintergrundfarbe: #333;

in das Stylesheet einfügen. Diese Art der Bearbeitung ist für jede CSS-Eigenschaft möglich, die Sie anwenden möchten. Sie können auch CSS-Klassen entfernen, wenn Sie möchten.

Benutzerdefinierte Klassen für SmartTags verwenden

Wenn Sie lieber bereits erstellte Klassen auf Ihre Kernseiten anwenden möchten, können Sie auch das tun. Dies ist eine gute Option, wenn Ihr Thema bereits vorbereitete CSS-Klassen hat, die Sie einfach wiederverwenden können. HINWEIS: Wenn Sie mit der Verwendung von CSS-Klassen in HTML nicht vertraut sind, lesen Sie bitte diesen Artikel.

Um eine benutzerdefinierte CSS-Klasse zu verwenden, müssen Sie den Namen der Klasse kennen, die Sie verwenden möchten. Schauen Sie sich dazu einfach den Code Ihrer Hauptseite an (über diese Schritte) Wenn Sie dann das Element kennen, das Sie ändern möchten, ersetzen Sie einfach die bestehende Klasse:

<div id="mm-account-information-section" class="mm-checkoutInfoBlock">
 
mit Ihrer neuen CSS-Klasse

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

MemberMouse-Schaltflächenstile verwenden

Wenn MemberMouse auf Ihrer Website aktiviert ist, haben Sie Zugriff auf über 60 Web 2.0-Schaltflächenstile. Lesen Sie diesen Artikel, um lernen Sie, wie Sie diese Schaltflächen auf Ihrer Website verwenden können.

CSS-Stylesheet-Beispiele

Nachstehend finden Sie Links zu den CSS-Stylesheets, die auf bestimmten Hauptseiten und im Widget für geschützte Inhalte verwendet werden:

• Kasse Kernseite - mm-checkout.css
  
• Anmeldung Kernseite - mm-login.css
  
• Mein Konto Kernseite - mm-mein-konto.css
  
• Passwort vergessen Kernseite - mm-forgotpassword.css
  
• Geschützter Inhalt Widget - mm-geschuetztes-inhaltswidget.css
  
• Alle CSS-Dateien Zip - mm-stylesheets.zip