Menü farbig

[Swirl]

Menüpunkte sollten farbig sein wenn man auf dem entsprechenden Punkt ist.


Wie kann ich das mit TL realisieren?!
Ich habe die CSS Klasse und ID zugewiesen - aber es bleibt immer nur der erste Menüpunkt in seiner Farbe. Bei den anderen Menüpunkten sieht man nur beim drüberfahren was für eine Farbe sie haben, klickt man drauf ist es wieder grau.

[Stephan]

Hallo swirl,

die Menüpunkte sprichst du einzeln mit .mod_navigation li { … } bzw. den Link dazu mit .mod_navigation a { … } an. Für das Drüberfahren mit der Maus verwendest du .mod_navigation a:hover { … }. Ein aktiver Menüpunkt erhält automatisch die Klasse .active. Gibt es einen übergeordneten Menüpunkt, so vergibt TYPOlight die Klasse .trail. Damit kannst du so ziemlich alles auszeichnen, was du möchtest. Oder wo hapert es genau?

[Swirl]

Hallo Stephan,

danke für Deine Antwort.
Das Menü soll so aussehen wie auf ...
Ich habe es bisher so geschafft (Screenshot).

Leider ist bisher alles nur lokal.
Sonst wäre das Helfen sicher einfacher .. *Seufz*

Die CSS Datei:

