indexed_search: Template ohne Tabellen

Geschrieben in typo3 von natalia am 26 September 2007

Ich hasse unötige Tabellen, daher hier ein Template für indexed_search komplett ohne table, br oder p. Alles nur span oder div, daher kann man auch alles per CSS formatieren.

Hier ein Auszug aus dem Stylesheet, wie es z.B. sein könnte, das Ergebnis gibts auf derdrink.net

  1. /*** indexed_search ***/
  2. .tx-indexedsearch-searchbox form {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. .tx-indexedsearch-searchbox .formline {
  7.     clear: both;
  8.     padding-bottom: 10px;
  9.     overflow: auto;
  10. }
  11. .tx-indexedsearch-searchbox label {
  12.     width: 150px;
  13.     float: left;
  14. }
  15. .tx-indexedsearch-searchbox input {
  16.     float: left;
  17.     border: 1px solid #116aae;
  18. }
  19. .tx-indexedsearch-searchbox-button {
  20.     width: 150px;
  21.     border: 1px solid #116aae;
  22.     background-color: #ffffff;
  23.     color: #116aae;
  24. }
  25. .isearch_linkMode {
  26.     display: block;
  27.     float: left;
  28.     padding: 2px 10px;
  29. }
  30. .tx-indexedsearch-rules {
  31.     position: relative;
  32.     padding: 10px 0;
  33. }
  34. .tx-indexedsearch-rules h2 {
  35.     font-weight: normal;
  36.     font-size: 100%;
  37.     padding: 0;
  38.     margin: 0;
  39. }
  40. .tx-indexedsearch-rules a .isearch-rules-text {
  41.     display: none;
  42.     text-decoration: none;
  43.     color: #116aae;
  44. }
  45. .tx-indexedsearch-rules a:hover .isearch-rules-text{
  46.     display: block;
  47.     text-decoration: none;
  48.     position: absolute;
  49.     font-weight: normal;
  50.     top: 0;
  51.     left: 100px;
  52.     background-color: #ffffff;
  53.     padding: 10px;
  54. }
  55. .tx-indexedsearch-whatis {
  56.     padding-bottom: 10px;
  57. }
  58. .tx-indexedsearch-sw {
  59.     font-weight: bold;
  60. }
  61. .tx-indexedsearch-browsebox {
  62.     padding-bottom: 10px;
  63. }
  64. .tx-indexedsearch-res .result-row {
  65.     margin: 10px 0 20px 0;
  66. }
  67. .tx-indexedsearch-icon {
  68.     float: left;
  69.     display: block;
  70. }
  71. .tx-indexedsearch-result-number {
  72.     float: left;
  73.     display: block;
  74. }
  75. .tx-indexedsearch-title {
  76.     float: left;
  77.     display: block;
  78. }
  79. .tx-indexedsearch-percent {
  80.     float: right;
  81.     display: block;
  82. }
  83. .tx-indexedsearch-descr {
  84.     clear: both;
  85.     display: block;
  86. }
  87. .tx-indexedsearch-info {
  88.     clear: both;
  89.     display: block;
  90. }
  91. .tx-indexedsearch-path {
  92.     display: block;
  93. }

sk_calendar: Archive view

Geschrieben in typo3 von natalia am 25 September 2007

Bei der Archive view im sk_calendar (VCE) wollte ich eigentlich nur, dass die vergangenen Events wie in einer Liste angezeigt werden. Stattdessen bekam ich einen Button und eine komische Ausgabe. Ich habe einen Teil des Quelltextes geändert, damit meine Anforderungen erfüllt werden.

Die Variable Startdate wird auf 5 Jahre in der Vergangenheit gesetzt, die Variable Enddate auf den aktuellen Tag und damit die Ansicht so gerendert wird, wie die Liste, wird die Variable manuell neu gesetzt (ab Zeile 231).

  1. case 'archive':
  2.     $this->conf['general']['view'] = 'list';
  3.     $offset_temp = date('m-d-Y',$offset);
  4.     $offset_temp = explode('-',$offset_temp);
  5.     if (!$filters['startdate']) $filters['startdate'] = mktime(0,0,0,$offset_temp[0],$offset_temp[1],$offset_temp[2]-5); // 5 years back
  6.     if (!$filters['enddate']) $filters['enddate'] = $offset;
  7.     /*if ($filters['monthfilter']) {
  8.         $filters['startdate'] = $filters['monthfilter'];
  9.         $offset_temp = date('m-d-Y',$filters['monthfilter']);
  10.         $offset_temp = explode('-',$offset_temp);
  11.         $filters['enddate'] = mktime(0,0,0,$offset_temp[0]+1,$offset_temp[1],$offset_temp[2]);
  12.         $offset = $filters['monthfilter'];
  13.     } else {
  14.         if (!$filters['startdate']) $filters['startdate'] = 1; // show us everything (0 would disable filter)
  15.         $offset_temp = date('m-d-Y');
  16.         if (!$filters['enddate']) $filters['enddate'] = mktime(0,0,0)-1; // ... until not quite today
  17.     }*/
  18.         break;

Und wenn man möchte, dass diese Liste auch noch umgekehrt sortiert wird – das letze Event zuerst – da kann man manuell die Sorting Variable setzen:

  1. $this->conf['general']['view'] = 'list'; // war schon da
  2. $this->conf['sorting'] = 'update'; // steht für "up" und "date"

Quellcode Formatierung in WordPress

Geschrieben in default von natalia am 21 September 2007

Ich hab ein Plugin installiert zur Quellcode-Formatierung, funktioniert super! (bis jetzt)
Nennt sich Coolcode, hier der Link http://cnwper.cn/category/plugins/coolcode

Tabbed Content

Geschrieben in typo3 von natalia am 21 September 2007

Auf einer Seite befand sich zu viel Content, um eine Aufteilung auf mehrere Seite und Scrolling zu vermeiden, entstand die Idee den Content in eine Art Tabs anzuzeigen. Der Content sollte weiterhin in Typo3 gepflegt werden können und einige der Elemente sollten weiterhin dem Flow der Seite folgen.

Die Elemente, die in einen Mini-Tab-Browser gepackt werden sollte, werden in Typo3 mit einem Rahmen “Indent”/”Einzug” versehen. Die normalen Content Elemente werden nicht in den Browser gepackt.

Das Skript wird in den Header eingebunten, und am Ende der Seite wird die Funktion aufgerufen. Die Funktion sucht das Element mit der id “content” und überprüft alle darin befindlichen Elemente, ob sie den Klassennamen “csc-frame-indent” haben. Ich musste vorher im Template einstellen, dass nur csc-frame-indent verwendet wird. Dann werden die Elemente, die diese Voraussetzungen erfüllen, mit einer Id versehen, der Titel des Elementes wird extrahiert und auch in ein Array gepackt. Das Array wird dann abgearbeitet, es wird eine Navigation erstellt und an den Anfang des Content-Elementes gepackt. Bei Rollover wird das vorherige Element ausgeblendet und das neue eingeblendet.

Zu beachten: im HTML-Template muss der Content in <div id=”content”> eingefügt werden. Jedes Content-Element muss in einem Div mit dem Klassennamen “content-element” gewrappt werden. Und der Wrap für den Content-Rahmen muss auch geändert werden. Wie das geht, steht weiter unten im TypoScript Abschnitt.

Der Quelltext sollte nach den Änderungen etwas so strukturiert sein:

  1. <div id="content">
  2.   <div class="content-element">
  3.     <div class="csc-frame-indent">Irgenein Content</div>
  4.   </div>
  5.   [... weitere divs]
  6. </div>

Hier der Link zum Anschauen und darunter der Quelltext, zunächst das TypoScript Template und dann der JavaScript Teil.

  1. page.headerData.20 = TEXT
  2. page.headerData.20.value = <script type="text/javascript" src="fileadmin/scripts/tabbed_content.js"></script>
  3. page.99 = HTML
  4. page.99.value = <script type="text/javascript">displayTabbedContent();</script>
  5. # damit jedes Content Element in ein div gewrappt wird
  6. tt_content.stdWrap.dataWrap = <a id="c{field:uid}"></a><div class="content-element">|</div>
  7. # jedes Content Element mit Rahmen "Indent" oder "Einzug" wird so gewrappt
  8. tt_content.stdWrap.innerWrap.cObject.10.value = <div class="csc-frame-indent">|</div>
  1. var currentlyShowing = -1;
  2. // array with titles, that should be linked
  3. var titleArray = Array();
  4. // array with indices of the elements, that should be display tabbed
  5. var indexArray = Array();
  6.  
  7. function displayTabbedContent() {
  8.     var contentElement = document.getElementById("content");
  9.     contentElement.style.position = "relative";
  10.     var contentChildren = contentElement.childNodes;
  11.     var counter = 0;
  12.     for(var i=0;i<contentChildren.length;i++) {
  13.         if(contentChildren[i].className == "content-element") {
  14.             if(contentChildren[i].firstChild.className == "csc-frame-indent") {
  15.                 //alert(contentChildren[i].firstChild.className);
  16.                 contentChildren[i].style.position = "absolute";
  17.                 contentChildren[i].style.top = "0";
  18.                 contentChildren[i].style.left = "0";
  19.                 contentChildren[i].id = "tabbedContent_"+counter;
  20.                 counter++;
  21.                 //contentChildren[i].style.visibility = "hidden";
  22.                 contentChildren[i].style.display = "none";
  23.                 var titleElement = contentChildren[i].getElementsByTagName("h1")[0];
  24.                 //alert("i="+i+" "+contentChildren[i]);
  25.                 titleArray.push(titleElement.firstChild.nodeValue);
  26.                 indexArray.push(i);
  27.             }
  28.         }
  29.     }
  30.     var spacerHTML = '<div style="width: 500px; height: 400px;">&nbsp;</div>';
  31.     var naviHTML = '<div style="position: absolute; top: 0; left: -320px; width: 310px;">';
  32.     var aTagStyle = 'display: block; padding: 8px 0 1px 0;';
  33.     var divTagStyle = 'border-bottom: 1px solid transparent;';
  34.     for(var i=0;i<titleArray.length;i++) {
  35.         naviHTML+= '<div id="tabbedContentLink_'+i+'" class="tabbed_content_links" style="'+divTagStyle+'">';
  36.         naviHTML+= '<a href="#nogo" onMouseOver="showTabContent('+i+')" style="'+aTagStyle+'">'+titleArray[i]+'</a></div>';
  37.     }
  38.    
  39.     naviHTML+= '</div>';
  40.     contentElement.innerHTML = spacerHTML+naviHTML+contentElement.innerHTML;
  41.     showTabContent(0);
  42. }
  43.  
  44. function showTabContent(index) {
  45.     //alert("hide: "+currentlyShowing+" show: "+index);
  46.     if(currentlyShowing >= 0) {
  47.         // hide current and unset current in menu
  48.         if(document.getElementById("tabbedContent_"+currentlyShowing)) {
  49.             document.getElementById("tabbedContent_"+currentlyShowing).style.display = "none";
  50.             document.getElementById("tabbedContentLink_"+currentlyShowing).style.borderBottom = '1px solid transparent';
  51.         }
  52.     }
  53.     // set new index as current
  54.     currentlyShowing = index;
  55.     // display the content and mark current in menu
  56.     var elem = document.getElementById("tabbedContent_"+index);
  57.     if(document.getElementById("tabbedContent_"+index)) {
  58.         document.getElementById("tabbedContent_"+index).style.display = "block";
  59.         document.getElementById("tabbedContentLink_"+currentlyShowing).style.borderBottom = '1px solid #5084bc';
  60.     }
  61. }

GMENU_LAYERS

Geschrieben in typo3 von natalia am 21 September 2007

Es sollte für die Seite derdrink.net eine Navigation erstellt werden, die bei Rollover bereits aufklappt, da eine bestimmte Schrift benutzt werden musste, kam eigentlich nur GMENU_LAYERS in Frage.

Um diesen Menütyp zu benutzen, muss ein Script eingebunden werden, dazu schreibt man folgendes in das Template (in meinem Fall ein Basistemplate):

  1. includeLibs.gmenu_layers = media/scripts/gmenu_layers.php

Das Menü habe ich wie in den Beispielen im Typo3 Buch und in den meisten Beispielen beschrieben erstellt. Wenn man erstmal angefangen hat zu verstehen, wofür die meisten parameter benötigt werden, dann gehts. Das Menü sollte wie folgt aussehen: Zwei Spalten mit einer festen Breite und Höhe oben auf einer Seite mit einer festen Breite (nämlich 900px), mittig ausgerichtet. Wenn in der linken Spalte ein Element berührt wird, werden die Untermenüpunkte in der rechten Spalte angezeigt, beginnend von oben und mit einer Art Sprechblase im Hintergrund.

Das Problem entstand erstmal dadurch, dass die Untermenüpunkte in Abhängigkeit von dem angewählten dargestellt wurden, also nicht von oben beginnend. Also setze ich die Variable lockPosition = x, was dazu führte, dass die x Position des Untermenüs sich plötzlich änderte. Dagegen half die Einstellung setFixedWidth = 0, was Typo3 annehmen ließ, alle Einträge seien 0px breit. Nun wurde das Menü zumindest immer an einer Stelle angezeigt, leider war es die linke Ecke der Seite, da gehörte es aber nicht hin.

Das setzen der Variable relativeToTriggerItem=1 zerstörte das Menü komplett, also blieb der Wert bei 0. In layerStyle gibt man die style-Eigenschaften der Layer an. Diese werden absolut positioniert. Dort einen Offset von links reinzuschreiben war nicht möglich, da die Position von der Breite des Browserfensters abhängt – der ganze Content ist ja mittig ausgerichtet.

Die Lösung war der folgende Ansatz: Die Layer bekommen die Style-Eigenschaft width: 100%; und top: 10px, neben den default-Werten position: absolute und visibility: hidden; Innerhalb des Layers wird die zweite Ebene aufgebaut, diese wurde in ein div gewrappt, das die Breite des Seitenelementes hatte ( 900px) und mittig positioniert. Innerhalb dieses divs war wieder ein div, das relativ positioniert wurde, an der Stelle, an der das Menü erscheinen sollte. Diesem div wurde der Sprechblasen-Hintergrund zugewiesen. Innerhalb diese Divs befinden sich nun die Links der zweiten Ebene. Das zweite Div musste mittels position versetzt werden, da das Setzen eines Wertes für margin bewirkt, dass die erste Menüspalte von dem Div überlagert wird und das Menü daher nicht funktioniert. So ist das Menü getestet in FF, IE7 und Opera.

  1. temp.navi = HMENU
  2. temp.navi.entryLevel = 1
  3. temp.navi.1 = GMENU_LAYERS
  4. temp.navi.1 {
  5.   layerStyle = position: absolute; visibility: hidden; width: 100%; top: 10px;
  6.   lockPosition = x
  7.   setFixedWidth = 0
  8.   relativeToTriggerItem = 0
  9.   freezeMouseover = 0
  10.   expAll = 1
  11.   displayActiveOnLoad = 1
  12.   dontHideOnMouseUp = 1
  13.   NO {
  14.     ATagParams = style="height: 32px; width: 260px; display: block;"
  15.     XY = 260,28
  16.     backColor = #ffffff
  17.     transparentBackground = 1
  18.     10 = TEXT
  19.     10.text.field = title
  20.     10.fontFile = fileadmin/templates/DINEngschrift.otf
  21.     10.fontColor = #116aae
  22.     10.fontSize = 20
  23.     10.offset = 0,22
  24.     # 10.niceText = 1 // ausgeschaltet, vertraegt sich nicht mit transparentBackground
  25.   }
  26.   RO < .NO
  27.   RO {
  28.     10.fontSize = 24
  29.     10.offset = 0,22
  30.     20 = IMAGE
  31.     20.file = fileadmin/images/menu_pfeil.gif
  32.     20.offset = 251,5
  33.   }
  34.   RO = 1
  35.   ACT < .RO
  36.   ACT {
  37.     10.fontColor = #f7b221
  38.     20 >
  39.   }
  40.   ACT = 1
  41. }
  42. temp.navi.2 = GMENU
  43. temp.navi.2 {
  44.   wrap = <div style="position: relative; width: 900px; margin: 0 auto;"><div style="position: absolute; left: 600px; top: 0; width: 250px; height: 220px; padding: 10px; background-image: url(fileadmin/images/menu_layer_bg.gif); background-repeat: no-repeat; text-align: left;">|</div></div> 
  45.   NO {
  46.     ATagParams = style="display: block; height: 32px;"
  47.     XY = 200,28
  48.     backColor = #ffffff
  49.     transparentBackground = 1
  50.     10 = TEXT
  51.     10.text.field = title
  52.     10.fontFile = fileadmin/templates/DINEngschrift.otf
  53.     10.fontColor = #116aae
  54.     10.fontSize = 20
  55.     10.offset = 0,22
  56.     # 10.niceText = 1 // ausgeschaltet, vertraegt sich nicht mit transparentBackground
  57.   }
  58.   RO < .NO
  59.   RO {
  60.     10.fontSize = 24
  61.     10.offset = 0,22
  62.   }
  63.   RO = 1
  64.   ACT < .RO
  65.   ACT {
  66.     10.fontColor = #f7b221
  67.   }
  68.   ACT = 1
  69. }

Fatburner Step

Geschrieben in choreos von natalia am 20 September 2007

Block A
8 ZZ – 4 Leg Curl um das Step herum re
8 ZZ – Basic Tap (aus zwei Basic, rauf, zwei Taps, runter) re
8 ZZ – Kick Straddle re
8 ZZ – Kick Repeater zurück, anstatt 2. einen Lunge nach hinten machen re

Block B
16 ZZ – Double Knee re, Double Knee li, 1 March re, 1 V-Step re
8 ZZ – Side Leg Lift
8 ZZ – 1 Basic, 1 Flieger

Block C
8 ZZ – Mambo re (linken Fuß hinten kreuzen und hinter das Step setzen), Mambo li
8 ZZ – wiederholen
8 ZZ – 2 V-Step re
8 ZZ – Repeater Knee mit Scherensprung Front

Favicon in Typo3

Geschrieben in typo3 von natalia am 19 September 2007

Zunächst mal ein favicon erstellen:
Entweder mit einem Grafikbearbeitungsprogramm wie GIMP oder Photoshop, dann als bmp oder gif speichern, in InfanView öffnen und als .ico abspeichern
Oder diese schicke Seite verwenden, um schnell und einfach ein Icons zu erstellen: http://www.favicon.cc/, Ideen holen kann man sich da auch.

Dann ins Hauptverzeichnis des Servers hochladen. Meistens funktioniert es dann auch schon so, aber es ist sinnvoll es noch ins Template einzubauen.

  1. page = PAGE
  2. page.headerData.10 = TEXT
  3. page.headerData.10.value = <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Aerobic (Elvis und Flatley)

Geschrieben in choreos von natalia am 19 September 2007

Block A

8 ZZ – 4 March vor, V-Step Drehung 180
8 ZZ – 4 March vor (zurück zum Platz), V-Step Drehung 180
8 ZZ – 4 Leg Curl im Quadrat
8 ZZ – Mambo, Pivot Turn

Block B
8 ZZ – Shuffle re, mit halben Mambo am Ende, A-Step li
8 ZZ – Shuffle li, mit halben Mambo am Ende, A-Step re
8 ZZ – Step Knee vor, Tap seit li und re
8 ZZ – Step Knee vor, Tap seit re und li

Block C
8 ZZ – Elvis, Mambo li
8 ZZ – Elvis, Mambo re
8 ZZ – Flatley re, Flatley li
8 ZZ – V-Step, 2 mal federn am Platz

Elvis = aufgebaut aus Sidetoside, dann zweimal auf jeder Seite tappen, der Endschritt besteht aus einem Schritt seit z.B. re, linkes Knie 2 mal eindrehen (auf 2 und 4), mit li weiter

Flatley = aufgebaut aus Knee Lift front, zweimal auf jeder Seite, beim zweiten Mal den Fuß vorne kreuzen, die Arme im Bizeps Curl dazu und leicht springen

Mit einer guten Gruppe kann man nach einem Warm-Up die Blöcke schön einüben, so dass man nach ca. 40 Minuten die Choreo drin hat. Insgesamt sind es 3×32 Blöcke. Da der letze Block neutral endet, hatte ich ihn nochmal auf links wiederholen lassen, so dass die Choreo 4×32 lang war. Man könnte aber auch die komplette Choreo auf links einstudieren. Mit einer Anfängergruppe reicht evtl. auf die Grundform.

Athletic Stretch: Ritual 1 – Sphinx

Geschrieben in choreos von natalia am 19 September 2007

Ausgangsstellung ist die Bank, Füße und Hände umpositionieren und im Brett in die Bauchlage gehen. Die Hände auf Brusthöhe neben dem Oberkörper positionieren, den Oberkörper unter Transversusspannung anheben. Den OK drehen, die Hände tippen dabei auf den Boden. [Hier habe ich noch eine Gegenbewegung zur Beugehaltung eingebaut.] Wieder hochdrücken zur Kauerstellung, dann in die Bank. Ein Bein seitlich ausstrecken und weiterrutschen zur Adduktorendehnung, den Oberkörper in der Mitte lassen, den Fuß vom gebeugten Knie weiter zur Mitte drehen. Durch eine leichte Vor- und Rückwärtsbewegung den Punkt finden, wo es am meisten zieht und dort versuchen, den Rücken zu strecken und die natürliche S-Form wieder zu erreichen. Wieder zurück in die Bankstellung und die WS mobilisieren.

Athletic Stretch: Ritual 4 – Sumo

Geschrieben in choreos von natalia am 18 September 2007

Matte senkrecht zum Körper ausrichten, geöffneter Squat an einem Ende der Matte. Die Arme nacheinander öffnen, vor dem Körper auf Brusthöhe gegenseitig aufeinander pressen und zur Sumoringer-Stellung senken. Mit dem Becken “spielen”. Die Hände auf der Matte abstellen und nach vorne wandern, öffnen und den Oberkörper senken zum umgekehrten V. WS hängen lassen, Schultern “tief”, Kopf lockern. Hand und Fusposition zur Bankstellung versetzen und in die Bauchlage senken. In die aktive Kauerstellung hochdrücken und möglichst fließend zum umgekehrten V hochdrücken. Zum Fersensitz senken, Oberkörper heben, ein Bein öffnen und zur Ausgangsposition hochdrücken.

Es ist auch möglich beim 2.V ein Bein zur Decke zur strecken, Hüfte dabei nicht drehen und im Standspagat das Bein nachzuziehen.