Zum Inhalt springen

GMENU Hintergrund Transparent?

Erstellt am 12. Februar 2009 · 5 Antworten · letzte Antwort am 15. April 2010

Tags: Frage

Evolon ·

Hello there 🙂 Ich realisiere gerade mein erstes Projekt in Typo3 und habe ein Hintergrundbild hinter der Grafischen Navigation. Ich benutze folgenden Code:

# page zum Objekt PAGE machen
page = PAGE
## eigene stylesheet einbinden
page.stylesheet = fileadmin/template/style.css
page.includeCSS {
	file11 = fileadmin/template/link-style.css
	file11.media =screen
	file10 = fileadmin/template/content-style.css
	file10.media = screen
	}
## Meta-Angaben für Suchmaschinen
page.meta.author = my-media
page.meta.description = 
page.meta.keywords = keyword1, keyword2, keyword3
# Template an Position 10 einbinden
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/template/template.htm
page.10.workOnSubpart = DOKUMENT
page.10.marks.NAVIGATION = HMENU
### page.10.marks.NAVIGATION.1 = TMENU
### page.10.marks.NAVIGATION.1.NO = 1
### page.10.marks.NAVIGATION.1.NO.linkWrap = | <br>
## Grafikmenu BEGIN
# temp.Navi = COA
page.10.marks.NAVIGATION.1 = GMENU
	# die Links der 1. Ebene sollen Grafiken sein
	# entryLevel = 1
page.10.marks.NAVIGATION.1.NO {
		5 = IMAGE
		5.file = fileadmin/template/bilder/button-test.gif
		10 = TEXT
		# Beschriftung vom Seitentitel
		10.text.field = title
		# ausrichtung: zentrieren ( left, center, right)
		10.align = left
		# die Grafik ist so breit wie der Text an Position 10 plus
		# 20 Pixel extra: [10.w]+20,50
		XY =150, 34
		# Text 5px nach links und 25px nach unten
		10.offset = 10, 25
		10.fontSize = 20
		10.backColor = #f3f3f3
		10.transparentBackground = 1
		# Link Color
		10.fontColor = #CCCCCC
		10.niceText = 1
		wrap = <p> | </p>
	}
page.10.marks.NAVIGATION.1.RO = 1
page.10.marks.NAVIGATION.1.RO < page.10.marks.NAVIGATION.1.NO
# MouseOver Color
page.10.marks.NAVIGATION.1.RO {
		10.fontColor = #000000
		}
page.10.marks.NAVIGATION.1.CUR = 1
page.10.marks.NAVIGATION.1.CUR < page.10.marks.NAVIGATION.1.NO
page.10.marks.NAVIGATION.1.CUR {
	#Visited Color
		10.fontColor = #000000
	}
# Navigation auf Position 10 kopieren
# page.10.marks.NAVIGATION < temp.Navi
## Grafikmenu End
## die Einstellungen der ersten Ebene auf die zweite kopieren
page.10.marks.NAVIGATION.2 < page.10.marks.NAVIGATION.1
page.10.marks.NAVIGATION.2.NO.wrap =  | <br>
## page.10.marks.NAVIGATION.2.file >
page.10.marks.NAVIGATION.2.NO.10.offset = 30,25
page.10.marks.NAVIGATION.2.RO.10.offset = 30,25
page.10.marks.NAVIGATION.2.CUR.10.offset = 30,25
# Inhalt einbinden
page.10.marks.INHALT = CONTENT
page.10.marks.INHALT.table = tt_content
page.10.marks.INHALT.select.orderBy = sorting
page.10.marks.INHALT.select.where = colPos=0
# MyMedia Logo einbinden
page.10.marks.BANNER = IMAGE
page.10.marks.BANNER.file = fileadmin/template/bilder/mylogo.gif

Allerdings wird mir der Hintergrund nicht transparent, sondern weiß angezeigt. Die button-test.gif ist eine transparente GIF datei, habs auch schon mit einer Farbfläche mit #F3F3F3 probiert, ich bekomme immer einen weißen Hintergrund hinter den erzeugten gifs.

Was mach ich nur falsch? 🙂

ralfiklein ·
Evolon schrieb

Allerdings wird mir der Hintergrund nicht transparent, sondern weiß angezeigt. Die button-test.gif ist eine transparente GIF datei, habs auch schon mit einer Farbfläche mit #F3F3F3 probiert, ich bekomme immer einen weißen Hintergrund hinter den erzeugten gifs.

Was mach ich nur falsch? 🙂

Probiere es bitte mal mit einer *.png Datei.
Gifs sind wie ich gemerkt habe nur bedingt Transparent.
PNG hingegen behalten die Transparente Eigenschaft.

Evolon ·

Problem ist nur dass der Hintergrund auch weiß ist wenn ich kein Bild als Hintergrund angebe, wenn er also quasi nur den Text setzt. Mit PNG probier ich später noch.

ralfiklein ·
Evolon schrieb

Problem ist nur dass der Hintergrund auch weiß ist wenn ich kein Bild als Hintergrund angebe, wenn er also quasi nur den Text setzt. Mit PNG probier ich später noch.

Ok, da kann ich dir leider nicht weiters helfen. Sorry
Es klang so als wenns um die Grafik ging.
Ist die frage was als CSS event. an gegeben ist.

MSJones ·

So wie ich das sehe, darfst du das "transparentBackground = 1" aus Zeiel 44 nicht dem Textelement zuordnen, sondern mußt dieses direkt beim NOrmal-Modus mit reinbringen:

page.10.marks.NAVIGATION.1.NO.transparentBackground = 1

Probier das mal, so hat's bei mir geklappt.

boomer ·

Hallo zusammen,

ich schlage mich auch mit Transparenzen im GMENU rum. Folgendes ist die Ausgangssituation (Typo3 3.8.0, ImageMagick 4.2.9):

- Grafisches Menü, jeder Menüpunkt soll unterschiedlich groß sein und entweder soll eine einheitliche Hintergrundgrafik in der Breite entsprechend skaliert oder jedem Menüpunkt eine andere Grafik zugewiesen werden können -> hier bin ich noch keinen Schritt weiter

- Sowohl im Menü als auch ganz allgemein auf der Seite verwende ich transparente PNGs. Erste Idee hierzu pngbehaviour.htc, die ich auch entsprechend eingebunden habe:

seite.headerData.20 = HTML
seite.headerData.20.value (
<style type="text/css">img { behavior: url("meinpfad/pngbehaviour.htc");}</style>

)

So weit, so gut - transparente PNG's, die Bestandteil der Deisgnvorlage sind oder im CSS referenziert werden, sind nun selbst im IE 6 transparent.

ABER:

Dies gilt leider nicht für die im TS-Template angegebene Hintergrundgrafik für das GMENU. Hier habe ich nach wie vor einen schwarzen Rahmen.

=>>>>> Kennt hier jemand eine Lösung?

ZUDEM:

Um meine Navigationsbuttons sind auch noch von einem hässlichen weißen Rahmen/Hintergrund umgeben.

Wenn ich mit transparentBackground = 1 hantiere, ist der weiße Rahmen zwar weg - aber die Textbeschriftung der Buttons erscheint gräulich und verpixelt.

=>>>>> Kann mir hier jemand weiterhelfen?

Vielen Dank!