Hi Experten,
nach langem herumtüfteln habe ich es fast geschafft ein nettes GMENU mit abgerundeten Kanten zu erstellen.
Ich sage "fast" denn ich sitze schon seit einiger Zeit vor einem Problem:
die Maske wird zwar dynamisch erstellt, die Masken-GIFs für die Abgerundeten Kanten werden richtig platziert, jedoch krieg ich es nicht hin, die Maske genauso breit wie die Buttons zu gestalten. #angry#
Unter http://lemon3.linux5.webhome.at könnt ihr sehen wie es zZ aussieht, und das ist das TS dazu:
temp.mainMenu = HMENU
temp.mainMenu {
special = directory
special.value = 1
1 = GMENU
1.wrap = <ul class="mainMenu" align="right"> | </ul>
1.noBlur = 1
1.NO = GIFBUILDER
1.NO {
backColor = #2E340B
#Hintergrundbild
5 = IMAGE
5.file = fileadmin/templates/images/mainMenuBgNO.jpg
#Beschriftung als Text rendern
10 = TEXT
10.text.field = title
10.fontColor = #000000
10.fontFile = fileadmin/templates/fonts/InsigniaLTStd.otf
10.fontSize = 18
10.antiAlias = 1
10.offset = 0,21
10.align = center
10.niceText = 1
XY = [10.w]+16,30
transparentBackground = 0
wrap = <li class="mainMenu-NO"> | </li>
# Die Maske
5.mask = GIFBUILDER
5.mask {
# Hier wird die dynamische Maske mit der gleichen Größe wie das aktuelle
# Bild erstellt, aber mit runden Ecken.
format = gif
XY = [10.w]+16,30
color = #FFFFFF
# Die Maske für die Ecke oben links setzen
30 = IMAGE
30.file = fileadmin/templates/images/cornerMaskTL.gif
30.align = l,t
# Die Maske für die Ecke oben rechts setzen
40 = IMAGE
40.file = fileadmin/templates/images/cornerMaskTR.gif
40.align = r,t
}
}
}
Es schaut so aus als könnte die Breite des dynamisch generierten Buttons nicht mit innerhalb von "5.mask {...}" genommen werden... o.O
Ich wäre Euch sehr dankbar wenn Ihr mir helfen könntet.
MfG
hi,
ich bin mittlerweile etwas weitergekommen, aber es funktioniert nur zum Teil. D.h. die Rundung oben links wird platziert, die Breite des Buttons stimmt, aber die Rundung oben rechts erscheint nicht.
Mein TS sieht jetzt so aus:
temp.mainMenu = HMENU
temp.mainMenu {
special = directory
special.value = 1
1 = GMENU
1.wrap = <ul class="mainMenu" align="right"> | </ul>
1.noBlur = 1
1.NO = 1
1.NO {
backColor = #2E340B
# transparentBackground = 1
#Hintergrundbild
5 = IMAGE
5.file = fileadmin/templates/images/mainMenuBgNO.jpg
#Beschriftung als Text rendern
10 = TEXT
10.text.field = title
10.fontColor = #000000
10.fontFile = fileadmin/templates/fonts/InsigniaLTStd.otf
10.fontSize = 18
10.antiAlias = 1
10.offset = 0,21
10.align = center
10.niceText = 1
XY = [10.w]+16,30
transparentBackground = 0
wrap = <li class="mainMenu-NO"> | </li>
# Die Maske
5.mask = GIFBUILDER
5.mask {
# Hier wird die dynamische Maske mit der gleichen Größe wie das aktuelle
# Bild erstellt, aber mit runden Ecken.
format = gif
XY < 1.NO.XY
color = #FFFFFF
# Die Maske für die Ecke oben links setzen
30 = IMAGE
30.file = fileadmin/templates/images/cornerMaskTL.gif
30.align = l,t
# Die Maske für die Ecke oben rechts setzen
40 = IMAGE
40.file = fileadmin/templates/images/cornerMaskTR.gif
40.align = r,t
}
}
}
Bitte, bitte helft mir weiter... ich sitze schon seit viel zu langer Zeit an diesem Problem
Danke
Olla!
Füge mal bei 5.mask.40 einen negativen Offset hinzu, könnte mir vorstellen, dass mit align = r,t die Ecke ausserhalb des sichtbaren Bereichs plaziert wird.
gruss, fuss
Hallo,
danke für die Antwort. Mittlerweile habe ich durch herumprobieren erkannt, dass die Box, die generiert wird wahrscheinlich unendlich groß ist, und deshalb die Rundung nur im linken oberen eck zu sehen ist...
Wenn ich die Länge per hand eingebe (XY = 50,30) dan funktioniert es mit der Rundung auch rechts. Irgendwie muß es doch möglich sein de Maske mitzuteilen dass sie genau gleich groß sein soll wie der Button... #angry#
Der Fehler liegt höchstwahrscheinlich in der Übergabe von XY
XY < .1.NO.XY
Der Punkt vor der 1 fehlt.
Allerdings wird die Zuordnung hier wohl so nicht funktionieren, da Du auf ein höher gelegenes Objekt referenzierst. Lass mich aber gerne eines Besseren belehren 😉
gruss, fuss
Hi,
jetzt sieht mein TS so aus:
# Die Maske
15 = GIFBUILDER
15 {
format = gif
XY < .1.NO.XY
# Hier wird die dynamische Maske mit der gleichen Größe wie das aktuelle
# Bild erstellt, aber mit runden Ecken.
# Die Maske für die Ecke oben links setzen
20 = IMAGE
20.file = fileadmin/templates/images/cornerMaskTL.gif
20.align = l,t
#Die Maske für die Ecke oben rechts setzen
25 = IMAGE
25.file = fileadmin/templates/images/cornerMaskTR.gif
25.align = r,t
25.offset = -50,0
}
Und die Seite sieht so aus: http://lemon3.linux5.webhome.at
Die Maske wird also nicht unendlich groß. aber der Offset scheint absolut und nicht variabel zu sein... 🙁
Dann arbeite halt mit einer Hilfsebene:
Render Dir IN der Maske den Text nochmal, allerdings mit einer Farbe, die keinerlei Einfluss auf das eigentliche Bild hat. Dann kannst Du Dir von dem Text die Breite nehmen.
gruss, fuss
Hi,
danke für den Tipp! Ich bin nicht so bewandert in TS... Könntest du mir bitte dabei helfen? Ich denke dass so etwas einen gewissen Tutorial-Wert haben könnte! Damit jedermann Menüs mit abgerundeten Kanten generieren kann...
Danke
Ich bin nicht so bewandert in TS... Könntest du mir bitte dabei helfen?
Klar, aber Eigeninitiaive ist angesagt 😉
Kopier Dir den Bereich von NO.10 (#Beschriftung als Text rendern) und XY = [10.w]+16,30 einfach nochmal in die Maske rein (die XY < Zuordnung fliegt somit raus).
Dann musst Du evtl. noch die Fontfarbe in der Maske anpassen (von #000000 auf #FFFFFF), jenachdem, welche Farbe halt für Transparenz sorgt, und das sollte es dann gewesen sein.
gruss, fuss
# Die Maske
15 = GIFBUILDER
15 {
format = gif
#Beschriftung als Text rendern
16 = TEXT
16.text.field = title
16.fontColor = #FFFFFF
16.fontFile = fileadmin/templates/fonts/InsigniaLTStd.otf
16.fontSize = 18
16.antiAlias = 1
16.offset = 0,21
16.align = center
16.niceText = 1
XY = [10.w]+16,30
# Die Maske für die Ecke oben links setzen
20 = IMAGE
20.file = fileadmin/templates/images/cornerMaskTL.gif
20.align = l,t
#Die Maske für die Ecke oben rechts setzen
25 = IMAGE
25.file = fileadmin/templates/images/cornerMaskTR.gif
25.align = r,t
}
Hi, war gerade dabei das zu tun. Das Ergebnis sieht aber noch nicht so aus wie ich es haben möchte... 🙁
http://lemon3.linux5.webhome.at
Fehler gefunden!!!!!!
Jetzt klaptts!!!!!!
antatt XY = [10.w]+16,30 sole innerhalb der Maske XY = [16.w]+16,30 kommen!!!
Danke Danke Danke Danke
😃 😃 😃 😃 😃