Login-Formular anpassen

[Luckysushi]

Hallo,

ich möchte die Text-Schriftfarbe meines Login-/ Logout-Feldes ändern und schaffe es nicht.

Gleichfalls möchte ich einen Abstand zwischen dem Text "Benutzername" und dem sich momentan unmittelbar anschließenden weißen Eingabefeld einfügen.

Wenn mir jemand noch einen Hinweis zum Ändern der Farbe des Buttons geben kann, wäre ich auch happy ...

Trial n error in den stylesheets hat leider keinen Erfolg gebracht. Kann mir bitte jemand schreiben, wo ich welche Eingaben vornehmen muss?

Vielen Dank bereits jetzt!

[Askraba]

Falls du FF-Nutzer bist:
https://addons.mozilla.org/de/firefox/addon/1843

[xchs]

Hallo Luckysushi,

wie immer bei solchen Sachen, entweder den betreffenden Quelltext des Logins posten oder direkt einen Link zur Seite, ansonsten wird das hier auch nur ein "trial and error"...

[Luckysushi]

Hallo,

vielen Dank für die schnellen Antworten.

Firebug habe ich installiert, aber ... ???

[xchs]

Welche Textfarbe möchtest Du anpassen, die des Labels oder jene des Eingabefeldes?

Hier mal einige CSS-Regeln, die Du probieren kannst:

  .mod_login input.text {
    margin-left: 0.5em;
    padding: 0.2em 0.5em;
    border: 1px #bbb solid;
    color: #666;
  }

  .mod_login label {
    color: #fff;
    font-style: normal;
  }

Farben und Größenwerte musst Du natürlich noch an Deine Vorgaben anpassen!

[Javahe]

Hallo,
ich habe ein Login formular eingebunden und es über mit .mod_login angepasst.
Allerdings möchte ich auch die Schriftfarbe nach der Anmeldung ändern, also:
Sie sind angemeldet als...
Über .mob_login habe ich dies nicht erreicht. Könntet Ihr mir weiter helfen?
Danke
Javahe

[xchs]

Hallo Javahe,

Allerdings möchte ich auch die Schriftfarbe nach der Anmeldung ändern, also:
Sie sind angemeldet als...
Über .mob_login habe ich dies nicht erreicht. Könntet Ihr mir weiter helfen?

