Wie kann ich das Design des Buttons "mehr erfahren" gestalterisch anpassen?
Wird der Shortcode [ld_course_list] auf einer beliebigen Seite eingefügt, erscheint eine Vorschau deiner veröffentlichten Online Kurse:
Über diesen CSS-Code kannst du den blauen Standard-Button "mehr erfahren..." gestalterisch anpassen:
/* Online Kurs Button: Mehr erfahren */ .ld-course-list-items .ld_course_grid .btn-primary { color: #ffffff; background-color: #428bca; border-color: #357ebd; } .ld-course-list-items .ld_course_grid .btn-primary:hover { color: #ffffff; background-color: #357ebd; }
Erklärung der Eigenschaften:
- color = Schriftfarbe des Button Textes (als HEX Code)
- background-color = Hintergrundfrabe des Buttons (als HEX Code)
- border-color = Rahmenfarbe des Buttons (als HEX Code)
Beim zweiten Code-Teil oben wurde dem Selektor #ld_course_list .bnt-primary ein :hover hinzugefügt. Dies ermöglicht die gestalterische Anpassung des Buttons, wenn mit der Maus über den Button gefahren wird.
Kopiere die oben aufgeführten CSS-Codes und füge sie im Backend deiner Webseite unter "Design" > "Theme Optionen" am Ende der Seite bei "Benutzerdefiniertes CSS" ein:
Nehme nun deine gewünschten Anpassungen am Code vor, indem du bspw. deine eigenen Farbwerte als HEX Code einfügst und klicke am Ende auf den Button "Änderungen speichern".