Categories

Ausgewählte Vorlagen

CherryFramework 3.Wie man eigene CSS Klassen zu Shortcodes hinzufügt und ihnen eigene CSS Regeln zuweist

Rating: 5.0. From 2 votes.
Please wait...

Dieses Tutorial wird Ihnen zeigen, wie man eigene CSS Klassen zu Shortcodes in CherryFramework 3 hinzufügt.

CherryFramework 3. Wie man eigene CSS Klassen zu Shortcodes hinzufügt und ihnen eigene CSS Regeln zuweist

Lassen Sie uns einen neuen Shortcode mit einer eigenen Klasse erstellen:

  1. Erstellen Sie einen neuen Post/Seite:

    How to add custom css
  2. Wählen Sie den gewünschten Shortcode. Wir werden einen ‘Posts Grid’ Shortcode als Beispiel hinzufügen:

    How to add custom css 1
  3. Passen Sie Shortcode-Parameter auf Ihre Bedürfnisse an. Scrollen Sie runter und finden Sie die Custom class Box.

  4. Erstellen Sie eine benutzerdefinierte Stilklasse für den Shortcode, z.B. ‘new_class’. Klicken Sie auf den ‘Insert’ Button:

    How to add custom css 2

    Die benutzerdefinierte Klasse wurde erfolgreich zu Ihrem Shortcode hinzugefügt:

    How to add custom css 3
  5. Wir haben erfolgreich einen neuen Shortcode mit einer eigenen ‘new_class’ Klasse hinzugefügt. Lassen Sie uns sehen, wie man benutzerdefinierte CSS-Regeln dieser Klasse zuweist:

  6. Öffnen Sie den Post/die Seite mit dem vorher erstellten Shortcode:

    How to add custom css 4
  7. Wir werden das FireBug Plugin für den Firefox Browser benutzen um Elemente zu überprüfen.

  8. Überprüfen Sie das Element, dass Sie bearbeiten wollen. Finden Sie die gewünschte Stilklasse:

    How to add custom css 5
  9. Fügen Sie Ihre eigene Klasse vor der allgeimeinen hinzu,und dann bearbeiten Sie oder fügen Sie beliebige CSS Eigenschaften hinzu:

    How to add custom css 6
  10. Nun werden die Änderungen nur zu der benutzerdefinierten Klasse hinzufügt und werden nicht die allgemeine CSS Regel beeinflussen.

  11. Klicken Sie rechts mit der Maus auf die CSS Klasse und wählen Sie die ‘Copy Rule Declaration’ Option um es zu kopieren:

    How to add custom css 7
  12. Öffnen Sie Ihr WordPress Dashboard und gehen Sie zum Cherry > Options > General Tab.

  13. Fügen Sie die vorher kopierte CSS Regel in die ‘Custom CSS’ Box und dann drücken Sie ‘Save’.

    How to add custom css 8
  14. Gehen Sie zu Ihrem Frontend und aktualisieren Sie die Seite um die Änderungen zu sehen.

Das ist das Ende des Tutorials. Nun wissen Sie, wie man eigene Klassen zu Shortcodes hinzufügt und ihnen eigene CSS Regeln zuweist.

Sie können sich gerne unser ausführliches Video Tutotial ansehen:

CherryFramework 3.Wie man eigene CSS Klassen zu Shortcodes hinzufügt und ihnen eigene CSS Regeln zuweist
Wordpress Design
Dieser Eintrag wurde um WordPress Tutorials geschrieben und CherryFramework3, css, custom class, shortcodes, WordPress 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

Online-Chat
We help you to choose the right product.