forum.ahadesign.eu

[BrainTrust]

Hallo Leute,

ich(wir) teste gerade mit dem "aha_money_j16" Template herum um es an unsere Bedürfnisse anzupassen.
Wir sind ein kleiner Multgaming-Clan und würden gerne auf Joomla 1.6 umsteigen. Momentan verwenden wir Ilch

Ich habe es soweit geschafft die "HintergrundBilder zu ändern... jetzt kommt für mich der schwere Teil, nämlich die Hintergrundfarben und die Schriftfarben zu ändern.

Als erstes Möchte ich Euch unsere TestPage zeigen: http://dwg2.square7.ch/
Das Banner ist nur vorläufig - soll auch nicht das Problem sein

Worüber ich mir nun den Kopf zerbreche sind:

Hintergrundfarbe soll schwarz werden (alles was jetzt Weis ist)
Schriftfarbe soll Weis sein
Die unbenutzten und benutzten Links soll die Farbe angepasst werden
Der Maus over effect bei den Menüs muß farblich angepasst werden
Die Menüs selbst (aktiv ist momentan dunkelblau - die anderen sind hellblau)

Ich weiß, daß dies eine ganze Menge ist und wahrscheinlich ist das nicht alles.
Ich glaube, daß man aus dem bisher geschriebenen herauszulesen ist, daß ich ein Anfänger bin.

Ich hoffe, daß sich jemand findet, der mir sagt in welcher datei und an welcher Stelle diese Farben zu ändern sind.
Ich habe schon ein wenig in der Color.css herumprobiert, jedoch ohne Erfolg (da hat sich garnichts getan - war wohl die falsche Stelle).
Keine Angst BackUp habe ich vorher gemacht

Besten Dank für Eure Zeit und Mühe
Liebe Grüße
BrainTrust

[Gerhard]

Hallo BrianTrust,

ich helfe Euch gerne weiter. Wir sind aber momentan unterwegs und ich komme erst wieder am Mittwoch Abends ins Büro. Dann werde ich hier aber gerne alles erklären.

Gruß Gerhard

[BrainTrust]

Hallo Gerhard,

Danke, echt toll von Dir, ich warte gerne.

Liebe Grüße
BrainTrust

[Gerhard]

So wir sind auch wieder zurück.

Also gleich mal zu der Hintergrundfarbe. Alle Farben außer die der Menüs sind in der color.css definiert. Entweder wurde der Hintergrund mit background: #fff; definiert, oder gar nicht und kann dann ebenfalls weiß sein. Bei Deiner Seite fehlt wahrscheinlich noch eine Definition für die ID #contentarea. Das ist in der color.css ab Zeile 279 und könnte wie folgt geändert werden:

Code: Alles auswählen

#contentarea {
color:#fff;
background:#000;
}

Damit wäre auch dieser Bereich schwarz mit weißer Schriftfarbe. Also Hintergrundfarbe ist immer background und Schriftfarbe ist immer color. Demnach musst du nur alles nach schwarz, als #000 oder weiß, also #fff absuchen und ändern. So riesig ist die Datei ja nicht, also kein Problem.

Die Links sind ebenfalls in der color.css definiert. Zu finden ab Zeile 150 wie folgt:

Code: Alles auswählen

a:link,
a:visited {
color:#325994;
}
a:focus,
a:active,
a:hover {
color: #C70A26;
}

Also der aktive und hover-Zustand haben beide die gleiche Definition. Könnte man auch extra definieren. Wenn das geändert wird, sollten eigentlich alle vorkommenden Links geändert werden. Also alles wo Pseudoklassen wie :link, :visited, :hover usw. vorkommen.

Bei den Menüs muss die Datei menu.css bearbeitet werden. Die Datei ist eigentlich nicht so schwer zu verstehen. Die Klasse .active ist logischerweise für den aktiven Zustand verantwortlich. Link, Visited und Hover brauch ich sicher nicht zu erklären. Wichtig ist noch .parent. Diese Klasse sagt aus, dass es noch Submenü-Einträge gibt. Also wenn noch Unterpunkte im Menü vorkommen, erhält der übergeordnete Button eine hier definierte Farbe. Oft wird das auch gar nicht benötigt und könnte gelöscht werden. Je nach Geschmack. Die Klassen .parent und .active können natürlich auch einen aktiven und/oder hover-Zustand haben bzw. haben den auch.

