Farbe von einem bestimmten Button ändern "Jetzt registrieren"

Sporny · May 28th 2015

Hey Leute,

ich würde gern die Hintergrundfarbe des Buttons "Jetzt registrieren" ändern.
Leider bin ich nicht so der CSS Profi und bekomme es einfach nicht hin

Habt ihr da evtl den nötigen CSS Code für mich?

Danke schonmal im Vorraus

norse · May 28th 2015

Zu diesem Zweck müsstest Du .dashboardBoxSidebarButton > div > .button ansprechen.

Gruß norse

Sporny · May 28th 2015

Super danke dir

Und wie wäre es mit dem code für hover?

EDIT: Habs

Code

.dashboardBoxSidebarButton > div:hover > .button

Danke nochmals

kuhN · Mar 11th 2017

Was müsste man in "Individuelles CSS und LESS" eingeben, damit nur der Jetzt registrieren Button farblich gerändert werden kann?

Vielen Dank

Shishano · Mar 11th 2017

Quote from kuhN

Was müsste man in "Individuelles CSS und LESS" eingeben, damit nur der Jetzt registrieren Button farblich gerändert werden kann?

Vielen Dank

Dem Button im Template noch eine Klasse zuweisen und diese dann dort ansprechen.

kuhN · Mar 11th 2017

Bist du so lieb und gibst mir den kompletten "Code" ? Das einzige was ich hinbekomme, ist das Einfügen

Vielen lieben Dank

T1N0 · Mar 11th 2017

Quote from GangstaSunny.

Dem Button im Template noch eine Klasse zuweisen und diese dann dort ansprechen.

Blödsinn....

kuhN Als Beispiel:

CSS

.dashboardBoxSidebarButton > div > .button {
    color: black;
    background-color: blue;
}

.dashboardBoxSidebarButton > div:hover > .button {
    color: black;
    background-color: blue;
}

Shishano · Mar 11th 2017

Quote from T1N0

Blödsinn....

kuhN Als Beispiel:

CSS

.dashboardBoxSidebarButton > div > .button {
    color: black;
    background-color: blue;
}

.dashboardBoxSidebarButton > div:hover > .button {
    color: black;
    background-color: blue;
}

Werden jetzt aber weitere Buttons dort erstellt sind diese ebenfalls in der entsprechenden Farbe.

kuhN · Mar 11th 2017

Vielen vielen Dank! Bin nun mobil unterwegs, aber im Laufe des tages teste ich das und gebe Rückmeldung

T1N0 · Mar 11th 2017

Quote from GangstaSunny.

Werden jetzt aber weitere Buttons dort erstellt sind diese ebenfalls in der entsprechenden Farbe.

Dafür gibts ja .dashboardBoxSidebarButton > div:nth-child(1) > a:nth-child(1) Als beispiel Was genau auf der Testseite für den Registrieren Button wär.

kuhN · Mar 11th 2017

T1N0 So eben getestet. Ergebnis Seite nicht mehr erreichbar Die Zeile wieder entfernt und die Seite lässt sich wieder erreichen.

T1N0 · Mar 11th 2017

Da muste etwas falsch gemacht haben. Bei mir klappts ohne Probleme.

mcburn · Mar 11th 2017

Was und wo hast du es eingegeben?
Zeige mal bitte

norse · Mar 11th 2017

kuhN : Du hast mit größter Wahrscheinlichkeit die Deklaration innerhalb einer anderen eingefügt. Beachte bitte die öffnenden und schließenden Klammern bereits vorhandener Anweisungen.

Gruß norse

kuhN · Mar 11th 2017

CSS

/* bread crumbs */
@media only screen and (min-width: 801px) {
    .breadcrumbs {
        background-color: @wcfContentBackgroundColor;
        border: 1px solid @wcfContainerBorderColor;
        border-radius: 6px;
        
        > ul {
            > li {
                padding-right: 0;
                
                .transition(max-width, .2s);
                
                &:hover {
                    max-width: 100%;
                    
                    > a {
                        background-color: @wcfContainerAccentBackgroundColor;
                        position: relative;
                        z-index: 10;
                    }
                    
                    > .pointer > span {
                        border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
                    }
                }
                
                > .pointer {
                    border-color: transparent transparent transparent @wcfContainerBorderColor;
                    border-style: inset none inset solid;
                    border-width: 15px;
                    display: block;
                    height: 0;
                    padding: 0;
                    right: -15px;
                    top: -3px;
                    width: 0;
                    z-index: 20;
                    
                    > span {
                        border-color: transparent transparent transparent @wcfContentBackgroundColor;
                        border-style: inset none inset solid;
                        border-width: 15px;
                        display: block;
                        height: 0;
                        left: -16px;
                        overflow: hidden;
                        position: absolute;
                        text-indent: -9000px;
                        top: -15px;
                        width: 0;
                        
                        .transition(border-color, .2s);
                    }
                }
                
                > a {
                    padding-left: 20px;
                    
                    .transition(background-color, .2s);
                }
                
                &:first-child > a {
                    border-radius: @wcfContainerBorderRadius - 2 0 0 @wcfContainerBorderRadius - 2;
                    padding-left: 9px;
                }
            }
        }
    }
}

body {
background: url("https://domain.de/wbb1/wcf/images/bg.jpg") no-repeat scroll center top rgba(218, 219, 221, .5);
background-attachment: fixed;
background-size: cover;
}

#search input {
&::-webkit-input-placeholder {color: white}
&::-moz-placeholder {color: white; opacity: 1}
&:-ms-input-placeholder {color: white}
}

.userPanel {
    position: fixed;
}

.extendedDropdownMenu > li > a { text-align: left; }

Display More