#wrapper{background-color:#000000;}
*{margin:0;padding:0;font-family:Verdana, Arial;}
.spacer{width:800px;margin:0 auto;padding-left:50px;}
#header{width:337px;height:96px;margin-left:350px;background-color:#000000;background: #000000 url('tl_files/offset/nav-header.png') no-repeat;}
#head.headcyan{border-bottom:5px solid #009DE0;}
#head.headmagenta{border-bottom:5px solid #e2017b;}
#head.headyellow{border-bottom:5px solid #FFEC01;}
*+html #header{background: #08070C;}
* html #header{background: #08070C;}
#header .spacer{height:96px;}
#header h1{width:400px;height:68px;float:left;display:block;margin:0;padding:0;}
* html #header h1{}
#header h1 a{width:400px;height:66px;float:left;display:block;margin:0;padding:0;border:0;text-decoration:none;}
#header h1 a span{visibility: hidden;}
#header h1 a span.my{color:#fff;letter-spacing: 0;}
#header h1 a span.live{color:#725a4c;}
#header h1 a span.shopping{color:#00c6ff;}
#header h1 a span.beta{top:-22px;left:-25px;position:relative;font-weight:normal;font-size:10px;color:#00c6ff;letter-spacing: 0;}
#subnav{width:100%;height:7px;clear:both;}
#subnav p{width:200px;height:25px;float:right;margin:0 auto;text-align:right;font-size:11px;line-height:25px;}
#subnav p select{width:180px;font-size:10px;}
#subnav p select{top:5px;position:relative;}
*+html #subnav p select{top:4px;}
ul.nav{width:801px;height:27px;float:right;display:block;margin:0 auto;padding:0;font-size:14px;line-height:27px;}
ul.nav li.opposite,ul.nav li{float:right;font-size:12px;margin: 0 1px 0 0;list-style: none inside;}
ul.nav li.opposite{float:left;margin: 0 0 0 1px;}
ul.nav li span.icon{padding-left:18px;background: url('rss-icon.jpg') no-repeat 0 50%;}
ul.nav li a{display:block;text-decoration:none;color:#fdfdfd;padding: 0 11px 0 11px;background: #4B3C31;}
ul.nav li.current{}
#navigation ul.nav{width:800px;height:30px;left:350px;position:fixed;clear:both;display:block;margin:0px auto;padding:65px 0px 0px 0px;font-size:12px;line-height:28px;}
#navigation ul.nav li{float:left;clear:right;font-size:11px;margin: 0 5px 0 0;list-style: none inside;}
#navigation ul.nav li a{display:block;background-color:#666;font-weight:bold;text-decoration:none;color:#fff;padding: 0 20px;}
#navigation ul.nav li{background: #666;}
#navigation ul.nav li.current_cyan a{background: #009DE0;}
#navigation ul.nav li.magenta a:hover{color:#08070C;background: #E2017B;}
#navigation ul.nav li.cyan a:hover{color:#08070C;background: #009DE0;}
#navigation ul.nav li.current_magenta a{background: #E2017B;}
#navigation ul.nav li.current_yellow a{color:#08070C;background: #FFEC01;}
#navigation ul.nav li.yellow a:hover{color:#08070C;background: #FFEC01;}
#navigation ul.nav li.current a:hover{background-image:url("none");cursor: default;}
div.clear{clear:both;}
#main{margin-left:1px;text-align:justify;font-family:Verdana, Arial;font-size:11px;background: url('tl_files/offset/content-back.gif') repeat-x;}
label{display:block;padding-top:10px;font-size:8px;}
#footer{width:100%;height:265px;bottom:0pt;right:0pt;margin-left:5px;padding:0pt;background: url('tl_files/offset/footer-back.jpg') repeat-x;}
#footer div.spacer{width:375px;height:265px;background: url(tl_files/offset/printmaschine.jpg) no-repeat scroll 0% 0%;}

[Stephan]

Ist die CSS-Datei von deiner Seite oder von dem Link, den du gepostet hast? Ich frage deshalb, weil die Klassen und IDs in der CSS-Datei nicht TYPOlight-typisch sind. Für eine vernünftige Fehlersuche wäre es natürlich am besten, wenn man die Seite online sieht und mit Firebug untersuchen könnte. Ansonsten bräuchten wir den HTML-Quellcode der drei Seiten und die dazugehörige CSS-Datei. Ein Screenshot hilft da leider nur bedingt weiter.

[Swirl]

Die CSS Datei ist von der Seite übernommen.

[Stephan]

Das Problem, dass immer nur der erste Menüpunkt seine Farbe erhält, liegt an der Klassenvergabe bei deinem Menü. Auf der ersten Seite hat der erste Menüpunkt die Klasse .current_cyan und wird dadurch farbig. Auf der zweiten und dritten Seite aber auch, d.h. die Klassen ändern sich nicht. Die Klassen .current_yellow und .current_magenta kommen nicht zum Einsatz. Wie hast du denn das Menü in TYPOlight angelegt? Eine Standardnavigation scheint es zumindest nicht zu sein, sonst gäbe es die Klasse .active. Sehe ich das richtig?

Ich würde dir auch raten, nicht einfach eine CSS-Datei eins zu eins von einer anderen Seite zu nehmen und versuchen TYPOlight daraufhin anzupassen. Der andere Weg ist in meinen Augen der bessere: das CSS auf die Klassen und IDs von TYPOlight abzustimmen.

[Swirl]

Mal wieder alles falsch gemacht, was man falsch machen kann .
Das Menü ist in der Template Datei angelegt.

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<link rel="stylesheet" href="offset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<?php echo $this->head; ?>
</head>


<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

<div id="navigation"> 
    <ul class="nav">
      <li class="current_cyan"><a href="index.php/ng.html">x</a></li>
      <li class="magenta"><a href="index.php/um.html">xx</a></li>
      <li class="yellow"><a href="index.php/kt.html">xxx</a></li>
    </ul>
</div>

<div id="wrapper">
<?php if ($this->header): ?>

<div id="header">
<?php echo $this->header; ?> 
</div>
</div>
<?php endif; ?>

<?php echo $this->getCustomSections('before'); ?>

<div id="container">
<?php if ($this->left): ?>

<div id="left">
<div class="inside">
<?php echo $this->left; ?> 
</div>
</div>
<?php endif; ?>
<?php if ($this->right): ?>

<div id="right">
<div class="inside">
<?php echo $this->right; ?> 
</div>
</div>
<?php endif; ?>

<div id="main">
<div class="inside">
<?php echo $this->main; ?> 
</div>
<?php echo $this->getCustomSections('main'); ?> 
<div id="clear"></div>
</div>

</div>
<?php echo $this->getCustomSections('after'); ?>
<?php if ($this->footer): ?>

<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> 
</div>
</div>
<?php endif; ?>

<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
<?php echo $this->mootools; ?>

</div>
<?php if ($this->urchinId): ?>

<script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try {
var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
pageTracker._trackPageview();
} catch(err) {}
//--><!]]>
</script>

<?php endif; ?>

<div id="footer"> <div class="spacer"> </div>
</div>

</body>
</html>

[Stephan]

Ja, das ist in der Tat keine optimale Lösung, das Navigationsmenü hardcodiert in die fe_page.tpl einzubauen. Außerdem sehe ich, du hast noch weitere Änderungen darin vorgenommen und damit Fehler eingebaut. Leute, die gerade erst mit TYPOlight beginnen, sollten anfangs versuchen, die fe_page.tpl nicht zu verändern. Hierzu gibt es im Newbie-Subforum auch ganz oben einen Thread angepinnt, der sagt, warum das so ist.

Es ist nicht böse gemeint, aber ich denke, du solltest nochmal von vorn beginnen, indem du deine Content-Seiten und die dazugehörigen Artikel anlegst, dir ein Seitenlayout zurechtlegst, dann ein Modul vom Typ »Navigationsmenü« erstellst und es ins Seitenlayout z.B. im Header einbindest. Schau mal, wie weit du damit kommst. Weitere Tipps & Tricks gibt es übrigens hier.

[christian]

Stimmt - es wird Sinn machen, dass Du Dich zunächst mit der Arbeitsweise von TL vertraut machst. Zum Thema Templates (und Änderungen darin) guck Dir bitte mal diesen Post an.

Grüße,

Christian

[markusger]

Hallo zusammen,
stehe demnächst dann allerdings vor einem ähnlichen Problem. Verschiedene Menüpunkte im Typolight sollen verschiedene Icons bekommen. Das ganze soll allerdings möglichst dynamisch bleiben. Also HTML-Modul kommt eigetnlich nicht in Frage. Gibt es da eine passende Möglichkeit?
Danke und Grüße!
Markus

[Stephan]

Hallo Markus,

alles kein Problem.
Nimm das Standard Navigationsmenü und steuere das Ganze geschickt über CSS. Zuerst erhält jeder Menüpunkt eine eigene CSS-Klasse über Layout > Seitenstruktur > Datensatz bearbeiten > Experten-Einstellungen > CSS-Klasse. Dieser Klasse weist du dann ein entsprechendes Background-Image (Icon) zu und bugsierst es daraufhin an die gewünschte Position. Dazu gibt es im Übrigen auch ein tolles Tutorial im Wiki.

[markusger]

Ah! Da ist der Trick!
Und ich war immer im Navigations-Modul am suchen!
Danke!