.menu li definiert immer die oberste Ebene. .menu li li eine Ebene weiter und so weiter. Ich denke damit kannst Du erst mal was anfangen.

Beste Grüße
Gerhard

[BrainTrust]

Hallo Gerhard,

wow - cool
besten Dank, ich werde nach Deinen Angaben vorgehen und dann wenn alles geklappt hat bescheid geben.
Bin leider noch auf Arbeit, kann also ein paar Tage dauern, bei uns ist die Hölle los ^^

Code: Alles auswählen

275 .contenttoc {
276
277 border : 1px dashed #000;
278
279 background : #fff;
280
281 }
282
283 .contenttoc a:link,
284
285 .contenttoc a:visited {
286
287 color : #882f1d;
288
289 }

Ich habe versucht den Code einzufügen doch nun ist auch der Text schwarz. Oben ist die Originale Datei ohne den Code von deinem Beitrag.


Besten Dank und
Liebe Grüße
BrainTrust

[BrainTrust]

Hallo,

ich habs geschafft.... ich bin soooo gut *lol*
bin ganz alleine drauf gekommen, daß in der Color.css lauter Leerzeilen sind und die gesuchte Zeile weiter unten sein muß, bin doch noch nicht zu alt für Copy&Paste ^^
ich werde alles weitere in diesen Post schreiben.
jetzt weiter zum nächsten Punkt....

update: Die Seite ist nun schwarz und die schrift ist weis - toll

13-03:
Update:

Ich habe wieder ein wenig herumprobiert... hat alles geklappt was ich machen wollte - Danke für Deine Hilfe:

Ich habe jedoch eines nicht verstanden (obwohl ich es anscheinend nicht benötige)

Damit ich verstehen kann was ich da mache und damit ich ein System erkennen kann, habe ich mir eine txt-Datei angelegt in die ich die menu.css kopiert habe. Dann habe ich mir neben jeden Abschnitt dazugeschrieben was dieser Code macht, jedoch habe ich nicht herausfinden können was das mit dem Parent auf sich hat. Ich dachte ich hätte es nach Deiner Erklärung kappiert, dem war aber nicht so - sorry. Kannst Du oder jemand anders mir diese Abschnitte nochmal erklären?

Damit man auf unserer Testpage nochmal schaun kann hier der Link: http://dwg2.square7.ch/
Hier ein Auszug aus meiner HilfeDatei ^^

Nachtrag: Jetzt habe ich das Update auf 1.6.1 gemacht und nun funktioniert es wie Du es beschrieben hast daher der Auszug aus meiner Datei gelöscht.

mir ist gerade noch etwas aufgefallen:

Wo kann ich die Farbe für "Benutzername", "Passwort", "Angemeldet bleiben", "Hallo {Username}" ändern dies konnte ich nicht mit Firebug rausfinden.

Ich danke allen die für die Zeit und Mühe
Liebe Grüße
BrainTrust

[BrainTrust]

Hallo Leute,

kann mir nochmal jemand helfen?
Ich habe vor einiger Zeit unsere Testpage so eingestellt, daß die Menüs so aussehen wie sie solln.
Jetzt habe ich neue Menüs hinzugefügt und einiges wird wieder falsch dargestellt.

Ich bitte darum, daß mir jemand sagt was diese Zeilen im einzelnen bedeuten. Diese Zeilen sind immer die erste Zeile jedes Blocks in dem ich eine Farbe ändern kann. Ich dachte ich hätte es begriffen, jedoch lehrte mich der Code was anderes. ^^

Normalerweise schaut der Code so aus:

Code: Alles auswählen

#leftmodules .menu li.parent li li li a:link,

#leftmodules .menu li.parent li li li a:visited,

#rightmodules .menu li.parent li li li a:link,

#rightmodules .menu li.parent li li li a:visited,

#contentarea .menu li.parent li li li a:link,

#contentarea .menu li.parent li li li a:visited {

color:#fff;

background:#000;

das war ein Block und aus jedem Block habe ich nun die erste Zeile in den folgenden Text kopiert:

Code: Alles auswählen

