CherryFramework 4. Wie man benutzerdefinierte CSS Klassen und CSS Regeln zu Shortcodes hinzufügt

Das jeweilige Tutorial zeigt, wie man benutzerdefinierte CSS Klassen und CSS Regeln zu Shortcodes in CherryFramework 4 Vorlagen hinzufügt.

CherryFramework 4. Wie man benutzerdefinierte CSS Klassen und CSS Regeln zu Shortcodes hinzufügt

Lassen Sie uns einen neuen Shortcode mit der benutzerdefinierten Klasse hinzufügen:

1. Fügen Sie einen neuen Beitrag/eine neue Seite hinzu:

   

2. Wählen Sie jeglichen Shortcode aus. Als Beispiel fügen wir den Shortcode ‘Team’ (‘Team’ shortcode) hinzu:

   

3. Legen Sie Parameter fest, wie Sie es selbst wollen. Scrollen Sie nach unten, wählen Sie ‘Klasse’ (‘Class’) aus.

4. Fügen Sie die benutzerdefinierte Klasse des Stiles für diesen Shortcode, zum Beispiel: ‘new_team’ hinzu. Drücken Sie auf den Button ‘Shortcode einfügen’ (‘Insert shortcode’):

   

5. Benutzerdefinierte Klasse wurde erfolgreich zu Ihrem Shortcode hinzufügt:

   

Wir haben erfolgreich den Shortcode mit der benutzerdefinierten Klasse ‘new_team’ hinzugefügt. Lassen Sie uns zeigen, wie man benutzerdefinierte CSS Regeln zu dieser Klasse hinzufügt:

1. Öffnen Sie einen Beitrag/eine Seite mit dem Shortcode, den Sie erstellt haben:

   

2. Wir werden FireBug das Plugin für den Firefox Browser verwenden, um Codeelemente überprüfen.

3. Überprüfen Sie das Element, das Sie ändern möchten. Finden Sie notwendige Klasse des Stils:

   

4. Sie sollen Sie Ihre benutzerdefinierte Klasse vor der allgemeinen Klasse hinzufügen, (add/adjust) gewünschte CSS Eigenschaften hinzufügen/einstellen:

   

   Die Änderungen werden nur auf die benutzerdefinierte Klasse verwendet. Außerdem werden sie auf die allgemeine Klasse des Stils nicht auswirken.

5. Drücken Sie auf den Button CSS Klasse (CSS class) mit der rechten Maustaste und wählen Sie die Option ‘Deklarationsregel kopieren’ (‘Copy Rule Declaration’) aus, um sie in die Zwischenablage zu speichern:

   

6. Loggen Sie sich ins WordPress Control Panel ein und öffnen Sie Cherry > Optionen (Options).

7. Fügen Sie vorher kopierten CSS Code ins Feld ‘Benutzerdefiniertes CSS’ (‘User CSS’) ein:

   

8. Öffnen Sie Ihre Website und aktualisieren Sie die Seite, um die Änderungen zu sehen.

Sie können jetzt selbst benutzerdefinierte CSS Klassen und CSS Regeln zu Shortcodes in CherryFramework 4 Vorlagen hinzufügen.

Sie können auch das ausführliche Video-Tutorial nutzen:

CherryFramework 4. Wie man benutzerdefinierte CSS Klassen und CSS Regeln zu Shortcodes hinzufügt