RSS

Archive for the ‘Typo3 Snipped’ Category:

Layoutslide + Bodytag

1 Comment | This entry was posted on Jun 01 2010
?View Code TYPO3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# **
# * unique body ids
# ********************
temp.body = COA
temp.body.10 = TEXT
temp.body.10 {
field = uid
wrap = <body id="page_|" class="layout1">
	if.equals = 1
	if.value.data = levelfield:-1,layout,slide 
}
 
temp.body.20 < temp.body.10
temp.body.20.wrap = <body id="page_|" class="layout2">
temp.body.20.if.equals = 2
 
temp.body.30 < temp.body.10
temp.body.30.wrap = <body id="page_|" class="layout3">
temp.body.30.if.equals = 3
 
temp.body.40 < temp.body.10
temp.body.40.wrap = <body id="page_|" class="layout4">
temp.body.40.if.equals = 4
 
page.bodyTagCObject < temp.body

Was macht das Script?
Es Slidet das Seitenlayout auf die Unterseiten.

Wofür braucht man das?
Man hat ein Template und möchte nur auf bestimmten Seiten durch die <body class> etwas durch sein CSS verändern.

Vorteil?
1 Template aber X möglichkeiten nur per CSS einfluss dadrauf zu nehmen :)

Danke Bernhard

, , , , , ,
Allgemein, Typo3 Snipped

TYPO3: Pagetitle GIFBUILDER (Seitentitel als Bild)

0 Comments | This entry was posted on Nov 24 2009

Mit dem Snipped können Sie schnell und einfach ihren aktuellen Seitentitel als Grafik schreiben.
Kurzinformation zum Snipped.

  • alttext = ALT-TAG
  • titleText = Title-Tag
  • levelfield :-1, title, slide = Aktuelle Seite wird herausgesucht und die Titleinformation ausgeben.
  • backColor & transparentColor = dieser Wert sollte gleich sein, wenn ihr eine Transparent für euren aktuellen Hintergrund wollt.
?View Code TYPOSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

lib.getPageTitle = IMAGE
lib.getPageTitle {
	altText.data= levelfield :-1, title, slide
  	titleText.data= levelfield :-1, title, slide
	wrap = |
 
	file = GIFBUILDER
	file {
	XY = [10.w]+5,[10.h]+10
	backColor = #89BDD3
	transparentColor = #89BDD3
 
   10 = TEXT
   10 {
	text.data = levelfield :-1, title, slide
	fontFile = fileadmin/fonts/LTe50046.ttf  
        fontSize = 40
        offset = 0,40
        fontColor = #4d4d4d
        niceText = 1
   	}
   }
}

Der rest sollte bekannt sein :)
Viel Spaß damit.

, , , ,
Allgemein, Typo3 Snipped, Typo3 Stuff

TYPO3: Jquery und eine Imagemap (MAP AREA) + TemplaVoila

0 Comments | This entry was posted on Okt 27 2009

Wer schon immer mal eine Grafik mit Dynamischen Inhalten aus Typo3 haben wollte,
kann dies leicht mit Typo3 & TemplaVoila machen und ein bisschen Jquery (Danke Bernhard).
Zuerst muss man im TemplaVoila ein HTML-Template anlegen.
Das muss wie im Bild angelegt werden.
templavoila

?View Code HTML
1
2
3
4
5

<body>
<div id="maptext">
<div class="classattribute">Text</div>
</div>
</body>

Feld1: CO = CONTENT OBJECT (id=”maptext”)
Feld2: AT = ATTRIBUTE (class=”classattribute”)
+ Mapping Type: Attribute
+ Title: CSS Attribut
+ Editing Type: Plain Input Field

Feld3: EL = ELEMENT (class=”classattribute”)

>> Speichern unter >> CONTENT ELEMENT!!!

Dieses Element kann man nun im Typo3 als Flexibles Content Elment einfügen ;)
+ Beim Einfügen, daran denken CSS Attribute “maptext maptext1″, 2te Box: “maptext maptext2″ usw. einzugeben

Typo3Script zum einbinden des Jquery
jQuery ist statt $ verwendet worden, damit alles immer 100% läuft.

?View Code TYPOSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

page.headerData.95 = TEXT
page.headerData.95 = TEXT
page.headerData.95.value (	
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
 
		jQuery('area').click(function() { 
			jQuery('div.maptextshow').hide('fast');
			jQuery('div.maptextshow').removeClass("maptextshow");
 
			classname = jQuery(this).attr('class');
			jQuery('div.'+classname).show('slow');
			jQuery('div.'+classname).addClass("maptextshow"); 
 
			return false; 
		});
 
    });
    </script>
)

Typo3: Content Element –> Plain HTML

?View Code HTML
1
2
3
4
5
6
7
8

<div id="karte">
<img src="karte.jpg" usemap="#map" />
<map name="map" id="map">
<area shape="circle" coords="235,141,7" href="#" class="maptext1" />
<area shape="circle" coords="265,122,6" href="#" class="maptext2" />
<area shape="circle" coords="287,97,6" href="#" class="maptext3" />
</map>
</div>

So noch ein bisschen CSS, dann ist es schon fertig :)

?View Code CSS
1
2
3

.maptext {display:none;}
.maptext1 {}
.maptext2 {}

Viel Spaß beim ausprobieren :)

, , , , ,
Jquery, Typo3 Snipped, Typo3 Stuff