An den Code habe ich den Code Schnipsel vom T1N0 angehängt. Also eine Leerzeile zum Ende und dann einfügen, abspeichern und kaputt

BigBoss78 · Mar 11th 2017

kuhN versuch mal

CSS

/* bread crumbs */
@media only screen and (min-width: 801px) {
    .breadcrumbs {
        background-color: @wcfContentBackgroundColor;
        border: 1px solid @wcfContainerBorderColor;
        border-radius: 6px;
        
        > ul {
            > li {
                padding-right: 0;
                
                .transition(max-width, .2s);
                
                &:hover {
                    max-width: 100%;
                    
                    > a {
                        background-color: @wcfContainerAccentBackgroundColor;
                        position: relative;
                        z-index: 10;
                    }
                    
                    > .pointer > span {
                        border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
                    }
                }
                
                > .pointer {
                    border-color: transparent transparent transparent @wcfContainerBorderColor;
                    border-style: inset none inset solid;
                    border-width: 15px;
                    display: block;
                    height: 0;
                    padding: 0;
                    right: -15px;
                    top: -3px;
                    width: 0;
                    z-index: 20;
                    
                    > span {
                        border-color: transparent transparent transparent @wcfContentBackgroundColor;
                        border-style: inset none inset solid;
                        border-width: 15px;
                        display: block;
                        height: 0;
                        left: -16px;
                        overflow: hidden;
                        position: absolute;
                        text-indent: -9000px;
                        top: -15px;
                        width: 0;
                        
                        .transition(border-color, .2s);
                    }
                }
                
                > a {
                    padding-left: 20px;
                    
                    .transition(background-color, .2s);
                }
                
                &:first-child > a {
                    border-radius: @wcfContainerBorderRadius - 2 0 0 @wcfContainerBorderRadius - 2;
                    padding-left: 9px;
                }
            }
        }
    }
}

body {
background: url("https://domain.de/wbb1/wcf/images/bg.jpg") no-repeat scroll center top rgba(218, 219, 221, .5);
background-attachment: fixed;
background-size: cover;
}

#search input {
&::-webkit-input-placeholder {color: white}
&::-moz-placeholder {color: white; opacity: 1}
&:-ms-input-placeholder {color: white}
}

.userPanel {
    position: fixed;
}

.extendedDropdownMenu > li > a { text-align: left; }

.dashboardBoxSidebarButton > div > .button {
    color: black;
    background-color: blue;
}

.dashboardBoxSidebarButton > div:hover > .button {
    color: black;
    background-color: blue;
}

Display More

kuhN · Mar 11th 2017

Prima BigBoss78 das funktioniert. Bekomme ich da noch eine Rahmen drum herum?

Grüße kuhN

BigBoss78 · Mar 11th 2017

kuhN bitte

CSS

/* bread crumbs */
@media only screen and (min-width: 801px) {
    .breadcrumbs {
        background-color: @wcfContentBackgroundColor;
        border: 1px solid @wcfContainerBorderColor;
        border-radius: 6px;
        
        > ul {
            > li {
                padding-right: 0;
                
                .transition(max-width, .2s);
                
                &:hover {
                    max-width: 100%;
                    
                    > a {
                        background-color: @wcfContainerAccentBackgroundColor;
                        position: relative;
                        z-index: 10;
                    }
                    
                    > .pointer > span {
                        border-color: transparent transparent transparent @wcfContainerAccentBackgroundColor;
                    }
                }
                
                > .pointer {
                    border-color: transparent transparent transparent @wcfContainerBorderColor;
                    border-style: inset none inset solid;
                    border-width: 15px;
                    display: block;
                    height: 0;
                    padding: 0;
                    right: -15px;
                    top: -3px;
                    width: 0;
                    z-index: 20;
                    
                    > span {
                        border-color: transparent transparent transparent @wcfContentBackgroundColor;
                        border-style: inset none inset solid;
                        border-width: 15px;
                        display: block;
                        height: 0;
                        left: -16px;
                        overflow: hidden;
                        position: absolute;
                        text-indent: -9000px;
                        top: -15px;
                        width: 0;
                        
                        .transition(border-color, .2s);
                    }
                }
                
                > a {
                    padding-left: 20px;
                    
                    .transition(background-color, .2s);
                }
                
                &:first-child > a {
                    border-radius: @wcfContainerBorderRadius - 2 0 0 @wcfContainerBorderRadius - 2;
                    padding-left: 9px;
                }
            }
        }
    }
}

body {
background: url("https://domain.de/wbb1/wcf/images/bg.jpg") no-repeat scroll center top rgba(218, 219, 221, .5);
background-attachment: fixed;
background-size: cover;
}

#search input {
&::-webkit-input-placeholder {color: white}
&::-moz-placeholder {color: white; opacity: 1}
&:-ms-input-placeholder {color: white}
}

.userPanel {
    position: fixed;
}

.extendedDropdownMenu > li > a { text-align: left; }

.dashboardBoxSidebarButton > div > .button {
    color: black;
    background-color: blue;
    border: 1px solid @wcfContainerBorderColor;
}

.dashboardBoxSidebarButton > div:hover > .button {
    color: black;
    background-color: blue;
    border: 1px solid @wcfContainerBorderColor;
}

Display More

Das an deine Farbe anpassen.

CSS

border: 1px solid @wcfContainerBorderColor;

norse · Mar 11th 2017

Dafür nutzt man die Anweisung namens border, aber Hilfe zur Selbsthilfe ist wohl leider nicht gefragt.

Gruß norse

kuhN · Mar 15th 2017

An dieser Stelle nochmals danke für eure Hilfestellung

Farbe von einem bestimmten Button ändern "Jetzt registrieren"

Participate now!

Share