#leftmodules .menu li a:link,
#leftmodules .menu li a:focus,   
#leftmodules .menu li.parent a:link,
#leftmodules .menu li.parent a:focus,   
#leftmodules .menu li.active a:link,   
#leftmodules .menu li.active a:focus,       
#leftmodules .menu li.parent li a:link,
#leftmodules .menu li.parent li a:focus,     
#leftmodules .menu li.active li a:link,
#leftmodules .menu li.active li a:focus,   
#leftmodules .menu li li.parent a:link,
#leftmodules .menu li li.parent a:focus,       
#leftmodules .menu li li.active a:link,   
#leftmodules .menu li li.active a:focus,
#leftmodules .menu li.parent li li a:link,
#leftmodules .menu li.parent li li a:focus,
#leftmodules .menu li.active li li a:link,
#leftmodules .menu li.active li li a:focus,
#leftmodules .menu li li li.parent a:link,
#leftmodules .menu li li li.parent a:focus,
#leftmodules .menu li li li.active a:link, 
#leftmodules .menu li li li.active a:focus,
#leftmodules .menu li.parent li li li a:link,
#leftmodules .menu li.parent li li li a:focus,
#leftmodules .menu li.active li li li a:link,
#leftmodules .menu li.active li li li a:focus,
#leftmodules .menu li li li li.parent a:link,
#leftmodules .menu li li li li.parent a:focus,
#leftmodules .menu li li li li.active a:link,
#leftmodules .menu li li li li.active a:focus,   
#leftmodules .menu li.parent li li li li a:link,
#leftmodules .menu li.parent li li li li a:focus,
#leftmodules .menu li.active li li li li a:link,
#leftmodules .menu li.active li li li li a:focus,     
#leftmodules .menu li li li li li.parent a:link,   
#leftmodules .menu li li li li li.parent a:focus,
#leftmodules .menu li li li li li.active a:link,
#leftmodules .menu li li li li li.active a:focus


Es würde uns sehr weiterhelfen wenn sich jemand die Mühe macht hinter jede Zeile eine Kurze Erklärung zu setzen.

Ich bedanke mich für Eure Zeit und Mühe
Liebe Grüße
BrainTrust

[Gerhard]

Die Frage nach Benutzername und Passwort hatte ich ganz übersehen sorry.
Das geht in der color.css für innerhalb der Formularfelder ab Zeile 268 wie folgt:

Code: Alles auswählen

#login-form .inputbox {
color:#000;
border:#000 1px solid;
background:#fff;
}

Für die Textlinks ist gar keine Definition vorhanden. Hier werden einfach die Linkfarben verwendet. Also was für a:link, a:hover usw. definiert ist. Aber das könnte trotzdem gezielt geändert werden. Dazu steht folgendes ab Zeile 17 in der lititle.css:

Code: Alles auswählen

form #login-form ul li,
form #login-form ul li:focus,
form #login-form ul li:hover {
background:none;
list-style:none;
}

Hier könnte also für den Text noch color: irgendwas geschrieben werden. Für die Übersichtlichkeit sollte das am besten dann in die color.css geschrieben werden. Natürlich kann das für focus und hover nochmal extra definiert werden.

Den Rest hatte ich ja bereits erklärt. Also die Klasse parent wird von Joomla generiert, wenn es weitere Untermenüpunkte gibt. li.parent ist der oberste Menüpunkt und wenn weitere li folgen, wird mit der Anweisung der entsprechend untere Menüeintrag angesprochen. Also bei 3 li nach dem parent ist es die vierte Menüebene, welche meistens selten genutzt wird. Eigentlich würde auch li.parent li reichen wenn alles nachfolgende gleich aussehen soll. Alles andere wird dann also gleich dargestellt, weil es vererbt wird.

Hinter jede Zeile eine Erklärung zu setzen, die Zeit habe ich leider nicht. Aber das Prinzip müsste eigentlich klar sein. Ich empfehle, die Grundlagen von CSS zu lernen, sonst helfen hier die ganzen Erklärungen nicht viel. Dazu gibt es sehr viele interessante Seiten im Web. Außerdem kann immer der Web-Developer für den Firefox und auch der Firebug empfohlen werden. Damit bekommt man alle Klassen, ID´s usw. für eine Website raus.

Ich hoffe, das hilft etwas weiter und Gruß