.mod_login .login_info { color:#f44; }

[Javahe]

Danke xchs, es war genau das Richtige,
herzlichen Dank
Javahe

[xchs]

Hallo Javahe,

empfehle für solche Anpassungen das Firefox Add-on "Firebug".

[Javahe]

Danke für die andere Hilfe zum Sprachdatei Spanisch.
Eine Frage zum Login-Formular:
Auf einer Webseite hatte .mod_login .login_info funktioniert.
Auf einer andere habe ich ein Formular laut Buch "Webseiten erstellen mit Contao von Peter Müller aber .mod_login .login_info funktioniert dabei nicht. Gibt es eine andere Möglichkeit?

Danke
Javahe

[Sebastian]

HI

Laut deinem Screenshot sollte das aber gehen. Was passiert, wenn du direkt im Firebug dem <p> mit der Klasse login_info die gewünschten Eigenschaften zuweist? Werden diese dann überschrieben?

Sebastian

[pmmueller]

Danke für die andere Hilfe zum Sprachdatei Spanisch.
Eine Frage zum Login-Formular:
Auf einer Webseite hatte .mod_login .login_info funktioniert.
Auf einer andere habe ich ein Formular laut Buch "Webseiten erstellen mit Contao von Peter Müller aber .mod_login .login_info funktioniert dabei nicht. Gibt es eine andere Möglichkeit?

Laut Screenshot sollte dein Selektor wie bereits erwähnt stimmen. Vielleicht wird dein Style irgendwo irgendwie überschrieben?

Löst dein Problem nicht direkt, aber vielleicht trotzdem einen Blick wert:
Kaskade im Schnelldurchgang

[MiTsch]

Hallo Luckysushi,

wie schon Askraba und xchs erwähnt haben könntest Du zu Analyse der Zusammenhänge in deiner Webseite das kostenlose Addon Firebug für den Webbrowser Firefox benutzen.

Deinen Kommentar

Firebug habe ich installiert, aber ... ???

entnehme ich das bei Dir evtl. noch ein Verständnissproblem bezüglich des Firebugs und dessen Nutzung vorliegt. Schau Dir mal dieses Tutorial an.

Sollte Dir Firebug nicht zusagen, so gibt es z.B. noch das Programm Stylizer von der Firma Skybound was sehr mächtige Funktionen zur CSS editierung bereithält. Leider ist dieses Programm jedoch Kostenpflichtig. Es besteht jedoch die Möglichkeit sich eine 14-Tägige Trial-Version herunter zu laden und zu testen.

Viele Grüße
MiTsch

[Javahe]

Danke für die Antwort.
ich werde mir die Links anschauen und versuchen mehr über CSS zu erfahren.
In diesem Fall meinte ich die Farbwerte der Zeile "Angemeldet als: Javahe".
.mod_login .login_info funktioniert ganz richtig in den oberen Zeilen (Grün)
Angemeldet als: Javahe würde ich es auch anpassen wollen.
Ich werde nach und nach mehr darüber lernen, so wie ich es auch verstehen kann (ich habe im Januar von null auf angefangen)
Danke vielmals
Javahe

[Javahe]

Ich wollte nochmal ein Bildschirmfoto anhängen um den div der letzten Zeile zu zeigen

[MiTsch]

Hallo Javahe,

so ganz verstehe ich nicht was Du denn da vorhast, da ja im Moment die Information das man angemeldet ist doppelt dargestellt wird. Ähh... wozu?

Aber egal;
Du könntest dem ganzen noch eine Klasse mitgeben, so das Du es dann mittels css selektieren und stylen kannst.

<a class="test_beispiel" title="Abmelden" href="index.php/abmelden.html">Abmelden</a>

Wenn Du gerade erst mit CSS anfängst

(ich habe im Januar von null auf angefangen)

dann dürfte dieser Link hier für Dich hilfreich sein: http://www.css4you.de/

Ich hoffe ich habe dich da jetzt richtig verstanden, und konnte Dir einwenig weiterhelfen.
Wenn nicht so kann ich mich da xchs nur anschließen:

xchs

Hallo Luckysushi,
... ... ... oder direkt einen Link zur Seite, ansonsten wird das hier auch nur ein "trial and error"...

Viele Grüße
MiTsch

[Javahe]

Hallo MiTsch
Danke fürs Antworten.
Der doppelte Eintrag ist vom Modul abhängig, ich hatte ihn aber noch nicht auf einer Spalte definiert; jetzt ist es schon geschehen. Den Text habe ich gelöscht und nur das Wort abmelden ist vorhanden. Die Schriftfarbe möchte ich anpassen, aber ich vermute, ich bin noch überfordert mit "Klasse eingeben und mit CSS selektieren..." ich wüßte noch nicht wie ich das mache. Könnte man das in ein Paar Sätze erklären?
Ich werde mich bemühen, bei Fragen auch ein Link zu setzen.
http://www.javahe.eu/javahe

Danke
Javahe

[pmmueller]

Die Schriftfarbe möchte ich anpassen, aber ich vermute, ich bin noch überfordert mit "Klasse eingeben und mit CSS selektieren..." ich wüßte noch nicht wie ich das mache. Könnte man das in ein Paar Sätze erklären?

Ich sehe nur den "Anmelden"-Link. Der wird momentan von folgendem Style gestaltet:

.mod_login .checkbox_container label,
.mod_login .checkbox_container input,
.mod_login .submit_container input.submit {
color: #008000;
float: none;
left: 100px;
margin-left: 0;
position: relative;
}

Die Stelle müsstest du in deinem Stylesheet finden und ändern. Der Wert #008000 für color bedeutet "grün".

Wenn du im Firefox 4 das Add-On Firebug installierst hast, klickst du einfach mit rechts auf den Submit-Button und wählst im Kontextmenü den Befehl "Element untersuchen". Daraufhin erscheint unten im Firefox links das HTML mit dem markierten Element und rechts das CSS mit dem das links markierte Element gestaltet wird. Da müsste dann obiger Style auftauchen. Kannst du dem soweit folgen?

[Javahe]

Hallo pmmueller,
ich habe schon Firebug installiert und nutze es regelmäßig. So habe ich einiges selbst entdeckt und Werte angepasst. Durch die Suchfunktion in Contao habe ich ebenfalls einige Schwierigkeiten überwunden. Ich denke, ich kann schon einiges schaffen durch das ausprobieren. Da lerne ich relativ schnell. Meine Schwäche ist die Theorie: wenn ich durch testen verstehen kann, der unterschied zwischen class und css (als Beispiel) dann würde es für mich leichter. Ich habe schon ein mal etwas mit Firebug geändert (auf der linken Spalte in Firebug), auf der rechten Spalte konnte ich aber keine passende CSS finden bzw. in Contao. Fragen über Fragen.
Aber bis jetzt habe ich schon einiges geschafft und mit Eurer Hilfe habe ich die Website 3/4 fertig.
Im Anhang: wie könnte ich denn das Wort "abmelden" anpassen? ich habe in den Modulen bzw. Stylesheets nichts gefunden.
Danke
Jaime

[xchs]

Im Anhang: wie könnte ich denn das Wort "abmelden" anpassen?

Was genau möchtest Du denn machen?

[MiTsch]

Hallo Javahe,

ich glaube Deine Schwierigkeiten sind noch Grundsätzlicher Art.

der unterschied zwischen class und css (als Beispiel)

Die Abkürzung CSS steht für Cascading Style Sheets und ist eine Formatierungssprache u. a. für HTML-Dateien. Siehe hier !

Die HTML-Elemente in (d)einer Website lassen sich durch Id´s oder durch classen ansprechen.
Der Selector für eine Id ist das Doppelkreuz = #
Der Selector für eine Class ist der Punkt = .

Begrifflichkeit:
Eine Website besteht meißt aus mehreren Seiten (z.B. Home, Impressum, etc.)

Alle Elemente die innerhalb einer Seite nur einmal vorkommen können lassen sich durch eine Id selectieren.
(z.B. #boddy, #wrapper, #header etc.)

Alle Elemente die innerhalb einer Seite mehrfach vorkommen können lassen sich durch eine Class(e) selectieren.
(z.B. .inner, oder die classen die ein element "von Hause aus" mitbringt)

Meine Empfehlung: Schau Dir bitte mal dieses Handbuch an und dort im speziellen das Kapitel Stylesheets.

Helfen könnte Dir vielleicht auch das hier: Link 1 und Link 2

Viele Grüße
MiTsch

[pmmueller]

Meine Schwäche ist die Theorie: wenn ich durch testen verstehen kann, der unterschied zwischen class und css (als Beispiel) dann würde es für mich leichter.

Dann probiere doch einfach mal <werbung>"Little Boxes"</werbung>:

• http://little-boxes.de/little-boxes-teil1-online.html

Du kannst es kostenlos online lesen und brauchst erst einmal nur die ersten Kapitel anzugehen, bis sagen wir mal inklusive Kapitel 7.

Es dauert zwar ein bisschen, sich da durchzulesen und -ackern, aber du wirst es nicht bereuen. Ziemlich sicher sparst du investierte Zeit wieder ein, und es macht einfach mehr Spaß, wenn nicht jeder Style zu einem Glücksspiel wird.

@MiTsch
Deine Erklärungen sind gut und helfen bestimmt schon weiter.
Nur #boddy ist etwas seltsam. Ein Element wie <div id="boddy"> habe ich noch nie gesehen, und um den body der Seite zu selektieren reicht ein einfacher Typ-Selektor body

[pmmueller]

Im Anhang: wie könnte ich denn das Wort "abmelden" anpassen? ich habe in den Modulen bzw. Stylesheets nichts gefunden.

Wie sagte schon Shakespeare: "Before you can CSS, you must know thy HTML".

Das Wort "Abmelden" links oben auf deiner Seite ist ein Hyperlink a, in einem div ohne Klasse im <div class="inside"> im <div id="main">.

Der Style könnte also z. B. so heißen:
#main div a { color: black; text-decoration: none; }

Allerdings formatierst du damit alle Hyperlinks, die in einem div in #main stehen. Um nur den einen zu erwischen, musst du im HTML eine Klasse oder eine ID hinzufügen und die dann per CSS selektieren.

[MiTsch]

@pmmueller

Ein Element wie <div id="boddy"> habe ich noch nie gesehen

Ups... da hast Du wohl recht!

Und ich dachte immer das bekannteste Zitat von Shakespeare lautet:
"#Body, or not #Body, that is the question".
(3. Aufzug, 1. Szene)



Viele Grüße
MiTsch

[Javahe]

Hallo,
und danke für Eure Hilfe. Mit den kurzen Erklärungen kann ich einiges nachvollziehen. Ich werde einiges testen und bin zuversichtlich, daß Eure Anregungen und Tipps mir helfen werden, sowie an andere, die wie ich, noch ein bisschen verloren sind.
xchs: Das Wort abmelden war ursprünglich meine Frage (Formatieren der Schriftfarbe)
aber ich werde durch Eure Erklärungen versuchen es zu tun, durch ausprobieren lernt man eine Menge auch wenn auch Nerven kosten kann.
Danke vielmals
Javahe

[xchs]

Das Wort abmelden war ursprünglich meine Frage (Formatieren der Schriftfarbe)

Ok. Dann solltest Du - wie bereits erwähnt - diesem <div>-Container eine CSS-Klasse spendieren, damit man dieses HTML-Element auch sinnvollerweise selektieren und entsprechend Deinen Vorstellungen formatieren kann.

[Javahe]

Hallo noch mal,
Nun bin ich mit der Webseite fast fertig. Eine Sache ist mir doch aufgefallen: in der zweisprachigen Website, wird das Modul Kontakt durch eine .php Datei gesteuert, sowie das Modul An- und Abmeldung; außer das Wort "abmelden". Wie in der Bildanlage zu sehen, das Wort "abmelden" ist nicht übersetzt. In welcher .php Datei könnte man das ergänzen? oder wird das nicht durch .php gesteuert?
Vielen Dank
Javahe

[Andreas]

Wenn du sowas hast, dann einfach die Dateien in Contao durchsuchen. Das Wort steht in mehreren Sprachdateien, weiß jetzt nicht welche richtig ist.

Die Änderung machst du dann in system/config/langconfig.php, damit deine Änderung beim nächsten Update noch erhalten bleibt. In der Datei findest du eine Info.

Gruß Andreas

[xchs]

Wie in der Bildanlage zu sehen, das Wort "abmelden" ist nicht übersetzt.

Das liegt wohl daran, dass Du diesen <div>-Container mit dem Anker-Link entweder als Frontend-Modul vom Typ "Eigener HTML-Code" in das Seitenlayout einbindest oder es steht irgendwo in einem Template (Seitentemplate?) direkt hardcodiert so drin (vgl. dazu u.a. den Screenshot hier).

[Javahe]

Hallo,
danke fürs Antworten.
Die Übersetzung liegt im Ordner "system/modules/frontend/languages/es" und passend übersetzt. Vielleicht liegt es am Modul (Eigener HTML-Code) und da stoße ich an meinen Grenzen. Wie könnte ich es anders lösen?

Vielen Dank noch mal
Javahe

[xchs]

Naja, Du könntest beispielsweise Dein Frontend-Modul vom Typ "Eigener HTML-Code" mit sprachspezifischen Inserttags und Bezeichnungen ergänzen. Beispiel:

<div class="logout">
   {{iflng::de}}<a title="Abmelden" href="{{link_url::*}}">Abmelden</a>{{iflng}}
   {{iflng::es}}<a title="Salir" href="{{link_url::*}}">Salir</a>{{iflng}}
</div>

[Javahe]

Danke, es hat wunderbar geklappt.