/ Published in: TYPO3
A Typo3 quickstart guide
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
# Introduction Package # Edit Template "ROOT" on page "TypoScript Templates" # Search for ROOT # Change filepaths filepaths { # cat=filepaths; type=string; label=HTML Templates: Location of the (X)HTML templates relative to site templates = fileadmin/default/mesaric/ # cat=filepaths; type=string; label=CSS: Location of the Cascading Style Sheets relative to site css = fileadmin/default/mesaric/css/ # cat=filepaths; type=string; label=Images: Location of the images relative to site images = fileadmin/default/mesaric/images/ # cat=filepaths; type=string; label=Scripts: Location of the Javascript files relative to site scripts = fileadmin/default/mesaric/scripts/ # cat=filepaths; type=string; label=HTML Templates for extensions: Location of the (X)HTML templates for extensions extensiontemplates = fileadmin/default/mesaric/extensions/ } # Change template files and conditions [globalVar = TSFE:id = 1] # cat=plugin.automaketemplate; type:string; label= HTML template file: Name of the HTML page template file (without path, see contant for filepath.templates) templatefile = index.html } [global] # cat=plugin.automaketemplate; type:string; label= HTML template file: Name of the HTML page template file (without path, see contant for filepath.templates) templatefile = subpage.html } # Edit Template "plugin.automaketemplate" on page "extension_configuration" # divs freischalten # search for plugin.automaketemplate # Configuring the Auto-Parser for main template: # Read the template file content.file = {$filepaths.templates}{$plugin.tx_automaketemplate_pi1.templatefile} elements { # blaaa blaaa other stuff # Custom DIV.id.content = 1 } # Prefix all relative paths in the HTML template with this value #relPathPrefix = {$filepaths.templates} } # Insert Backend Layout # Root Template (das mit der Weldkugel) # Edit -> Resources -> Typoscript Configuration # add at last line ##id storagepage of gridlayout TCEFORM.pages.backend_layout.PAGE_TSCONFIG_ID=78 TCEFORM.pages.backend_layout_next_level.PAGE_TSCONFIG_ID=78 # Edit Template "page" on page "page_configuration" # and insert Template subparts # Search for page subparts { # blaaa blaaa other stuff # Custom content < styles.content.get } # Create Navigation # Edit Template "menu.firstlevel" on page "menu_configuration" menu.firstlevel < menu menu.firstlevel { # Since this is the top-level menu, we start this menu at the root level of the website entryLevel = 0 } menu.firstlevel{ 1 { wrap = <ul>|</ul> # Always unfold all sub-levels of the menu expAll = 1 # Remove the (old) default behaviour which adds onfocus="blurLink(this);" to all links noBlur = 1 # Define the normal state (not active, not selected) of menu items # Using NO=1 to activate normal state is not necessary, but useful when copying NO { # Use the page title field the title property on the A-tag, but only if the navigation title is set ATagTitle { field = title fieldRequired = nav_title } # Use the option-split feature to generate a different wrap for the last item on a level of the menu # The last item on each level gets class="last" added for CSS styling purposes. # # See the TSref documentation for details about option split and other features: # http://typo3.org/documentation/document-library/references/doc_core_tsref/current/ wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li class="last">|</li> # HTML-encode special characters according to the PHP-function htmlSpecialChars } # Copy properties of normal to active state, and then add a CSS class for styling ACT { ATagParams = class="active" } # Copy properties of normal to current state, and then add a CSS class for styling CUR { ATagParams = class="selected" } } 2 { wrap = <ul><li class="dropTop"></li>|<li class="dropBottom"></li></ul> # Always unfold all sub-levels of the menu expAll = 1 # Remove the (old) default behaviour which adds onfocus="blurLink(this);" to all links noBlur = 1 # Define the normal state (not active, not selected) of menu items # Using NO=1 to activate normal state is not necessary, but useful when copying NO { # Use the page title field the title property on the A-tag, but only if the navigation title is set ATagTitle { field = title fieldRequired = nav_title } # Use the option-split feature to generate a different wrap for the last item on a level of the menu # The last item on each level gets class="last" added for CSS styling purposes. # # See the TSref documentation for details about option split and other features: # http://typo3.org/documentation/document-library/references/doc_core_tsref/current/ wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li class="last">|</li> # HTML-encode special characters according to the PHP-function htmlSpecialChars } # Copy properties of normal to active state, and then add a CSS class for styling ACT { ATagParams = class="active" } # Copy properties of normal to current state, and then add a CSS class for styling CUR { ATagParams = class="selected" } } } } #Edit Template "menu.secondlevel" on page "menu_configuration" # This menu is slightly more complicated than the others because we copy our default menu again, but then we'll start overriding some settings from the default menu. # To get a full overview of the configuration of this menu you should look at both our default 'menu' and the 'menu.secondlevel' as shown below. # You can use the TypoScript Object Browser to view the end result of this. # (go to the Template module and select 'Typoscript Object Browser' in the selectbox in the right frame.) menu.secondlevel < menu menu.secondlevel { entryLevel = 1 1 { NO { wrapItemAndSub = <li>|</li> } # First clear the ATagParams setting of the ACT state because we are working with a copy of the object 'menu' # After that we add our modified configuration for menu.secondlevel ACT { ATagParams > wrapItemAndSub = <li class="active">|</li> } CUR { ATagParams > wrapItemAndSub = <li class="selected">|</li> } } # Copy the configuration of the first level of this menu to level 2 and 3 2 < .1 3 < .1 } # Include CSS # search for page.includeCSS page.includeCSS { 5 = {$filepaths.css}example.css 5 { media = all } 6 = {$filepaths.css}grid.css 6 { media = all } 10 = {$filepaths.css}style.css 10 { media = all } 20 = {$filepaths.css}print.css 20 { media = print } } # register editable Areas # goto Rootpage -> eidt -> resources -> Typoscript Configuration mod.SHARED.colPos_list = 1,0,2,3 # enter here your backendlayout Cols # Add Footer menu # create new Folder # click on Functions -> and create the pages # goto menu_configuration -> menu.top # Copy basic menu object from TS template 'menu' so we don't have to repeat all that menu.top < menu menu.top { # Also show pages which have not-in-menu flag set in page properties includeNotInMenu = 1 # Create a menu out of the pages specifically listed under special.value special = directory special.value = 75 # !!!!change to folder Id }