Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typo3 themes

383 views

Published on

Ispiring people to share designs

  • Be the first to comment

  • Be the first to like this

Typo3 themes

  1. 1. TYPO3 Themes - Ispiring people to share design TYPO3 Themes Ispiring People to share designs Cristian Buja
  2. 2. TYPO3 Themes - Ispiring people to share design
  3. 3. TYPO3 Themes - Ispiring people to share design Themes 2013
  4. 4. TYPO3 Themes - Ispiring people to share design Dipendenze di “Theme Bootstrap” (required extensions) Themes Bootstrap Themes Gridelements Gridelements Themes Static Info Tables Dyncss less Dyncss
  5. 5. TYPO3 Themes - Ispiring people to share design Ereditarietà di “Theme Bootstrap” Themes Static Info Tables Themes Gridelements Gridelements Themes Bootstrap Dyncss less Dyncss
  6. 6. TYPO3 Themes - Ispiring people to share design Themes Creare l’oggetto PAGE Configurazione TypoScript automatica delle lingue Inclusione automatica di TSConfig, TypoScript Campi aggiuntivi (icone, behaviour, responsive, variants) Costanti TypoScript editabili dal modulo backend anche per non Admin
  7. 7. TYPO3 Themes - Ispiring people to share design Templates “themes” page = PAGE page { typeNum = 0 100 = USER 100 { userFunc = TYPO3CMSExtbaseCoreBootstrap->run ... settings =< plugin.tx_themes.settings persistence =< plugin.tx_themes.persistence view =< plugin.tx_themes.view } }
  8. 8. TYPO3 Themes - Ispiring people to share design Variabili “themes” in css_styled_content (TYPO3 6.2) KayStrobachThemesFrontendCssClassMapper->mapGenericToFramework responsiveMapping =< lib.content.cssMap.responsive responsiveRowMapping =< lib.content.cssMap.responsive.row responsiveColumnMapping =< lib.content.cssMap.responsive.column behaviourMapping =< lib.content.cssMap.behaviour specialBehaviourMapping =< lib.content.cssMap.behaviour.<element> variantMapping =< lib.content.cssMap.variants iconMapping =< lib.icons.cssMap
  9. 9. TYPO3 Themes - Ispiring people to share design Variabili “themes” in css_styled_content (TYPO3 6.2) ES: tt_content.stdWrap.innerWrap.cObject.default.20 (COA) 40 = TEXT 40 { dataWrap = {field:tx_themes_responsive},{field:tx_themes_behaviour},{field:tx_themes_variants} postUserFunc = KayStrobachThemesFrontendCssClassMapper->mapGenericToFramework postUserFunc { responsiveMapping =< lib.content.cssMap.responsive behaviourMapping =< lib.content.cssMap.behaviour variantMapping =< lib.content.cssMap.variants } }
  10. 10. TYPO3 Themes - Ispiring people to share design Variabili “themes” in fluid_styled_content (TYPO3 7.6) KayStrobachThemesDataProcessingThemesVariantsDataProcessor KayStrobachThemesDataProcessingThemesBehaviourDataProcessor KayStrobachThemesDataProcessingThemesResponsiveDataProcessor KayStrobachThemesDataProcessingThemesResponsiveColumnDataProcessor KayStrobachThemesDataProcessingThemesIconDataProcessor
  11. 11. TYPO3 Themes - Ispiring people to share design Variabili “themes” in fluid_styled_content (TYPO3 7.6) ES: tt_content.stdWrap.innerWrap.<element> (FLUIDTEMPLATE) dataProcessing { 30 = KayStrobachThemesDataProcessingThemesVariantsDataProcessor 40 = KayStrobachThemesDataProcessingThemesBehaviourDataProcessor 50 = KayStrobachThemesDataProcessingThemesResponsiveDataProcessor 60 = KayStrobachThemesDataProcessingThemesIconDataProcessor }
  12. 12. TYPO3 Themes - Ispiring people to share design Variabili “themes” in fluid_styled_content (TYPO3 7.6) Fluid styled content non è ancora completamente supportata, occorre quindi implementare i layouts,templates e partials.
  13. 13. TYPO3 Themes - Ispiring people to share design Variabili “themes” e il mapping CSS lib.content.cssMap.responsive { ... medium-default = medium-hidden = hidden- md ... } … lib.icons.cssMap { … alert = glyphicon glyphicon- alert … }
  14. 14. TYPO3 Themes - Ispiring people to share design Variabili “themes” e il backend themes.content.responsive.default { ... medium.visibility { default = LLL:EXT:theme_bootstrap/... hidden = LLL:EXT:theme_bootstrap/… } ... } TCEFORM.tt_content.tx_themes_icon.addItems { … }
  15. 15. TYPO3 Themes - Ispiring people to share design Variabili “themes” e il backend
  16. 16. TYPO3 Themes - Ispiring people to share design Themes Gridelements Configurazione “backend layout” Configurazione “gridelements”
  17. 17. TYPO3 Themes - Ispiring people to share design Layout di pagina “themes_gridelements” 14 layouts con 4 aree di contenuto content colPos = 0 menu colPos = 1 sidebar colPos = 2 feature colPos = 3
  18. 18. TYPO3 Themes - Ispiring people to share design Contenuti di “themes_gridelements” 11 tipi di contenuti contenitore ○ 2 colonne ○ 3 colonne ○ 4 colonne ○ ... ○ tabs
  19. 19. TYPO3 Themes - Ispiring people to share design
  20. 20. TYPO3 Themes - Ispiring people to share design Theme Bootstrap Implementazione dei templates di pagina e di contenuto
  21. 21. TYPO3 Themes - Ispiring people to share design Variabili “themes” e il backend
  22. 22. TYPO3 Themes - Ispiring people to share design Tema derivato “theme_bootstrap_t3conitalia”
  23. 23. TYPO3 Themes - Ispiring people to share design “theme_bootstrap_t3conitalia”
  24. 24. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm” Extension builder per i temi ?
  25. 25. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm”
  26. 26. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm”
  27. 27. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm”
  28. 28. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm” http://bitbucket.org/interadev/theme_bootstrap_t3conitalia
  29. 29. TYPO3 Themes - Ispiring people to share design Grazie !

×