ilch Forum » Ilch CMS 2.X » Module und Modifikationen » Farben im Modul Shoutbox und Login

Geschlossen
  1. #1
    User Pic
    Boeing737 Mitglied
    Registriert seit
    06.11.2018
    Beiträge
    14
    Beitragswertungen
    1 Beitragspunkte
    Hallo zusammen,

    versuche schon seit geraumer Zeit die Farben zu ändern.
    Ich benutze Firebug um mir die nötigen Informationen zu suchen.
    z.B.(Bitte auf der Seite schauen)
    Shoutbox --> der name mit Logo ist ein <td> im div.panel.panel-gaming

    diese Hintergrundfarbe möchte ich ändern.
    Bekomme es aber einfach nicht hin.
    Genauso der Button.

    Das gleiche im Modul "Login".


    Wie muss ich die User.css anpassen?

    Kann mir einer einen Tipp geben wie ich das schneller selber herausfinde?




    Danke im voraus für eure Antworten lächeln


    verwendete ilch Version: 2.1.x

    betroffene Homepage: externer Link
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Grüße

    Für Login füge dies in die Style.css ein

    .form-group .col-lg-4 .btn  {
        color:#000;
    }


    für die Shoutbox füge dies ein

    #shoutbox-slide-down {
        color:#000
    }
    .table-responsive .table-bordered td span {
        color:#000;
    }
    .form-group .col-lg-12 .pull-left .btn {
        color:#000;
    }


    mit der ersten zeile bearbeitest du die schrifft des button, mit der 2.Zeile bearbeitest du schrifft des Datum und Uhrzeit, mit der 3.Zeile bearbeitest du den Button ( womit man die nachricht abschickt).

    Geh in deinem Browser und drücke F12 und es öffnet sich das "Entwicklerwerkzeug", damit kannst du dich durch die Struktur deines Layout ansehen.


    Slipi
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Boeing737 Mitglied
    Registriert seit
    06.11.2018
    Beiträge
    14
    Beitragswertungen
    1 Beitragspunkte
    Hallo Slipi,

    danke für die Umsetzung.
    Das mit F12 ist mir bekannt. Finde nur nicht den richtigen Einstieg zur Umsetzung.
    gesperrtes Bild
    in diesem Beispiel ist es "div.col-xs4.step.activestep"

    .col-xs4.step.activestep {
    color: #000;
    }

    funktioniert nicht. Bin nicht der der CSS Experte!
    Dachte nur damit werde ich die Schriftfarbe ändern.

    Wo mach ich den Denkfehler?
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Moin,
    also in Deinem Fall handelt es sich um das übernächste Element, nämlich das <p>.
    gesperrtes Bild
    Eventuell gibst Du diesem <p> eine eigene Klasse, über die Du dann das color-Attribut steuerst.
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Boeing737 Mitglied
    Registriert seit
    06.11.2018
    Beiträge
    14
    Beitragswertungen
    1 Beitragspunkte
    Hallo Outi,

    danke für die Info.
    Das mit der Schrift war auch nur ein Beispiel.
    Was ist wenn ich den Hintergrund ändern möchte?
    Was muss ich da machen oder besser gesagt wie gehe ich da vor. Wenn ich es mal kapieren will. :-)
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Outi77 Mitglied
    Registriert seit
    31.03.2013
    Beiträge
    1.337
    Beitragswertungen
    143 Beitragspunkte
    Zunächst mal vermute ich in Deiner Erklärung, dass Du eventuell mit css noch nicht so recht Freund bist?
    Falls ich mich irre, bitte entschuldige...ach ok im 2. Post schreibst Du es ja zwinker
    Also grundsätzlich kannst Du jedes Element, egal ob <div> oder <p> oder <span> frei gestalten, indem Du diesem element eine Klasse vergibst. Am Beispiel <div> nach dem Öffnen-Tag <div das Attribut class="deineKlasse" einfügst.
    Also zb <div class="blackFont_whiteBG"...
    In der style.css würdest Du dann für diese Klasse die Attribute definieren. Mal davon ausgehend, dass Du Elemente benötigst, die einen weißen Hintergrund besitzen und die Schrift schwarz sein soll, hierfür würdest Du in der style.css flg. schreiben:
    .blackFont_whiteBG {
    	background-color: white;
    	color: black;
    }

    Zur Erklärung: ein Klassenselektor entsteht, indem man vor einen Klassen-Namen einen Punkt setzt. Also der frei erfundene (aber dennoch sinnvoll gewählte) Name blackFont_whiteBG wird durch den Punkt . zur Klasse blackFont_whiteBG.
    Diese Klasse definiert sich durch 2 Attribute, nämlich Hintergrundfarbe und (Schrift~)Farbe. Es gibt noch unzählige weitere Attribute, die man über google erfragen kann.
    Schlußendlich kannst Du jetzt jedem Element diese Klasse vergeben, wenn Du es mit weißem Hintergrund und schwarzer Schrift benötigst.
    Desweiteren kannst Du mehrere Klassen kombinieren, wenn Du andere Attribute, wie zb Weite (width) oder Aussenabstand (margin), in einer anderen Klasse bereits definiert hast.
    Ein Element mit 2 Klassen würde dann so aussehen:
    <div class="klasse1 klasse2">

    Durch das Leerzeichen wird vermittelt, dass es sich um 2 Klassen handelt.
    In der css-Datei bräuchtest Du dann etwa folgendes:
    .klasse1 {
    	background-color: white;
    	color: black;
    }
    .klasse2 {
    	margin: 5px;
    	width: 100%;
    }

    Puh, jetzt hast Du hoffentlich einen kleinen Eindruck davon, was möglich ist. Aber ich habe auch vieles durch Lesen und Suchen erst erlernt, das wird Dir leider nicht erspart bleiben.


    Zuletzt modifiziert von Outi77 am 15.11.2018 - 19:05:14
    Die richtige Formulierung eines Problems ist nicht selten bereits die halbe Lösung.
    »Albert Einstein«
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Boeing737 Mitglied
    Registriert seit
    06.11.2018
    Beiträge
    14
    Beitragswertungen
    1 Beitragspunkte
    Hallo Outi77,
    vielen dank für deine Ausführungen.
    Denke das ist eine gute Idee mal ganz von vorne mit dem Thema CSS anzufangen.

    Danke Dir nochmals :-)
    Schönes Wochenende
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Module und Modifikationen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten