Hintergrundfarbe des Login Bereichs

Hallo, Ich nutze Typolight nun seit gestern und ich bin von den System wirklich begeistert. Nur leider habe ich ein paar Startschwirigkeiten. Ich habe die Demo Seite installiert und dieses Template ein wenig abgeändert. Den ein ganz neues wird mein Erfahrungsschatz bei weiten übersteigen. Zumall ich die Klassen noch nicht weiss. Nun aber zu meinem Problem.
Der Hintergrund Kasten des Logins ist ja dieses eiergelb bzw Grau , das hätte ich gern geändert aber ich finde diesen Parameter nicht.
Da ich es im Demo Template CSS nicht finde denke ich wird das standart gesetzt sein. Darum seit bitte so lieb und sagt mir wo ich die Einstellung im CSS finde oder gebt mir ein Tip für ein CSS damit ich das ändern kann.

Vielen vielen dank

Tobias Röll

Hallo Phoenix,

willkommen bei TYPOlight.

In TYPOlight sind die CSS-Klassen leicht herauszufinden. Installieren Dir dazu das Firebug-AddOn in den Firefox. Du kannst dann einfach ein Element anklicken (rechte Maustaste "Element untersuchen") und bekommst dann sowohl den richtigen Quellcodeausschnitt, als auch die gerade dazu verwendeten CSS-Stellen angezeigt.

In diesem Fall ist die Hintergrundfarbe des Login-Moduls im CSS music_academy.css (Zeile 35) definiert.
Änderungen musst Du aber über das Backend "Stylesheets" ausführen. Nicht direkt die css-Datei bearbeiten, da TL diese wieder überschreibt.

Viel Spaß weiterhin mit TYPOlight - aber Achtung: Suchtgefahr! :D

Oh vielen dank , Der Tipp mit dem Firefox Addon ist mehr als ein Goldstück wert es hilft mir zudem Materie zu verstehen.

Ich muss zugeben das ich diese Werte auch schon mal geändert habe, aber ich habe nicht beachtet das der Browser ja immer ein Speicher hat.

Vielen dank

Jetzt habe ich aber noch eine andere frage wen ich ein Neues Modul einsetzte hat es ja in dem CSS auch noch keinen Eintrag wie bekomme ich dann den Namen raus?

Hallo Phoenix,

auch neue Module werden von TL aus hinterlegten Templatedateien erstellt und haben bereits ihre Basisklassen. Am Einfachsten schaust Du dazu in den Quellcode, dort findest Du alles.

Beispiel:

HTML-Code:

---

<div class="mod_breadcrumb block">

Sie befinden sich hier:
<span class="active">Kontakt</span>

</div>

---

im Beispiel "Brotkumpenmodul" (Navigationspfad) ist da ein <div>-Container mit der Klasse mod_breadcrumb, die Du im CSS leicht mit dem Selektor .mod_breadcrumb ansprechen kannst. Du kannst aber im Backend fast allen TL-Elementen noch zusätzliche eigene Klassen und/oder IDs geben, um mehrfach verwendete Module einzeln ansprechen zu können.

Also einfach mal in den Quellcode schauen, dann findest Du alle Klassen und IDs. Noch einfacher ist ein Klick mit dem Firebug, der zeigt gleich alles aufbereitet an.

Wie wird die Einstellung der Hintergrundfarbe des Logins konkret im Stylesheet vorgenommen,.mod_login.
Mit dem Firbug sehe ich den entsprechenden Quellcode und kann ihn auch editieren.
Ich weiss jedoch nicht welche Eingaben im Stylesheet vorzunehmen sind.

Geht das mittels "Eigener Code", aber was ist aus dem Quellcode zu übernehmen?
Gruß
Wolfgang

Hallo Oscartron,

den Quellcode von der Webseite brauchst Du nicht zu ändern. Das geht alles über die Stylesheets. Es gibt dazu mindestens diese beiden Möglichkeiten:

1)
Du benutzt den Stylesheet-Editor von TL, dann hast Du die beste Unterstützung, auch wenn Du noch nicht so fit bist mit CSS. Alle wichtigen Parameter kannst Du menügeführt verändern.

2)
Wenn Du die CSS-Datei selbst schreibst und dann nur einbindest, hast Du im Prinzip die CSS-Unterstützung von TL umgangen, da solltest Du dann CSS schon recht gut beherschen. Über CSS findest Du sehr viele Informationen direkt im Internet, z.B. http://www.css4you.de

Du brauchst erstmal den richtigen Selektor, den Du einfach im Quelltext der Seite abliest, eine ID oder eine Klasse. Zur Kontrolle, ob Du das richtige Element ausgewählt hast, kannst Du versuchsweise den Hintergrund auf #ff0000 setzen oder einen Rahmen (Breite 2px, Solid, Farbe #ff0000) definieren, dann siehst Du sofort, ob Du richtig bist.

Alles andere ist Lernen, Ausprobieren, Anwenden, ...

Der Stylesheeteditor ist eine tolle Sache.
Beim .mod_login habe ich farblich nur die Einstellmöglichkeit der Hintergundfarbe, aber eine Veränderung zeigt keine Wirkung. Ich weiss auch nicht, was für ein Hintergundbild ich angeben sollte. Ich stelle mir vor, dass das Modul den Hintergund sowieso mitbringt.

Ich hatte mir das so vorgestellt, das man den Code mit Firebug findet und anschließend in den Stylesheeteditor unter Eigener Code kopiert.
So scheint es nicht zu funktionieren. Nach einer Eingabe sieht man anschließend nur die Strings, der Code scheint weg zu sein oder wird verborgen.

Ich möchte mich jetzt noch nicht mit CSS auseinandersetzen, ich muss erst noch viele andere Sachen lernen, aber eine andere Loginfarbe wäre interessant.

Schöne Grüße
Wolfgang

Hallo Oscartron,

Zitat:

---

Ich möchte mich jetzt noch nicht mit CSS auseinandersetzen,

---

Dann wird das leider nix mit dem Individuellen Stylen von irgendwelchen Elementen.

Aussehen ist alles über CSS geregelt auf Internetseiten.

Viele Grüße

Zitat:

---

Der Stylesheeteditor ist eine tolle Sache.
Beim .mod_login habe ich farblich nur die Einstellmöglichkeit der Hintergundfarbe, aber eine Veränderung zeigt keine Wirkung. Ich weiss auch nicht, was für ein Hintergundbild ich angeben sollte. Ich stelle mir vor, dass das Modul den Hintergund sowieso mitbringt.

Ich hatte mir das so vorgestellt, das man den Code mit Firebug findet und anschließend in den Stylesheeteditor unter Eigener Code kopiert.
So scheint es nicht zu funktionieren. Nach einer Eingabe sieht man anschließend nur die Strings, der Code scheint weg zu sein oder wird verborgen.

Ich möchte mich jetzt noch nicht mit CSS auseinandersetzen, ich muss erst noch viele andere Sachen lernen, aber eine andere Loginfarbe wäre interessant.

---

Ändere einfach unter Layouts > Stylesheets > music_academy > Login form > .mod_login die Hintergrundfarbe, z.B. ''#dadada"! Ein Hintergrundbild sollst Du ja auch gar nicht angeben; es sei denn Du möchtest da ein Bild einfügen!

Hier geben sich alle wirklich viel Mühe. Aber Deine Aussage:

Zitat:

---

Ich möchte mich jetzt noch nicht mit CSS auseinandersetzen

---

wird nicht zum Erfolg führen! Ansonsten möchte ich mich meinen Vorschreibern nur anschließen.

Gruß, Frank

Hallo Ihr,

ich habe für .mod_login via Backend (Thememanager) eine Hintergrundfarbe zugewiesen, leider bleibt das Modul weiß. Andere CSS-Eeigenschaften wie Rahmen etc. wurden jedoch übernommen. Habe auch im Stylesheet geschaut ob irgendwo die Klasse .mod_login noch ein 2. Mal steht und somit evtl. die ersten Angaben überschreibt. Scheint aber nicht der Fall zu sein:(, jedenfalls habe ich nichts entsprechendes gefunden. Cache etc. natürlich geleert...

Kann es noch einen anderen Grund geben?

Hi,

Hintergrundfarbe für das komplette Login div

Code:

---

.mod_login {background:#000;}

---

Hintergrundfarbe nur für die Login form (nicht für h1)

Code:

---

.mod_login form {background:#000;}

---

evtl. bekommt dein Formular und evtl auch h1 irgendwo einen Hintergrund mit

Hallo,

ich habe dazu schon ein paar Beiträge gefunden, aber irgendwie hilft mir das heute nicht weiter. Ich brauch also jemand der mir das Brett vom Kopf hämmert.

Ich bin gerade dabei die Musikacademie auseinander zu pflücken und scheitere kläglich an der .mod_login Class. Ich habe die .cto-Datei importiert und finde aber in den Stylesheets nur:
.mod_lost_Password...

Ich schaue mir den Wolf... gelöscht, neu hochgeladen, Cache geleert, Css-Datei neu erstellen lassen ect....*puh*

Dann dachte ich legste die einfach neu an mit Deiner HG-Farbe, diese wird aber überschrieben, also irgendwo isse aber ich habe Tomaten auf den Augen....

Ist die durchgestrichene Klasse das was Du willst ?

Dann solltest es mal mit !important versuchen!

ciaobello

Jepp und das habe ich schon so unelegant zu lösen versucht

CSS im Seitenlayout eingebuden?

Ist schwierig bei .png grafik Quelltext zu helfen ... da funzt mein firebug nicht :D

Zitat:

---

Zitat von Heike

Jepp und das habe ich schon so unelegant zu lösen versucht

---

da ist das Semikolon nach dem Farbwert zu viel ;)

Zitat:

---

Zitat von planepix

da ist das Semikolon nach dem Farbwert zu viel ;)

---

*koppklatsch* Danke nu geht das wenigstens mal.

Hier mal der Link:Spielwiese

Aber ich wäre schon froh wenn ich das richtig hin bekäme und nit so rumpfuschen müsste. Das kann ich nit leiden.

Hallo Heike,

ich kann mit den CSS-Angaben die Hintergrundfarbe ohne weiteres im Firebug abändern für ".mod_login".

Und damit wird der Hintergrund des Hinweises Passwort vergessen rot:

Code:

---

#request_password{background:#f30;}

---

Also, bei den Spielwiesen kannst vielleicht mal den Cache ausschalten. Manchmal wenn man den Cache nicht lehrt (nach jedem Test) wirkt eine Änderung nicht gerade. Und dann kannst Du stundenlang versuchen. Du siehst dann nie die eigentliche Anpassung.

Hier ist schon der richtige Ort für die Hintergrund Farbe:

HTML-Code:

---

.mod_login {    background-color: #ECE4D9;    margin: 0 5px;    padding: 5px;}

---

p.s.
planepix ... ich auch!

Ja im Firebug funzt das einwandfrei, aber ich finde das nicht im Backend zum ändern. Und da hätte ich das gerne richtig eingetragen und nicht überschrieben.

Die CSS-Angaben stehen doch in dem CSS-Dokument /* Style sheet la_zwei_sp_wald *, oder?

Eben nicht und wenn ich die ohne !improtant neu erstelle, wird das auch schön durchgestrichen. Also in der Db müsste es vorhanden sein und wird dort auch neu generiert, aber im Backend sehe ich das nicht. Habe auch keine Filtereinstellungen oder ähnliches drin.

Werden ggf. nicht alle CSS-Definitionen im CSS-Editor angezeigt?
Also nicht alle Definitionen? rechts Anzeige 1-x Elemente?

Danke das war es! ... oh Mann

Sagemal hast Du vielleicht noch ne Idee wie ich das mit der Vererbunghierarchie verstehe...

Zitat:

---

Zitat von Heike

...ne Idee wie ich das mit der Vererbunghierarchie verstehe...

---

Das ist ein Thema für Sich. Peter Müller erklärt das gut in Little Boxes. Er hat sogar auch schon hier im Forum Grafiken wegen dem vererben geposted (Contao Google-Suche).

Was ich dir auch empfehlen kann ist das Buch von Planepix selber. Da lernst Du viel Tipps und Tricks kennen. Auf der Webseite Think-Contao gibt es auch immer wieder viel interessantes (näheres zu Buch und Webseite in seinem Footer).

ciaobello

Danke für die Tips, dann werde ich mich mal auf die Buchsuche begeben.

Mein kleiner Nachtrag:
11. Kaskade, Vererbung oder Standardwert

Einführung in XHTML, CSS und Webdesign>> Vererbung und Initialwerte

Danke Ciaobello,

Ich hoffe ich darf diesen wichtigen Satz von little-boxes.de zitieren:

Zitat:

---

Falls Sie in Ihrem Stylesheet allerdings vor scheinbar unlösbaren Phänomenen stehen, die Sie an den Rand des Wahnsinns treiben, kommen Sie einfach zurück und lesen sich dieses Kapitel ganz in Ruhe durch. Es ist die Antwort auf viele Rätsel.

---

Buch (Think-Contao) ist bestellt ;o)

Das Buch von Planepix kann ich dir auch sehr empfehlen. Als mir zu Beginn noch etwas der Überblick gefehlt hat, konnte ich dort auch viele Ratschläge finden, die mir wirklich sehr geholfen haben.

Ich habe im Blog auf little-boxes.de mal einen kurzen Beitrag dazu geschrieben:

Zitat:

---

Der Zusammenhang zwischen Konzepten wie Vererbung, Standardwert und Kaskade ist auch für viele fortgeschrittene CSS-Schreiber oft noch ein Buch mit sieben Siegeln. Dieser Beitrag erklärt den Sachverhalt mit wenigen Worten und einer Grafik.

---

Und hier der Link:

• Die Kaskade im Schnelldurchgang

Wer die Grafik in dem Beitrag verstanden hat, dürfte der Lösung seiner Rätsel ein Stück näher gekommen sein.

Leute Ihr seit einfach einsame Spitze. Fühlt Euch einfach mal ne Runde geknuddelt.

Mit Contao macht das Arbeiten und lernen Spaß, mit Euch wird es zum Vergnügen.