{"id":8020,"date":"2023-08-14T12:50:57","date_gmt":"2023-08-14T19:50:57","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&amp;p=8020"},"modified":"2023-08-14T12:50:57","modified_gmt":"2023-08-14T19:50:57","slug":"leitfaden-fur-die-gestaltung-des-css-von-hauptseiten-und-widgets","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/de\/docs\/leitfaden-fur-die-gestaltung-des-css-von-hauptseiten-und-widgets\/","title":{"rendered":"Anleitung zur Gestaltung des CSS von Hauptseiten und Widgets"},"content":{"rendered":"<p>Das MemberMouse-Plugin ist so konzipiert, dass es so wenig wie m\u00f6glich von Ihrem Thema abh\u00e4ngt, so dass beim Wechsel von einem Thema zu einem anderen die MemberMouse-Elemente auf Ihrer Website kaum oder gar nicht aktualisiert werden m\u00fcssen. M\u00f6glicherweise m\u00f6chten 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.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Gestalten von Hauptseiten<\/h5>\n\n\n\n<p>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\u00a0<a href=\"https:\/\/membermouse.com\/de\/docs\/ubersicht-der-kernseiten\/\">mehr \u00fcber die Hauptseiten erfahren<\/a>. Kernseiten sind MemberMouse-spezifische Seiten, die mit n\u00fctzlichen Funktionen ausgestattet sind.\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/membermouse.com\/de\/docs\/smarttags-ubersicht\/\" target=\"_blank\">SmartTags\u2122.<\/a>\u00a0um die Funktionsweise Ihrer Mitgliederseite zu vereinfachen.<\/p>\n\n\n\n<p>Es gibt insgesamt 9 Hauptseiten, die von den Mitgliedern unabh\u00e4ngig von den Zugriffsrechten oder dem gekauften Produkt genutzt werden k\u00f6nnen. Sie k\u00f6nnen zus\u00e4tzliche Kernseiten erstellen, die f\u00fcr eine dynamische Benutzererfahrung f\u00fcr Ihre Mitglieder angepasst werden k\u00f6nnen. Viele dieser Kernseiten verf\u00fcgen \u00fcber spezielle Stylesheets mit CSS-Einstellungen, die f\u00fcr die jeweilige Seite spezifisch sind. Dazu geh\u00f6ren:<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Kasse<\/em>\u00a0Kernseite<br><br><\/li>\n\n\n\n<li><em>Anmeldung<\/em>\u00a0Kernseite<br><br><\/li>\n\n\n\n<li><em>Mein Konto<\/em>\u00a0Kernseite<br><br><\/li>\n\n\n\n<li><em>Passwort vergessen<\/em>\u00a0Kernseite<br><br><\/li>\n\n\n\n<li><em>Passwort zur\u00fccksetzen <\/em>Kernseite<br><\/li>\n<\/ul>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Integrierte CSS-Einstellungen der Hauptseite<\/h6>\n\n\n\n<p>Standardm\u00e4\u00dfig werden bei einer Neuinstallation von MemberMouse die CSS-Stylesheets f\u00fcr die f\u00fcnf oben aufgef\u00fchrten Hauptseiten automatisch von MemberMouse gesteuert.<\/p>\n\n\n\n<p>Wenn Sie Probleme mit der korrekten Anzeige einer dieser Hauptseiten haben (z. B. gibt es nur eine Spalte oder die Schaltfl\u00e4che \"Paypal\" wird nicht angezeigt), dann sollten Sie \u00fcberpr\u00fcfen, ob MemberMouse das Stylesheet l\u00e4dt.<\/p>\n\n\n\n<p>F\u00fchren Sie die folgenden Schritte aus, um zu aktivieren oder zu deaktivieren, dass MemberMouse Ihre CSS-Stylesheets f\u00fcr die Hauptseite automatisch einbezieht:<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Gehen Sie im Men\u00fc MemberMouse auf <em>Allgemeine Einstellungen<\/em>und klicken Sie dann auf das Symbol <em>Andere Einstellungen<\/em> tab.<br><br><\/li>\n\n\n\n<li>Bl\u00e4ttern Sie nach unten zum Abschnitt CSS-Einstellungen f\u00fcr Hauptseiten.<br><br><\/li>\n\n\n\n<li>Wenn das Kontrollk\u00e4stchen neben der Hauptseite aktiviert ist, sollte MemberMouse das CSS-Stylesheet f\u00fcr diese Seite automatisch laden: <br><br><img decoding=\"async\" class=\"wp-image-10130\" style=\"width: 300px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/a5d8dfbb-jcrzd6nj-tmttpiug8mlcut6wfhh80hosq.png\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Wenn Sie das Laden des Stylesheets deaktivieren m\u00f6chten (damit Sie Ihre eigenen benutzerdefinierten Stile anwenden k\u00f6nnen), deaktivieren Sie das Kontrollk\u00e4stchen.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Auffinden der CSS-Stylesheet-Referenz<\/h5>\n\n\n\n<p>Sie k\u00f6nnen diese Stylesheet-Referenz in den oben aufgef\u00fchrten Hauptseiten sehen:<\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Klicken Sie auf dem WordPress-Dashboard auf\u00a0<em>Seiten.<\/em><br><br><\/li>\n\n\n\n<li>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\u00f6nnen:<br><br><img decoding=\"async\" class=\"wp-image-11039\" style=\"width: 700px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/10\/746730b7-screen-shot-2023-10-02-at-12.37.49-pm.png\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Anhand dieser Auflistung k\u00f6nnen Sie feststellen, welche Hauptseiten die Standardseiten f\u00fcr alle Benutzer sind:<br><br><img decoding=\"async\" class=\"wp-image-11040\" style=\"width: 600px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/10\/9cacefe3-screen-shot-2023-10-02-at-12.38.42-pm.png\" alt=\"\"><br><br><br>Im Rahmen der\u00a0<em>Kernseite Typ<\/em>\u00a0sehen Sie den Typ der Hauptseite und ob die Seite die Standardseite f\u00fcr alle Benutzer ist. Erscheint das Flaggensymbol neben dem\u00a0<em>Kernseite Typ<\/em>, dann ist diese Seite die Standardseite. Die Standardseite wird f\u00fcr jedes Mitglied verwendet, das seiner Mitgliedsstufe oder seinem Produktpaket keine andere Hauptseite zugewiesen hat.<br><br><\/li>\n\n\n\n<li>Bewegen Sie den Mauszeiger \u00fcber die Seite, die Sie bearbeiten m\u00f6chten. Sie sehen dann eine Liste von Optionen. Klicken Sie auf \"Bearbeiten\":<br><br><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/cdn.freshdesk.com\/data\/helpdesk\/attachments\/production\/9064346183\/original\/7bGjCy7GVUh5qwcHIuc8ZpFl_sOA58tsQA.png?1541603890\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Sobald Sie die Seite bearbeitet haben, m\u00fcssen 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\u00f6nnen:<br><br><br><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.dropbox.com\/s\/zyog1pko7mse13x\/9019.png?raw=1\"><br><br><\/li>\n\n\n\n<li>Die CSS-Referenz sieht dann so aus:<br><br>&lt;link rel='stylesheet' type='text\/css' href='http:\/\/www.yourURL.com\/wp-content\/plugins\/membermouse\/resources\/css\/user\/mm-checkout.css' \/><\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Bearbeiten des Standard-CSS-Stylesheet-Speicherorts<\/h5>\n\n\n\n<p>Eine weitere M\u00f6glichkeit zur Gestaltung Ihrer Seiten besteht darin, die MemberMouse-CSS-Stylesheets zu kopieren. Im letzten Abschnitt dieses Artikels finden Sie die Links zu den verf\u00fcgbaren Stylesheets zum Herunterladen. Anschlie\u00dfend k\u00f6nnen Sie den CSS-Verweis in Ihrem Hauptseitencode so \u00e4ndern, dass er den Speicherort dieses neuen Stylesheets wiedergibt, etwa so:<br><br>\u00a0&lt;link rel='stylesheet' type='text\/css' href='http\/\/:www.yourURL.com\/sitespecifics\/customestylesheet.css'\/><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Bearbeiten der MemberMouse-Stylesheets<\/h5>\n\n\n\n<p><br><strong><em>HINWEIS:\u00a0<\/em><\/strong><em>Eine der besten M\u00f6glichkeiten, um zu sehen, was dieser Code tats\u00e4chlich anzeigt, ist die Verwendung der Elementinspektoransicht in Ihrem Browser. Wenn Sie mit der Verwendung des Elementinspektors nicht vertraut sind, lesen Sie bitte\u00a0<\/em><a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/docs\/elements\"><em>dieser Artikel f\u00fcr Google Chrome<\/em><\/a><em>, oder\u00a0<\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\" target=\"_blank\"><em>dieser Artikel f\u00fcr Firefox<\/em><\/a><em>.<\/em><br><br>Sie haben jederzeit die M\u00f6glichkeit, die von MemberMouse bereitgestellten CSS-Stylesheets an Ihre Bed\u00fcrfnisse anzupassen. In diesem Beispiel sehen wir uns das Stylesheet an, das auf der Seite\u00a0<em>Kasse\u00a0<\/em>Kernseite.<br><br>Hier ist ein Ausschnitt aus der\u00a0<em>Kasse<\/em>\u00a0Seitencode:<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>[MM_Form_Section type=&#039;accountInfo&#039;]\n&lt;div id=&quot;mm-account-information-section&quot; class=&quot;mm-checkoutInfoBlock&quot;&gt;\n&lt;h3&gt;Konto-Informationen&lt;\/h3&gt;\n&lt;p class=&quot;mm-formField&quot;&gt;\n &lt;label&gt;Erster Name:&lt;\/label&gt;\n [MM_Form_Field type=&#039;input&#039; name=&#039;firstName&#039;]\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Wenn Sie den Elementinspektor \u00f6ffnen, k\u00f6nnen 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:<br><br><img decoding=\"async\" class=\"wp-image-11042\" style=\"width: 700px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/10\/e2d9bbfa-9020.png\" alt=\"\"><br><br><\/p>\n\n\n\n<p>Wenn wir eine Hintergrundfarbe anwenden wollten, dann w\u00fcrden wir im Stylesheet mm-checkout.css einfach hinzuf\u00fcgen:<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><code>Hintergrundfarbe: #333;<\/code><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>in das Stylesheet einf\u00fcgen. Diese Art der Bearbeitung ist f\u00fcr jede CSS-Eigenschaft m\u00f6glich, die Sie anwenden m\u00f6chten. Sie k\u00f6nnen auch CSS-Klassen entfernen, wenn Sie m\u00f6chten.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Benutzerdefinierte Klassen f\u00fcr SmartTags verwenden<\/h5>\n\n\n\n<p><br>Wenn Sie lieber bereits erstellte Klassen auf Ihre Kernseiten anwenden m\u00f6chten, k\u00f6nnen Sie auch das tun. Dies ist eine gute Option, wenn Ihr Thema bereits vorbereitete CSS-Klassen hat, die Sie einfach wiederverwenden k\u00f6nnen.&nbsp;<strong><em>HINWEIS:<\/em><\/strong><em>&nbsp;Wenn Sie mit der Verwendung von CSS-Klassen in HTML nicht vertraut sind,&nbsp;<\/em><a href=\"http:\/\/www.codecademy.com\/courses\/css-coding-with-style\"><em>lesen Sie bitte diesen Artikel<\/em><\/a><em>.<\/em><br><br>Um eine benutzerdefinierte CSS-Klasse zu verwenden, m\u00fcssen Sie den Namen der Klasse kennen, die Sie verwenden m\u00f6chten.  Schauen Sie sich dazu einfach den Code Ihrer Hauptseite an (<a href=\"https:\/\/membermouse.com\/de\/docs\/leitfaden-fur-die-gestaltung-des-css-von-hauptseiten-und-widgets\/#locating-stylesheets\">\u00fcber diese Schritte<\/a>) Wenn Sie dann das Element kennen, das Sie \u00e4ndern m\u00f6chten, ersetzen Sie einfach die bestehende Klasse:<br><br><code>&lt;div id=&quot;mm-account-information-section&quot; class=&quot;mm-checkoutInfoBlock&quot;&gt;<\/code><br>&nbsp;<br>mit Ihrer neuen CSS-Klasse<br><br><code>&lt;div id=&quot;mm-account-information-section&quot; class=&quot;myownclass&quot;&gt;<\/code><br><br><a><\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">MemberMouse-Schaltfl\u00e4chenstile verwenden<\/h5>\n\n\n\n<p><br>Wenn MemberMouse auf Ihrer Website aktiviert ist, haben Sie Zugriff auf \u00fcber 60 Web 2.0-Schaltfl\u00e4chenstile.  Lesen Sie diesen Artikel, um&nbsp;<a href=\"https:\/\/membermouse.com\/de\/docs\/mm-tastenformen\/\">lernen Sie, wie Sie diese Schaltfl\u00e4chen auf Ihrer Website verwenden k\u00f6nnen<\/a>.<br><a><\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><br>CSS-Stylesheet-Beispiele<\/h5>\n\n\n\n<p><br>Nachstehend finden Sie Links zu den CSS-Stylesheets, die auf bestimmten Hauptseiten und im Widget f\u00fcr gesch\u00fctzte Inhalte verwendet werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Kasse<\/em>\u00a0Kernseite -\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/10gT-LHPXXG1Tmpzc3nzJWD2bbPBTqW-T\/view?usp=drive_link\" data-type=\"link\" data-id=\"https:\/\/drive.google.com\/file\/d\/10gT-LHPXXG1Tmpzc3nzJWD2bbPBTqW-T\/view?usp=drive_link\">mm-checkout.css<\/a><br><\/li>\n\n\n\n<li><em>Anmeldung<\/em>\u00a0Kernseite -\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1q9xoTuKnM-BjCYfcxz6rcmSRym8QzXZc\/view?usp=drive_link\" data-type=\"link\" data-id=\"https:\/\/drive.google.com\/file\/d\/1q9xoTuKnM-BjCYfcxz6rcmSRym8QzXZc\/view?usp=drive_link\">mm-login.css<\/a><br><\/li>\n\n\n\n<li><em>Mein Konto<\/em>\u00a0Kernseite -\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1JYDOYZAfM1T4FujURSMyV9F1kXIlzLjp\/view?usp=drive_link\" data-type=\"link\" data-id=\"https:\/\/drive.google.com\/file\/d\/1JYDOYZAfM1T4FujURSMyV9F1kXIlzLjp\/view?usp=drive_link\">mm-mein-konto.css<\/a><br><\/li>\n\n\n\n<li><em>Passwort vergessen<\/em>\u00a0Kernseite -\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1aq9nZxBBPkA6Gnqjy545p1s7GUA2COPf\/view?usp=drive_link\" data-type=\"link\" data-id=\"https:\/\/drive.google.com\/file\/d\/1aq9nZxBBPkA6Gnqjy545p1s7GUA2COPf\/view?usp=drive_link\">mm-forgotpassword.css<\/a><br><\/li>\n\n\n\n<li>Gesch\u00fctzter Inhalt Widget -\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1b8GvH0p09sbDZoEcSH18hJiK-I7g6yHY\/view?usp=drive_link\" data-type=\"link\" data-id=\"https:\/\/drive.google.com\/file\/d\/1b8GvH0p09sbDZoEcSH18hJiK-I7g6yHY\/view?usp=drive_link\">mm-geschuetztes-inhaltswidget.css<\/a><br><\/li>\n\n\n\n<li>Alle CSS-Dateien Zip -\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1m2HwZIMKk-jwETT-yVNrJqin-ibDfoAK\/view?usp=drive_link\" data-type=\"link\" data-id=\"https:\/\/drive.google.com\/file\/d\/1m2HwZIMKk-jwETT-yVNrJqin-ibDfoAK\/view?usp=drive_link\">mm-stylesheets.zip<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Das MemberMouse-Plugin ist so konzipiert, dass es so wenig wie m\u00f6glich von Ihrem Thema abh\u00e4ngt, so dass der Wechsel von einem Thema zu einem anderen nur wenige oder gar keine Aktualisierungen erfordert...<\/p>","protected":false},"author":9645,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[160],"ht-kb-tag":[],"class_list":["post-8020","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-customize-mm"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb\/8020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/users\/9645"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/comments?post=8020"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb\/8020\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/media?parent=8020"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb-category?post=8020"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=8020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}