Hey,
ich würde gerne jeder Seite ein eigenes "Farbkonzept" geben.
Wenn ich z.B. auf das Menü1 gehe soll es sich Orange färben (aktiver Link), wenn ich nun von dieser Seite einen Unterpunkt öffne soll dieser auch Orange markiert werden. Die Farbe der Überschrift soll sich auch anpassen, bei Menü1 sollen sie z.B. Orange sein.
Das ganze soll auch für anderen Menüpunkte gemacht werden: Menü2 Rot -> unterpunkt Menü2 Rot -> Überschriften Rot.
Habe leider nichts passendes Googeln können, bin aber oftmals auch einfach zu blöd nach den richtigen Begriffen zu suchen :o .
Grüße,
JakobRa
Verschiedene Templates für verschiedene Seiten.
Oder kann man sowas auch per TS realisieren?
Ist wohl eher eine CSS-Sache. Man könnte die Eigenschaften, die sich ändern in separate CSS-Files auslagern und auf beliebigen Seiten includen.
Den einzelnen Menupunkte kannst Du mit zB.
NO.allStdWrap.insertData = 1
NO.ATagParams = id="navi-{field:uid}"
NO.wrapItemAndSub = <li class="navi-ebene1-li-{field:uid}"> |</li>
#2 Ebene selbe uid wie 1.Ebene
...class="navi-ebene2-{leveluid:1}"...
eigene CSS IDs/Klassen mitgeben.
Für Farben auf der Seite entsprechend:
page.10.marks.CSS_CLASS = TEXT
page.10.marks.CSS_CLASS.insertData=1
page.10.marks.CSS_CLASS.value= cssclass-{TSFE:id}-oderauch-{leveluid:1}
Im Template Marker für die CSS_CLASS einbauen.
Stylesheet noch entsprechend anpassen.
Hallo =),
danke für eure vielen Antworten, hat mir sehr weitergeholfen!
Habe das ganze jetzt so gelöst:
Im Template:
page.includeCSS.file1 = {$seitenCSS}
und dann bei der betroffenen Seite in den Constants:
seitenCSS = fileadmin/css/seite2.css
Ich würd jetz aber noch ganz gerne ein Mousover für die Menüpunkte haben, jeder Menüpunkt soll eine andere Farbe beim Mousover haben.
Habe mir dazu überlegt jedem Menüpunkt ein <span> zu geben und diesen dann im css zu bearbeiten. Gibt es dazu vllt. eine bessere Lösung als meine?
Jedem Menüpunkt eine eigene Id oder Klasse geben und dann per CSS ansprechen z.B. so:
<ul>
<li><a href="#" id="blau">Seite A</a></li>
<li><a href="#" id="rot">Seite B</a></li>
</ul>
und in der CSS
a {color: #000;}
#blau:hover {color: blue;}
#rot:hover {color: red;}
Wie kann ich das den im TS machen?
Hier das TS vom Menü:
marks.PU = HMENU
marks.PU {
1 = TMENU
1.NO = 1
1.NO.ATagParams = class="menue"
1.NO.before = || >> |*| | |*|
}
z.B. so:
marks.PU = HMENU
marks.PU {
entryLevel = 0
wrap = <ul>|</ul>
1 = TMENU
1 {
NO = 1
NO {
wrapItemAndSub (
<li id="blau">|</li> ||
<li id="rot">|</li> ||
<li id="orange">|</li> ||
<li id="grau">|</li>
)
}
ACT < .NO
ACT.ATagParams = class="current"
}
}
CSS:
a {color: #000;}
#blau a:hover, #blau .current {color: blue;}
#rot a:hover, #rot .current {color: red;}
#orange a:hover, #orange .current {color: orange;}
#grau a:hover, #grau .current {color: #333333;}
Hey,
super, genau das was ich gebraucht habe! =)
Danke dir für den Code!
Hier mein Code:
marks.PU = HMENU
marks.PU {
entryLevel = 0
1 = TMENU
1 {
NO = 1
NO {
before = || >> |*| | |*|
wrapItemAndSub (
<span id="blau">|</span> ||
<span id="rot">|</span> ||
<span id="orange">|</span> ||
<span id="gruen">|</span>
)
}
ACT < .NO
ACT.ATagParams = class="current"
}
}
Eine Sache habe ich aber noch die ich für das Menü benötige.
Die Unterpunkte sollen auch, wie bei den Oberpunkten, ein Mouseover haben und wenn sie Aktiviert sind Farbig werden.
Die Unterpunkte sollen die Farbe des Oberpunktes bekommen, so hätten alle Unterpunkte die unter dem 1ten Oberpunkt liegen (span id="rot") ein Mousover mit der Farbe Rot und wenn sie Aktiviert sind die Farbe Rot.
Das selbe soll natürlich für die anderen Unterpunkte der anderen Oberp. auch passieren, in der entsprechenden Farbe.
Das hier ist mein Untermenü:
marks.UPU = HMENU
marks.UPU {
entryLevel = 1
1 = TMENU
1 {
NO = 1
NO.before = || | |*|
}
}
Nochmals vielen Dank für eure Hilfe!
Lg,
JakobRa
Ich suche noch immer eine Lösung für mein Untermenü.
Noch eine Frage zu Menüs:
Ich habe ein Menü im Header in dem ich mein Impressum und ähnliches anzeigen lasse. Wenn ich einen Menüpunkt anklicke werden mir alle Links in meinem Untermenü angezeigt, dass soll aber nicht passieren.
Ich möchte also allen Menüpunkten meines Metamenüs sagen dass sie nicht als Untermenü angezeigt werden sollen.
Wäre super wenn mir jemand bei diesen beiden Problemen helfen könnte.
Lg,
JakobRa
Das habe ich jetzt:
Fügt das passende CSS in die Seiten ein:
page.includeCSS.file1 = {$seitenCSS}
Das Untermenü:
marks.UP = HMENU
marks.UP {
excludeUidList = 20,21,22,23
entryLevel = 1
1 = TMENU
1 {
NO = 1
NO.before = || | |*|
}
ACT < .NO
ACT.ATagParams = {$seitenCSS} = class="current"
}
Die Seiten schließt er mir jetzt aus(Gibt es eine Möglichkeit einen bestimmten SysOrdner auszuschließen?).
Ich habe bisschen mit ACT rumgespielt aber hat leider nicht funktioniert.
Er soll sich die klasse "current" aus dem jeweiligen css holen (gibt für jeden Oberpunkt eines). Weiß jemand wie das geht?
Lg
Hi,
ich glaube du gehst die ganze Sache falsch an. Normalerweise erstellt man ein Template mit funtionierendem Menü, Submenu usw und erst dann wird dieses auf das Typo3 mit TypoScript abgebildet.
Zu deinem Farbwechsel im Submenu: wie sieht das HTML aus, sprich Submenu im Hauptmenu oder an einem ganz andern Platz?
Zu:
Gibt es eine Möglichkeit einen bestimmten SysOrdner auszuschließen?
Ja die gibt es und zwar nicht nur für SysFolder sonder allgm. für ganze Zweige: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Conditions/Index.html#condition-tree-rootlineids
Mein HTML sieht so aus:
<div id="op">###OP###</div>
<div id="up">###UP###</div>
<div id="km">###SP### ###MM###</div>
Das Submenu liegt unter dem Hauptmenu.
Danke für deinen Link ich schau ihn mir gleich mal an!
Lg,
JakobRa
Geht zwar eleganter aber das sollte auch genügen:
pro Hauptmenu-Punkt eine CSS-Datei erstellen und dann je nach Zweig includieren. Darin kannst ja deinem Submenu jeweils andere Eigenschaften zuweisen.
page.headerData.10 = TEXT
[PIDinRootline = 1]
page.headerData.10.value = <link rel="stylesheet" type="text/css" media="screen" href="{$PATH}/rot.css" />
[PIDinRootline = 2]
page.headerData.10.value = <link rel="stylesheet" type="text/css" media="screen" href="{$PATH}/blau.css" />
[END]
Wie kann ich meinem Submenu den die Eigenschaften zuweisen, ich habe das nicht so ganz verstanden? =(
Momentan kriegt er die CSS Datei ja so:
Ich habe ganz oben im TS
page.includeCSS.file1 = {$seitenCSS}
und in den Constanten(.ext Template) dann seitenCSS = blabla.css
Da brauch ich das was du mir gesagt hast doch gar nicht mehr, oder habe ich dich irgendwie falsch verstanden?
Lg,
JakobRa
Moin,
deine blabla.css enthält allgemeine Definitionen oder? In die rot.css, blau.css usw... machst du nur die Änderungen am Submenu rein (in deinem Fall nur die background-color jedesmal anders). Die Ausgabe wird dann ca. so aussehen
..
<link rel="stylesheet" type="text/css" media="screen" href="fileadmin/blabla.css" />
<link rel="stylesheet" type="text/css" media="screen" href="fileadmin/rot.css" />
..
wobei sich das letzte Stylesheet immer ändert.
Tut mir leid aber ich verstehe nicht was du meinst :o .
Also ich habe ja die einzelnen Oberpunkte in spans gepackt.
Diese Definiere ich in meinem Haupt-css "style.css", hier steht welche farbe sie beim Mouseover haben sollen und welche Farbe sie annehmen sollen wenn sie aktiviert sind (.current).
Mir geht es darum wie ich meinem "UP" einen ACT (oder muss das CUR heißen?) gebe. Definieren kann ich die Farbe ja dann im Seitenspezifischen CSS, da dieses ja als erstes aufgerufen wird.
marks.UP = HMENU
marks.UP {
excludeUidList = 20,21,22,23
entryLevel = 1
1 = TMENU
1 {
NO = 1
NO.before = || | |*|
}
//Diese Stelle hier bräuchte ich, funktioniert bei mir nicht so ganz.
ACT < .NO
ACT.ATagParams = class="current"
}
Vielen dank für deine Bemühungen freshman17!
Lg,
JakobRa
Edit:
Hab mein Problem gelöst...war ein echt blöder Fehler.
1 = TMENU
1 {
NO = 1
NO.before = || | |*|
CUR < .NO
CUR.ATagParams = class="current"
}
Die Klammersetzung war falsch.
Danke allen für die Hilfe! =)
Lg,
JakobRa