Ändern der Farbe des Suchfeldes

Thema wurde von gesundheitsgeber, 4. Januar 2017 erstellt.

  1. gesundheitsgeber
    gesundheitsgeber Erfahrener Benutzer
    Registriert seit:
    27. Januar 2014
    Beiträge:
    253
    Danke erhalten:
    4
    Danke vergeben:
    75
    #1 gesundheitsgeber, 4. Januar 2017
    Hallo liebe Gambio Experten,
    ich würde gern im Header vom Shop die Farbe des Suchfeldes anpassen (siehe Screenshot). Über StyleEdit geht das nicht - zumindest habe ich nichts gefunden :-(

    Habt ihr eine Idee wie ich die Farbe des Buttons und der Schrift und des Rahmens ändern kann?

    Danke und Grüße,
    Petra
     

    Anhänge:

  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    #2 Dennis (MotivMonster.de), 4. Januar 2017
    Rechte taste drauf und untersuchen wählen (chrome)
    Dann siehst das html und css
    Hier kannst testen ohne gefahr was du anpassen musst.
    Den css teil dann als user css im style editor speichern.

    Das der weg. Wenn du es genauer brauchst melden.
     
  3. gesundheitsgeber
    gesundheitsgeber Erfahrener Benutzer
    Registriert seit:
    27. Januar 2014
    Beiträge:
    253
    Danke erhalten:
    4
    Danke vergeben:
    75
    #3 gesundheitsgeber, 4. Januar 2017
    Hi Dennis,

    okay - hab es versucht. Habe auch die Farbe geändert bekomen :)

    Die Frage ist nun, was von dem CSS Block muss ich in den SE3 kopieren?

    Alles was im Bild umrandet ist? Das wäre dann das:

    Code:
    #search .input-group .input-group-btn .dropdown-toggle, #search .input-number .input-group-btn .dropdown-toggle, #search .input-number .input-number .btn-plus .dropdown-toggle, .input-number #search .input-number .btn-plus .dropdown-toggle, #search .input-number .input-number .btn-minus .dropdown-toggle, .input-number #search .input-number .btn-minus .dropdown-toggle, #search .input-group .input-number .btn-plus .dropdown-toggle, .input-number #search .input-group .btn-plus .dropdown-toggle, #search .input-group .input-number .btn-minus .dropdown-toggle, .input-number #search .input-group .btn-minus .dropdown-toggle {
    color: #555;
    height: 36px;
    background-image: -webkit-linear-gradient(top, #9cc55f 0%, #9cc55f 100%);
     

    Anhänge:

  4. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    19. August 2012
    Beiträge:
    204
    Danke erhalten:
    56
    Danke vergeben:
    20
    #4 Anonymous, 4. Januar 2017
    Guten Morgen,

    füge das mal mit ein.

    background-image: -o-linear-gradient(top, #393 0, #153e00 100%);
    background-image: linear-gradient(to bottom, #393 0, #153e00 100%);

    Mit den Werten kannst Du spielen
     
  5. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    #5 Dennis (MotivMonster.de), 4. Januar 2017
    Man muss nur die Zeile einfügen innerhalb der geschweiften Klammern die man in dem Block im Browser bearbeitet hat


    nehmen wir an du hast nur den wert color geändert dann reicht
    Code:
    #css-bereich um den es geht {
    color: #555;
}
    der rest bleibt ja wie er vom Shop kommt. Wenn du in 2 Blöcken was änderst dann halt beide blöcke jeweils die zeile wo du was geändert hast.
     
  6. gesundheitsgeber
    gesundheitsgeber Erfahrener Benutzer
    Registriert seit:
    27. Januar 2014
    Beiträge:
    253
    Danke erhalten:
    4
    Danke vergeben:
    75
    #6 gesundheitsgeber, 4. Januar 2017
    Okay, dann bedeutet ich muss

    anpassen zu in meinem Fall diesem oder?

    Code:
    #search .input-group .input-group-btn .dropdown-toggle, #search .input-number .input-group-btn .dropdown-toggle, #search .input-number .input-number .btn-plus .dropdown-toggle, .input-number #search .input-number .btn-plus .dropdown-toggle, #search .input-number .input-number .btn-minus .dropdown-toggle, .input-number #search .input-number .btn-minus .dropdown-toggle, #search .input-group .input-number .btn-plus .dropdown-toggle, .input-number #search .input-group .btn-plus .dropdown-toggle, #search .input-group .input-number .btn-minus .dropdown-toggle, .input-number #search .input-group .btn-minus .dropdown-toggle {
   
    background-image: -webkit-linear-gradient(top, #9cc55f 0%, #9cc55f 100%);
}