Button nur bei Hover sichtbar - wo einstellbar?

    Joomla Version
    4.3.4
    PHP Version
    PHP 8.0.x
    Hoster
    Manitu.de
    Link (URL) zur Seite mit dem Problem
    https://www.alfpaka.de/index.php/angebote/angebote-2

    Hi,


    ich habe eine Buchungs-Komponente installiert, über welche Besuchende ein Event buchen können. Die Komponente heißt "Events Booking". So weit so gut.

    Mein Problem ist, dass der "Anmelde-Button" in weiß dargestellt ist und erst im Pink-Ton, wenn die Maus über den Link fährt. Mir ist bewusst, dass ich das irgendwo einstellen kann und dass das Problem dann auch schnell gelöst ist - aber wo? Hat das was mit css zu tun? Damit hatte ich noch nicht zu tun... Spielt die Wahl des templates eine Rolle? Ich nutze Shaper_yoga. Ich kann auch direkt in der Komponente "Events-Booking" css-Einstellungen vornehmen. "Css Class Mapping" oder "Custom CSS".

    Wie gesagt, das Problem ist eigentlich recht simpel, ich möchte einfach die Farbe des Buttons ändern - leider finde ich nicht den richtigen Bereich wo ich diese Einstellung vornehmen kann!? search


    Hier sind die Buttons kaum sichtbar, da in weiß hinterlegt:


    Hier bin ich mit der Maus auf den Buttons:

    Setze das in die custom.css in den Template-Optionen:


    Code
    .btn-primary {
  color: #ff629b;
  }


    Und das für den Rand:


    Code
    .sppb-btn.sppb-btn-primary, .sppb-btn.btn-primary, .btn.sppb-btn-primary, .btn.btn-primary {
   border: 2px solid #ff629b;
 }

    Hi Elwood,


    danke für deine schnelle Idee, bislang klappt es noch nicht. Ich habe folgende Datei ausgewählt: /templates/shaper_yoga/css/custom.css. Hier war bereits folgender Code hinterlegt:

    Code
    body.view-category .blog {
  padding: 50px;
}


    Ich habe dann deinen Code ergänzt, jetzt sieht das ganze so aus:



    Was mache ich falsch? Im Frontend hat sich nichts geändert...

    Verwende mal diesen Code:

    Code
    .sppb-btn.sppb-btn-primary, .sppb-btn.btn-primary, .btn.sppb-btn-primary, .btn.btn-primary {
    background: #5c636a;
    border: 2px solid #5c636a;
}

    Wenn das funktioniert kann man auch noch den Hover bei Mouseover anpassen:


    Code
    .sppb-btn.sppb-btn-primary:hover, .sppb-btn.sppb-btn-primary:focus, .sppb-btn.btn-primary:hover, .sppb-btn.btn-primary:focus, .btn.sppb-btn-primary:hover, .btn.sppb-btn-primary:focus, .btn.btn-primary:hover, .btn.btn-primary:focus {
  color: #ff629b;
  border-color: #7e7e7e;
  background: #727272;
}

    Diesen Code in deiner custom.css einfügen:


    CSS
    .btn.btn-primary.eb-register-button.eb-individual-registration-button,.eb-group-registration-button {
  color: #ff629b;
  border: 2px solid #ff629b!important;
}

.btn.btn-primary:hover {
  background-color: #f4f1f1;
  border: 2px solid #ff629b!important;
}

    Ich muss das Thema noch einmal aufmachen... Die Buttons zur Registrierung sind jetzt sichtbar. Wenn ich darauf klicke öffnet sich auch die Maske mit den Eingabefeldern. Aber dann wieder versteckte Button, in beiden Bereichen. Ich wollte den Code anpassen und für diese Buttons noch einmal einfügen, allerdings kann ich diesmal nicht einsehen wie die Buttons heißen. Könnt ihr nochmal nachsehen?

    Alfpaka.de - Angebote

    Zitat von dakobert

    Ich muss das Thema noch einmal aufmachen... Die Buttons zur Registrierung sind jetzt sichtbar. Wenn ich darauf klicke öffnet sich auch die Maske mit den Eingabefeldern. Aber dann wieder versteckte Button, in beiden Bereichen. Ich wollte den Code anpassen und für diese Buttons noch einmal einfügen, allerdings kann ich diesmal nicht einsehen wie die Buttons heißen. Könnt ihr nochmal nachsehen?

    https://www.alfpaka.de/index.php/angebote/angebote-2



    Vielleicht noch das in deiner custom.css einfügen:


    CSS
    #btn-submit {
  color: #ff629b;
  border: 2px solid #ff629b !important;
  
}

    Eventuell genügt dir schon einfach:


    .btn.btn-primary

    anstatt

    .btn.btn-primary.eb-register-button.eb-individual-registration-button

    in der vorhandenen user.css verwenden.


    Für :hover verwendest du diesen den Selektor ja ohnehin schon in der user.css

    Deine CSS Lösungen sind meistens eleganter als meine, liegt sicher an deiner grössere Erfahrung. ;)