Hallo zusammen,
Bin noch ein relativer "Frischling" 😉 was Typo angeht und bin jetzt schon eine ganze Weile am probieren und suchen... Vielleicht könnt ihr mir helfen.
Und zwar:
Ich möchte gerne ein TMenu realisieren welches die aktive Seite in einer anderen Farbe darstellt. Nun gut mit CSS lässt sich da ja einiges machen. Leider bin ich mir nicht siche, wie ich das genau anstellen soll...
Muss ich 2 CSS-Klassen erstellen und die dann per TypoScript zuordnen??? Ich hab keinen blassen Schimmer, wie ich das anstellen soll.
Ich hab schon verschiedenste Foren durchsucht, aber leider nrgends die lösung für mein Problem gefunden.
Kann mir jemand vielleicht helfen??? Bitte
hier noch ein auszug aus meinem Setup:
## Menu [Begin]
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO{
allWrap = <img src="fileadmin/templates/gfx/navilink.gif" align="absmiddle" alt="" />| <br>
ATagParams = class="navilink1"
}
lib.mainMenu.2 = TMENU
lib.mainMenu.2.NO{
allWrap = <img src="fileadmin/templates/gfx/navilink2.gif" align="absmiddle" alt="" /> | <br>
ATagParams = class="navilink2"
}
lib.mainMenu.3 = TMENU
lib.mainMenu.3.NO{
allWrap = <img src="fileadmin/templates/gfx/navilink2.gif" align="absmiddle" alt="" /> | <br>
ATagParams = class="navilink3"
}
## Menu [End]
page= PAGE
page.stylesheet = fileadmin/templates/style.css
page.config.doctype = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
Grüßle Steffi
Hallo, kann mir hier denn wirklich keiner helfen??? 😢
Hallo,
das haben wir in unserer css stehen:
a:active {
font-family: arial, helvetica,
font-size: 12px;
color: #f66be7;
}
die werte sind nur beispielwerte,
a:hover { } = wenn man drüber geht,
a:link { } = farbe des links, gilt für
die alle links auf der Seite
a:visited { } = farbe des links, der
besuchten Seiten
Reihenfolge
a:link{}
a:visited{}
a:hover{}
a:active{}
beachten.
Man muß keine klassen zuweisen.wir haben es nicht gemacht.
Grüße
ava99
Vielen lieben Dank für deine Antwort.
Das heisst also, dass auf eurer Page die aktive Seite farblich hervorgehoben wird???
Ich teste das mal und melde mich nochmal...
Tschüssi Steffi
Also gut, dass klappt alles. bis auf a:active...
Ich habe nach langem Suchen hier etwas mit ACT und CUR gefunden,
weiss aber nun nicht, wie ich das anwenden soll...
hat jemand ein Beispiel, wie ich für mein Setup dies verwenden kann??? Ich wäre euch sehr dankbar.
Grüßle Steffi
PS: Ich weiss, dass solche Fragen nicht sehr beliebt sind hier, aber vielleicht erbarmt sich ja jemand...
Hallo,
meines wissens ist CUR für aktuelle seite zuständig.
wir benutzen so :
MENU_LEFT.2.CUR < .MENU_LEFT.2.RO
MENU_LEFT = ###Marker### und 2 ist für rootlevel 2, sprich Untermenü
RO = Rollover
CUR = current = aktuell
In unserem Beispiel werden die Einstellungen vom Rollover auf current kopiert.
bin im Moment auch noch Anfänger
Grüße
ava99
Hallo, hab mir deinen Code jetzt nochmals angeschaut:
Das hier:
page= PAGE
page.stylesheet = fileadmin/templates/style.css
muß ganz am Anfang stehen.
dies funktioniert wie Variablen
Grüße
ava99
Du bist super...
Danke. Ich werd fleissig weiter probieren und dann mal schaun, was so draus wird...
Grüßle Steffi
Hallo,
ja wunderbar, das es jetzt funktioniert.
viel spaß beim weiteren ausprobieren und rumtüffteln. wenn fragen aufkommen, einfach wieder posten
viel erfolg
grüße
ava99
@: Ava99,
Ich glaube ich dreh gleich durch... irgendwie hab ich ein riesen Bett vor dem Kopf. Ich bekommdas mit CUR überhaupt nicht auf die Reihe. Naja, ein Versuch war es wert.
Es will einfach net...
😢
Hallo Sep,
ich habe das wie folgt gelöst:
Setup
# NAVIGATION
temp.NAVIGATION = HMENU
temp.NAVIGATION {
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="ullevel1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="level_1_NO">|</li>
1.IFSUB=1
1.IFSUB.linkWrap=<li class="level_1_SUB">|</li>
/*
1.ACT = 1
1.ACT.linkWrap = <li class="level_1_ACT">|</li>
1.ACTFSUB = 1
1.ACTIFSUB.linkWrap = <li class="level_1_ACT">|
*/
1.CUR = 1
1.CUR.linkWrap = <li class="level_1_ACT">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="level_1_NO">|</li>
1.CURFSUB = 1
1.CURIFSUB.linkWrap = <li class="level_1_NO">|
2 = TMENU
2.noBlur = 1
2.wrap = <ul class="ullevel2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="level_2_NO">|</li>
2.IFSUB=1
2.IFSUB.linkWrap=<li class="level_2_SUB">|</li>
/*
2.ACT = 1
2.ACT.linkWrap = <li class="level_2_ACT">|</li>
2.ACTIFSUB = 1
2.ACTIFSUB.linkWrap = <li class="level_2_ACT">|
*/
2.CUR = 1
2.CUR.linkWrap = <li class="level_2_ACT">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="level_2_NO">|</li>
2.CURFSUB = 1
2.CURIFSUB.linkWrap = <li class="level_2_NO">|
3 = TMENU
3.noBlur = 1
3.wrap = <ul class="ullevel3">|</ul></li>
3.NO = 1
3.NO.linkWrap = <li class="level_3_NO">|</li>
3.CUR = 1
3.CUR.linkWrap = <li class="level_3_ACT">|</li>
}
CSS
.ullevel1
{
list-style: none;
margin: 0;
padding: 0;
/* background-color: #00000;*/
}
.ullevel2
{
list-style: none;
margin: 0;
padding: 0;
/* background-color: #00000;*/
}
.ullevel3
{
list-style: none;
margin: 0;
padding: 0;
/* background-color: #00000;*/
}
/*
.level_1_NO
{
text-decoration: none;
display: block;
padding: 2px 6%;
background-color: #FFFFFF;
font: bold 1.2em arial, sans-serif;
color: #636552;
}
*/
.level_1_NO a:link, .level_1_NO a:visited
{
text-decoration: none;
display: block;
padding: 6px 12px;
background-color: #CE3000;
font: bold 12px Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.level_1_NO a:hover
{
background-color: #8C8E94;
color: #FFFFFF;
}
.level_1_ACT a:link, .level_1_ACT a:visited
{
text-decoration: none;
display: block;
padding: 6px 12px;
background-color: #8C8E94;
font: bold 12px Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.level_1_SUB a:link, .level_1_SUB a:visited
{
text-decoration: none;
display: block;
padding: 6px 12px;
font: bold 12px Arial, Verdana, sans-serif;
color: #FFFFFF;
background: url("/fileadmin/media/navi_pfeil_rechts.gif");
background-repeat: no-repeat;
background-color: #CE3000;
border: 0px solid black;
}
.level_1_SUB a:hover
{
background-color: #8C8E94;
color: #FFFFFF;
}
/*2.EBENE*/
.level_2_NO a:link, .level_2_NO a:visited
{
text-decoration: none;
display: block;
padding: 6px 25px;
background-color: #CE3000;
font: bold 11px Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.level_2_NO a:hover
{
background-color: #8C8E94;
color: #FFFFFF;
}
.level_2_ACT a:link, .level_2_ACT a:visited
{
text-decoration: none;
display: block;
padding: 6px 25px;
background-color: #8C8E94;
font: bold 11px Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.level_2_SUB a:link, .level_2_SUB a:visited
{
text-decoration: none;
display: block;
padding: 6px 25px;
font: bold 11px Arial, Verdana, sans-serif;
background: url("/fileadmin/media/navi_pfeil_rechts.gif");
background-color: #CE3000;
background-repeat: no-repeat;
color: #FFFFFF;
}
/*3.EBENE*/
.level_3_NO a:link, .level_3_NO a:visited
{
text-decoration: none;
display: block;
padding: 6px 40px;
background-color: #CE3000;
font: bold 10px Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.level_3_NO a:hover
{
background-color: #8C8E94;
color: #FFFFFF;
}
.level_3_ACT a:link, .level_3_ACT a:visited
{
text-decoration: none;
display: block;
padding: 6px 40px;
background-color: #8C8E94;
font: bold 10px Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.level_3_SUB a:link, .level_3_SUB a:visited
{
text-decoration: none;
display: block;
padding: 6px 40px;
background-color: #CCFFCC;
font: bold 10px Arial, Verdana, Sans-serif;
color: #636552;
}
Damit wird immer die aktive Seite in der Navigation angezeigt und wenn es zu Seiten noch weitere Unterseiten gibt, wird eine Pfeil vor diesem Navigationspunkt eingeblendet.
Das geht sicher auch alles noch viel eleganter, aber ich bin auch neu in der "Branche".
Gruß
Juri
Hi Juri,
Also, ich kann das aus deinem Code nachvollziehen. Nur mir gelingt es nicht das auf meinen Code anzuwenden. Es hört sich ja ziemlich naiv und dumm an, aber könntest Du mal über meinen Code schauen und mir vielleicht noch einen Tipp geben :o
Ansonsten fällt mir nichts mehr ein...
Bedank mich schon nochmals bei euch, dass ihr versucht habt, mir zu helfen...
Grüßle Steffi
page.config.doctype = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
page= PAGE
page.stylesheet = fileadmin/templates/style.css
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
## Menu [Begin]
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO{
allWrap = <img src="fileadmin/templates/gfx/navilink.gif" align="absmiddle" alt="" />| <br />
ATagParams = class="navilink1"
}
lib.mainMenu.2 = TMENU
lib.mainMenu.2.NO{
allWrap = <img src="fileadmin/templates/gfx/navilink2.gif" align="absmiddle" alt="" /> | <br />
ATagParams = class="navilink2"
}
lib.mainMenu.3 = TMENU
lib.mainMenu.3.NO{
allWrap = <img src="fileadmin/templates/gfx/navilink2.gif" align="absmiddle" alt="" /> | <br />
ATagParams = class="navilink3"
}
## Menu [End]
Hallo Steffi,
so wie ich es verstanden habe, kann die Navigation folgende Zustände annehmen:
- NO für NOrmal, d.h eine simpler Navigationspunkt
- ACT für Actual, d.h. für einen Navigationspunkt, der z.Zt. angeklickt wurde, dabei kann es vorkommen, dass in einer 3-stufigen Navigation (Hauptmenü, Untermenü, Unter-Untermenü) der gesamte Pfad zur aktuellen Seite ACT ist,
- SUB für einen Menüpunkt mit Unterpunkten
- CUR für den aktuellen Menüpunkt, ähnlich wie ACT, aber wirklich nur der Menüpunkt, dessen Seite derzeit angezeigt wird.
In deinem Setup sehe ich aber keine Abfrage nach CUR und deswegen kannst du auch nicht den aktuellen Menüpunkt lokalisieren und markieren.
Ich denke (beschäftige mich wie gesagt auch erst ein paar Wochen mit TYPO3), dass du in dein Skript noch folgendes Einbauen musst:
lib.mainMenu.1.CUR{
allWrap = <img src="fileadmin/templates/gfx/ich_bin_aktiv.gif" align="absmiddle" alt="" />|
ATagParams = class="ich_bin_aktiv"
}
Diesen Teil musst du dann auch für die Punkte mainMenu.2 und mainMenu.3 einsetzen.
Viel Erfolg & Gruß
Juri