Categories

Ausgewählte Vorlagen

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

Daniel Morales August 28, 2015
Rating: 5.0. From 2 votes.
Please wait...

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:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_1

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

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_2

  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’):

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_3

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

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_4

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:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_5

  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:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_6

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

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_7

    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:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_8

  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:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_9

  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

Wordpress Theme Kaufen
Dieser Eintrag wurde um Monstroid Tutorials, WordPress Tutorials geschrieben und CherryFramework4, class, css, shortcode, style markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten