gelöst Farben des Bereichs und der Elemente im GX-Customizer anpassen

Hi @laser-diele ,

Nur mit css, damit kann man das aber sehr gut stylen und auch "responsiv". Ist aber leider manchmal etwas tricky.

Ed

 

@laser-diele

Ist Dein Shop schon live? Man kann dich da schon mit ein paar Zeile Code unterstützen.

ED

 

Versuch mal folgendes als Eigenes CSS im StyleEdit 3 einzutragen:

Code:

div {
    &#gm_gprint {
        #gm_gprint_tabs {
            li {
                &.gm_gprint_tab_active {
                    background-color: #FF0000; // Hintergrundfarbe aktiver Tab
                    border-color:     #CC0000; // Rahmenfarbe aktiver Tab
                   
                    span {
                        color: #FFFFFF; // Schriftfarbe aktiver Tab
                    }
                }
               
                &.gm_gprint_tab {
                    background-color: #FF9900; // Hintergrundfarbe normale Tabs
                    border-color:     #FF0000; // Rahmenfarbe normale Tabs
                   
                    span {
                        color: #FFFFFF; // Schriftfarbe normale Tabs
                    }
                }
            }
        }
       
        #gm_gprint_content {
            div {
                &.gm_gprint_surface {
                    background-color: #FF9900; // Hintergrundfarbe Customizer Content
                    border-color:     #FF0000; // Rahmenfarbe Customizer Content
                    color:            #FFFFFF; // Schriftfarbe Customizer Content
                }
            }
        }
    }
}

Ist von mir jetzt nicht großartig getestet, könnte aber funktionieren. Die Farbwerte musst du noch gegen eigene austauschen, die hab ich da einfach mal Beispielhaft eingetragen.

 

Das dürfte mit folgendem funktionieren:

Code:

.product-info-thumbnails.swiper-vertical {
    .swiper-button-prev, .swiper-button-next {
        color: #ff0000;
     }
}

 

Ja eigentlich einfach unter dem anderen Codeblock einfügen

 

Eine select-Box nach eigenen Vorgaben zu stylen ist leider etwas, was deutlich mehr Aufwand erfordert. Das klappt leider nicht mit einfachen CSS-Tricks, da muss man sich in der Regel tatsächlich aus HTML, CSS und JavaScript eine eigene Box basteln.

Viele Formular-Elemente (Checkboxen und Radio-Buttons gehören auch dazu) werden abhängig vom verwendeten Browser und auf dem PC verwendetem Darstellungsprofil vom Browser angezeigt. Das heißt, die können auf verschiedenen Rechner auch einfach mal anders aussehen. Problematisch ist hierbei, dass sich die unterschiedlichen Browser auch nur unterschiedlich bis gar nicht dazu überreden lassen diese Formular-Elemente anders zu stylen als sie es tun.

Es gibt Anleitungen dafür, wie man sich ein solches Custom-Dropdown basteln kann. Voraussetzung dafür ist allerdings, dass man ein wenig geschickt im Umgang mit HTML, CSS und JavaScript ist, da man da sonst sehr schnell an seine Grenzen kommt.

Was man ohne große Probleme verändert bekommt ist leider nur der Rahmen um die Select-Box herum. Das kannst du mit

Code:

.properties-selection-form .form-horizontal . form-group select {
    border-color: #ff0000;
}

tun.