Freitag, 28. November 2014

14. Tag TYPO3, FR 28.11.2014





TYPO 3
Burkard Balzer


nachdem alle online sind, geht es los mit der Wiederholung 
  • Seiten (Müllentsorgung & Landwirtschaft) anlegen mit Verknüpfung zu einem Inhaltselement
  • Zuordnung der Redakteure zu Ihren Regionen

Templates - Element Vorlagen
Baukastenprinzip
getbootstrap.com

erhaltene templates(2).pdf-Datei downloaden
die Datei htdocs/fileadmin/tag13 öffnen und den templates-Ordner als zip-Datei auf den Desktop sichern, aus dem Download-Bereich den Ordner templates öffnen sowie den Order htdocs/fileadmin/tag13/templates öffnen und alle Dateien bis auf die tt_news_v3_template.html löschen und die neuen Dateien aus der entpackten Zip-Datei einziehen
dann die Pfade anpassen unter Template/home/Setup:
#page.includeCSS.file1 = http://fonts.googleapis.com/css?family=Abel  = ausklammern
page.10.template.file = fileadmin/templates/element.html  = die HTML-Datei austauschen
#page.10.workOnSubpart = DOCUMENT  = ausklammern
page.includeCSS.file2 = fileadmin/templates/css/style.css  = Verweis/Pfad auf die css-Datei

im Ordner htdocs/tag13/templates die element.html-Datei mit edit mit Notepade (rechte Maustaste) öffnen und in der Zeile 38 hinter <body> klicken und in der neuen Zeile 39 sowie Zeile 110 hinter </div> einfügen:
<!-- ###DOCUMENT### --> mit strg+s speichern
dann im Template/home/Setup:  
page.10.workOnSubpart = DOCUMENT  = die Ausklammerung herausnehmen
speichern und im Front-End auf der start-Seite den Quelltext kontrollieren!

wieder in der element.html-Datei:
Zeile 55: <div id="mainmenu">
einfügen in Zeile 56:  ###MENU###

und auskommentieren:
Zeile 57     <!--<ul id="menu">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="#">Pages</a>
                            <ul>
                                <li><a href="faq.html">FAQ page</a></li>
                                <li class="current"><a href="element.html">Element page</a></li>
                                <li><a href="single.html">Single page</a></li>
                                <li><a href="fullwidth.html">Fullwidth page</a></li>
                            </ul>
                        </li>

Zeile 72         </ul>-->

Zeile 83           <div class="col-584"> darunter die Zeile 84-86 löschen und den Marker setzen:
                        ###COL21###
                         </div> und mit strg+s speichern

Marker setzen:
Zeile 90           <div class="col-276-last"> darunter die Zeile 91-92 löschen und die Marker setzen:
                             ###SEARCH###
                             ###SIDEMENU###
                             ###COL22###

                        </div>  und mit strg+s speichern


im Template/TS/Setup einfügen:
in Zeile 5         wrap = <ul id="menu"> | </ul> speichern, Cache leeren und im Front-End ansehen

Funktionalität drop+down-System: 
unter einem Menüpunkt weitere Untermenüpunkte, die angezeigt werden mit Einbindung vom Java-Script (js/dropdown.js)
sprechende Index-C dh. Zuordnung (siehe 45Min-TypoSricpt - Seite 4 unten)
dazu in der htdocs/tag13/fileadmin/templates die Datei element-kopie.html mit edit mit Nodepad öffnen und die Zeilen 16-29 mit strg+c kopieren und
unter template/TS "neuen Datensatz" erstellen mit Namen "+ext headerdata" speichern,
Setup aufrufen, eingeben: 
page.headerData.10 = TEXT
page.headerData.10.value (         = wichtig runde Klammern!!!

und mit strg+v einfügen:
<!-- ////////////////////////////////// -->
<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="fileadmin/templates/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/dropdown.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/cufon-yui.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/Grandesign_Neue_Serif_400-Grandesign_Neue_Serif_700-Grandesign_Neue_Serif_italic_400.font.js"></script>
<script type="text/javascript">
            Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6') ('#mainmenu ul li a', {
        hover: true
       }) ('.button', {
        textShadow: '0px 1px 0px #fff'
       })
</script>  

und eingeben:
 )      = wichtig runde Klammer!!!
speichern,
unter template/home "edit the whole template record" und unter Basis-Template auf  Button Template klicken und +ext headerdata einfügen, speichern und schließen, Cache leeren und im Front-End kontrollieren

unter template/TS die Datei "+ext menu aufrufen" und einfügen:
lib.menu = HMENU
lib.menu {
  1 = TMENU
  1 {
    wrap = <ul id="menu"> | </ul>
    NO.wrapItemAndSub = <li> | </li>
    expAll = 1
  }
  2 < .1
}
lib.sidemenu = HMENU
lib.sidemenu {
  entryLevel = -1
  1 = TMENU
  1 {
    wrap = <li><h2>Seitenmenü</h2><ul> | </ul></li>
    NO.wrapItemAndSub = <li> | </li>
  }
}
speichern und schließen, Cache leeren und im Front-End ansehen



TIPP:
Content Commerce (pdf-Datei)
Insider-Webdesign-Einsteiger



 

Keine Kommentare:

Kommentar veröffentlichen