Navigation Farbe der Schrift

[rossi]

Würde gerne die Schrift der navigation ändern, habe dazu im format-css die .navigation {font-family: helvetica, arial, geneva, sans-serif; font-size:10; color:#FFFFFF ; font-weight: bold} geändert, aber das ergebnis ist eigentlich keines, schaut aus wie vorher? was mache ich da falsch?

[McDeeJay]

Hi,

die Farbe der Nav-Beschriftung änderst du in der .css in den Punkten
A.link bis A.aktive bzw. A.klein.link bis A.klein.aktive

Gruß

Martin

[emscher23]

das habe ich probiert, aber dann ändert sich immernoch nichts?! komisch, oder?

und wo kann ich dann ausschalten, dass die links immer unterstrichen sind?

und letzte frage: wie bekomme ich die unterkategorien mehr nach rechts. damit die mehr auffallen.

[Beatz]

Hallo emscher,

Hast Du im entsprechenden Layout auch die richtige CSS-Datei eingebunden?
Wenn ja:
In der CSS-Datei findest Du einen Abschnitt

Code: Alles auswählen

a {
[...]
}

oder

Code: Alles auswählen

a:link {
[...]
}

Dort trägst Du den Wert

Code: Alles auswählen

text-decoration: none;

ein.

Wenn das auch nicht funktioniert, sprich die richtige CSS-Datei sich auf dem Server befindet und auch korrekt im Layout eingebunden wird, prüfe bitte, ob Du im Navigationsmodul CSS-Klassen für die Links verwendest.

[emscher23]

mmh, gute frage.

meine format.css:

Code: Alles auswählen

body             {font-family: helvetica, arial, geneva, sans-serif; font-size: x-small; color: #000000}
.punkte   	 {font-family: helvetica, arial, geneva, sans-serif; font-size:13; color:#AE6B00; font-weight: bold}
.headline   	 {font-family: helvetica, arial, geneva, sans-serif; font-size:15; color:#000000; font-weight: bold}
.subheadline   	 {font-family: helvetica, arial, geneva, sans-serif; font-size:13; color:#AE6B00}
.text		 {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color:#000000 }
.navigation {font-family: helvetica, arial, geneva, sans-serif; font-size:10; color:#FFFFFF;}



A:link           {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A:visited        {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #000000}
A:hover          {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #AE6B00}
A:active         {font-family: helvetica, arial, geneva, sans-serif; font-size:13; text-decoration: none; color: #AE6B00}


A.klein:link	{font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #000000}
A.klein:visited {font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #000000}
A.klein:hover	{font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #AE6B00}
A.klein:active	{font-family: helvetica, arial, geneva, sans-serif; font-size:11; text-decoration: none; color: #AE6B00}

für mouseover ost hover, oder? also brauche ich dort nur die farben ändern, oder? und kann ich dort ändern das die links nicht mehr unterstrichen sind?

[Beatz]

Okay, dann mal ein kleiner Exkurs in CSS:

CSS hat grob folgende Syntax

Code: Alles auswählen

htmltag[.cssklasse][:zustand] {
  eigenschaft1: wert1;
  eigenschaft2: wert2;
}

Ich habe den Zustand in eckigen Klammern geschrieben, weil dies speziell für Links ist. Du definierst also mit a:link generell, die Links aussehen sollen. Wenn Links grundsätzlich nicht unterstrichen sein sollen, definierst Du das an dieser Stelle, wie ich oben beschrieben habe.

unter a:hover definierst Du nur die Eigenschaften, die sich bei MouseOver verändern sollen, beispielsweise die Farbe (color).

Auch in den andren Zuständen (visited und active) definierst Du nur die geänderten Eigenschaften. Dies macht die CSS schon deutlich übersichtlicher und hilft, Fehler vorzubeugen.

Ich hoffe, dies hilft Dir als kleine Einführung, Deine CSS zu verstehen. Wenn Du trotzdem nicht weiter kommst, helfe ich gern weiter.

[emscher23]

ehrlich gesagt hat es mir nicht geholfen. da ich wie du sehen konntest keine programmier kenntnisse habe. versuche es mir beizubringen, aber das geht nicht von heute auf morgen.

[mhl]

@emscher23, beatz, rossi

Zwei Möglichkeiten sehe ich:

1.) Im Layout muss der Bereich wo der Navigationscontainer reinkommt auch mit der richtigen class definiert sein.

2.) In den templates muss dies auch geschehen.

Geh auf /cms/templates/

lade die dir navigations templates runter (jeweils on und off für jede Menüebene), und modifiziere sie. Du musst dort dann einfach die referenz class="menu" in den <a> Tag einfügen. Am besten gleich nach der href. Siehe hier: (stark vereinfacht, den gesamten Style Kommentar habe ich jetzt mal entfernt).

Vorher:

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
      <tr><td width="120" height="22"><a target="{TARGET}" href="{HREF}">{NAME}</a></td></tr>
<!-- END:BLOCK -->

nachher:

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
      <tr><td width="120" height="22"><a target="{TARGET}" href="{HREF}" class="menu">{NAME}</a></td></tr>
<!-- END:BLOCK -->

Hoffe geholfen zu haben.

Gruß

MHL