.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ======================== EXT: Responsive Template ======================== :Author: Christopher :Created: 2010-12-18T19:57:23 :Changed: 2013-08-24T12:21:29 :Classification: responsive_template :Description: The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ---- :Keywords: responsive, template, forAdmins, forIntermediates :Author: Klaus Heuer :Email: klaus.heuer@t3-developer.com :Language: en .. _img-1-img-2-responsive-template: |img-1| |img-2| responsive\_template ==================================== Extension Key: responsive\_template Language: en Version: 1.0.5 Keywords: responsive, template, forAdmins, forIntermediates Copyright 2006-2013, Klaus Heuer, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- **`responsive\_template 1 <#__RefHeading__5708_1738894311>`_** **`Introduction 3 <#__RefHeading__5710_1738894311>`_** `What does it do? 3 <#__RefHeading__463_413120346>`_ `Screenshots 3 <#__RefHeading__465_413120346>`_ **`Installation 4 <#__RefHeading__31507_818911409>`_** **`UPDATE Instructions 6 <#__RefHeading__420_1863646183>`_** **`FAQ 7 <#__RefHeading__31511_818911409>`_** **`Further development 8 <#__RefHeading__477_413120346>`_** **`ChangeLog 9 <#__RefHeading__31623_818911409>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ Responsive Template is an extension which delivers a complete template in a responsive web design layout. It is easy to install and comes with a couple of useful features: - **One click to install** , import Extension and add static file – thats all - **Four different template** layouts (1- , 2- and 3 cols Layouts) including backend layouts, templates are based on fluid. - A **Responsive Slider** plugin with complete backend modul. - Option for **second/third Website Language** incl. language menu (one tree fits all) - [NEW] Option for **second Menue in left / right Col** - [NEW] Option for **Footer Page** - No further Extensions necessary - Works optional with realUrl If you update the extension please read the chapter update Instructions! .. _Screenshots: Screenshots ^^^^^^^^^^^ Frontend and Backend Example |img-3| |img-4| You can find a live sample here: http://www.responsive-design.t3-developer.com/ .. _Installation: Installation ------------ - Import an activate the Extension via the Extension Manager. - Create a Page Template and include static (from extension) the ***CSS styled content*** and the ***responsive Template*** - Import of the Backend Layouts (new since version 1.0.5):Go to the Extension Manager and choose the responsive design Extension.Klick on “Excecute the Update Script” (The green round arrow sign in 6.1).You will asked for the pid of your template and then run the script. The backendlayouts are now imported on the template pid. - Set your personal page stuff in the template constant editor “responsive template” .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Choose-a-Page-Template-1-2-or-3-cols: Choose a Page Template (1-, 2- or 3-cols) """"""""""""""""""""""""""""""""""""""""" Go to the “page edit” view and chose the Appearance Tab. Chose your layout in the select box “Page Layout”. The Backend shows the needed cols of the template, the frontend template will be automaticly set. .. _The-Footer: The Footer """""""""" Create a page in your Page Tree and set it to “hide in menu”. Choose the 3-col-template. Add the pid in the extension-constants “Pid of the Page you use as footer”. You can now fill the left, center and right Col on this page with footer content. The “Top” row in the page layout is not rendered in the footer section! .. _The-responsive-Slider: The responsive Slider """"""""""""""""""""" Create a folder in your Page Tree and add the pid in the template constants.In the section “Web” you find the new entry “Slider”. Add first a slider and than upload the images. You can use the slider with images or images with additional text. If you fill out the “headline” field, headline and text is on a transparent black background area above the image. Go to the page where slider should be included an add a new content element “plugin”. Chose “responsive slider”. After page reload you can select your slider in the plugin tab. Sliders are possible in all cols! .. _Language-Support: Language Support """""""""""""""" The extension is ready for a second or third webside language.Add on the root page of your installation the **additional** language records. There is no need for adding the base language there. Note the uids of your language records (normally “1” and “2”) Choose your template → Constant Edit and activate the language support. Fill out all needed fileds in the constants. After cache clearing you should see a new language menu on top of the page. The html codings for both languages are automaticly set. The slider script is based on the orbit-slider which is under the Creative Commons Attribution-ShareAlike 3.0 License. Feel free to use this extension for personal, non-profit or profit pages. Do what you want ;) If you have questions, proposals for further versions, or a build a great side with this extension, please send me a mail at: `klaus.heuer@t3-developer.com `_ . There is also a git page which the last version: https://github.com/klaus-ger/responsive\_template .. _UPDATE-Instructions: UPDATE Instructions ------------------- **Note:** *If you update from a further version of the responsive\_template please consider, that all changes you have done in the extension folder will lost!The Extension have now the option to work with a page as footer content.* **Instructions:** • Update the Extension via the Extensionmanager or replace the EXT with the Files from GitHub. • Klick on “Execute the Update Script” in the Extensionmanager, line responsive\_template(The green round arrow sign in 6.1). • Check your constants in the Constants Editor (responsive\_template) • **NEW** in this Version: You can add a page as “ **footer content** ”.Add a page in your root tree an set it ti “hide in menu”Add the pid of this page in the Constants “Pid of the Page you use as footer”You can now fill the left, center and right col of this page. This content will displayedin all pagefooters. • **NEW** in this Version: **2 col Layout – sidebar left** There is a new Pagelayout “2-col sidebar left”. In mobil view the sidebar is renderedafter the content. • **NEW** in this Version: **Second Menu Option** In the constants you can now turn on a second Menu Option for the left- and right Col.The Second Menu will displays on all two-col Layouts on top of the sidebar. • **NEW** in this Version: General **Meta Tags** You can add some meta tags in the constants.These tags will be rendered additionalto the meta tags you placed on the single pages. .. _FAQ: FAQ --- The extensions works with TYPO3 4.7 and 6.1. With 6.0 you will have some problems because extension-update-scripts are not supported. If have question please fee free to contact me klaus.heuer@t3-developer.com .. _Further-development: Further development ------------------- This will be the last version which works with TYPO3 4.7! ***The problem with image sizes:*** And the moment the images were resized on the respected view, but in fact, the system delivers the original file size. This is a unnecessary page load on mobil devices. Therefore the further development is concentrated on this topic. The plan is to integrate a lazy plugin, that means first load the page (without images) and then load the images in the needed file-size depending on the device. There will be an new backend file uploader, which resize the images automaticly in different sizes for the different views. For example, if you upload a new image to the fileadmin folder with a 900px width, the system will resize the image to 360px width and 600px width and store all 3 versions. The lazy plugin is than able to deliver the respected image size to the mobil browser. You can find the last development on GitHub: `https://github.com /klaus-ger/responsive\_template `_ If you have questions or proposels for further features, drop me a note to `klaus.heuer@t3-developer.com `_ In the last months I have seen a lot of great results with this extensions – thanks for sharing. August 2013, Klaus .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-9-1: 0.9.1 ^^^^^ .. container:: table-row Version 0.9.1 Changes First release. .. _1-1-1: 1.1.1 ^^^^^ .. container:: table-row Version 1.1.1 Changes \- The slider recognized now viewport changes- A sample mobil menu is now added (see also project site)- smaller Bug fixes .. _1-1-2: 1.1.2 ^^^^^ .. container:: table-row Version 1.1.2 Changes \- Add new page layout, sidebar left- Add Option for second menu \- Add Option for third website languag .. ###### END~OF~TABLE ###### .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 44 .. :id: graphics5 .. :name: graphics5 .. :vspace: 57 .. :width: 161 .. |img-2| image:: img-2.png .. :align: left .. |img-3| image:: img-3.png .. :align: left .. :border: 1 .. :height: 233 .. :id: Grafik1 .. :name: Grafik1 .. :width: 252 .. |img-4| image:: img-4.png .. :align: left .. :border: 1 .. :height: 178 .. :id: Grafik2 .. :name: Grafik2 .. :width: 276