SlideShare a Scribd company logo
TYPO3 Themes - Ispiring people to share design
TYPO3 Themes
Ispiring People to share designs
Cristian Buja
TYPO3 Themes - Ispiring people to share design
TYPO3 Themes - Ispiring people to share design
Themes
2013
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
TYPO3 Themes - Ispiring people to share design
Ereditarietà di “Theme Bootstrap”
Themes
Static Info Tables
Themes Gridelements
Gridelements
Themes Bootstrap
Dyncss less
Dyncss
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
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
}
}
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
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
}
}
TYPO3 Themes - Ispiring people to share design
Variabili “themes” in fluid_styled_content (TYPO3 7.6)
KayStrobachThemesDataProcessingThemesVariantsDataProcessor
KayStrobachThemesDataProcessingThemesBehaviourDataProcessor
KayStrobachThemesDataProcessingThemesResponsiveDataProcessor
KayStrobachThemesDataProcessingThemesResponsiveColumnDataProcessor
KayStrobachThemesDataProcessingThemesIconDataProcessor
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
}
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.
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
…
}
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 {
…
}
TYPO3 Themes - Ispiring people to share design
Variabili “themes” e il backend
TYPO3 Themes - Ispiring people to share design
Themes Gridelements
Configurazione “backend layout”
Configurazione “gridelements”
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
TYPO3 Themes - Ispiring people to share design
Contenuti di “themes_gridelements”
11 tipi di contenuti
contenitore
○ 2 colonne
○ 3 colonne
○ 4 colonne
○ ...
○ tabs
TYPO3 Themes - Ispiring people to share design
TYPO3 Themes - Ispiring people to share design
Theme Bootstrap
Implementazione dei templates di pagina e di contenuto
TYPO3 Themes - Ispiring people to share design
Variabili “themes” e il backend
TYPO3 Themes - Ispiring people to share design
Tema derivato “theme_bootstrap_t3conitalia”
TYPO3 Themes - Ispiring people to share design
“theme_bootstrap_t3conitalia”
TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
Extension builder per i temi ?
TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
http://bitbucket.org/interadev/theme_bootstrap_t3conitalia
TYPO3 Themes - Ispiring people to share design
Grazie !

More Related Content

Similar to Typo3 themes

Adopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayAdopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal way
Marek Sotak
 
Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)
Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)
Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)
Steffen Gebert
 
Tibco spotfire online training
Tibco spotfire online trainingTibco spotfire online training
Tibco spotfire online training
mindmajixtrainings
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
Themes
ThemesThemes
Themes
Kay Strobach
 
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Scott DeLoach
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
ultimike
 
Drool Presentation from Drupalcon2007
Drool Presentation from Drupalcon2007Drool Presentation from Drupalcon2007
Drool Presentation from Drupalcon2007
mshepherd
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
FirosK2
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
Radheshyam Kori
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming
Gaurav Mishra
 
Recommending Semantic Nearest Neighbors Using Storm and Dato
Recommending Semantic Nearest Neighbors Using Storm and DatoRecommending Semantic Nearest Neighbors Using Storm and Dato
Recommending Semantic Nearest Neighbors Using Storm and Dato
Ashok Venkatesan
 
Django introduction @ UGent
Django introduction @ UGentDjango introduction @ UGent
Django introduction @ UGent
kevinvw
 
Themes and layouts
Themes and layoutsThemes and layouts
Themes and layouts
AbhishekSRC
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Acquia
 
Drupaldojo june2010
Drupaldojo june2010Drupaldojo june2010
Drupaldojo june2010
sheenadonnelly
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Mukesh Kumar
 
ResearchSpace Collaborative Features
ResearchSpace Collaborative FeaturesResearchSpace Collaborative Features
ResearchSpace Collaborative Features
Barry Norton
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
Jake Johnson
 

Similar to Typo3 themes (20)

Adopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal wayAdopt or hack - how to hack a theme in a Drupal way
Adopt or hack - how to hack a theme in a Drupal way
 
Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)
Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)
Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10)
 
Tibco spotfire online training
Tibco spotfire online trainingTibco spotfire online training
Tibco spotfire online training
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
Themes
ThemesThemes
Themes
 
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
Cutting Edge HTML5 Design with MadCap Flare - tcworld 2017, Scott DeLoach, Cl...
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
 
Drool Presentation from Drupalcon2007
Drool Presentation from Drupalcon2007Drool Presentation from Drupalcon2007
Drool Presentation from Drupalcon2007
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming
 
Recommending Semantic Nearest Neighbors Using Storm and Dato
Recommending Semantic Nearest Neighbors Using Storm and DatoRecommending Semantic Nearest Neighbors Using Storm and Dato
Recommending Semantic Nearest Neighbors Using Storm and Dato
 
Django introduction @ UGent
Django introduction @ UGentDjango introduction @ UGent
Django introduction @ UGent
 
Themes and layouts
Themes and layoutsThemes and layouts
Themes and layouts
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
 
Drupaldojo june2010
Drupaldojo june2010Drupaldojo june2010
Drupaldojo june2010
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
ResearchSpace Collaborative Features
ResearchSpace Collaborative FeaturesResearchSpace Collaborative Features
ResearchSpace Collaborative Features
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 

Recently uploaded

2023 Ukraine Crisis Media Center Finance Balance
2023 Ukraine Crisis Media Center Finance Balance2023 Ukraine Crisis Media Center Finance Balance
2023 Ukraine Crisis Media Center Finance Balance
UkraineCrisisMediaCenter
 
一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理
一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理
一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理
eagxaf
 
一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理
一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理
一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理
gfysze
 
Gamify it until you make it Improving Agile Development and Operations with ...
Gamify it until you make it  Improving Agile Development and Operations with ...Gamify it until you make it  Improving Agile Development and Operations with ...
Gamify it until you make it Improving Agile Development and Operations with ...
Ben Linders
 
Call Girls In Bangalore 7339748667 available hotel and home full enjoy
Call Girls In Bangalore 7339748667  available hotel and home full enjoyCall Girls In Bangalore 7339748667  available hotel and home full enjoy
Call Girls In Bangalore 7339748667 available hotel and home full enjoy
akbard9823
 
AWS User Group Torino 2024 #3 - 18/06/2024
AWS User Group Torino 2024 #3 - 18/06/2024AWS User Group Torino 2024 #3 - 18/06/2024
AWS User Group Torino 2024 #3 - 18/06/2024
Guido Maria Nebiolo
 
一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理
一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理
一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理
mamekyn
 
Presentation agenda of three-day conference
Presentation agenda of three-day conferencePresentation agenda of three-day conference
Presentation agenda of three-day conference
bernadettalaurentia1
 
2023 Ukraine Crisis Media Center Financial Report
2023 Ukraine Crisis Media Center Financial Report2023 Ukraine Crisis Media Center Financial Report
2023 Ukraine Crisis Media Center Financial Report
UkraineCrisisMediaCenter
 
Bridging the visual gap between cultural heritage and digital scholarship
Bridging the visual gap between cultural heritage and digital scholarshipBridging the visual gap between cultural heritage and digital scholarship
Bridging the visual gap between cultural heritage and digital scholarship
Inesm9
 
Public Art Is (Re)connection: people, heritage and spaces
Public Art Is (Re)connection: people, heritage and spacesPublic Art Is (Re)connection: people, heritage and spaces
Public Art Is (Re)connection: people, heritage and spaces
Marta Pucciarelli
 
Genesis chapter 3 Isaiah Scudder.pptx
Genesis    chapter 3 Isaiah Scudder.pptxGenesis    chapter 3 Isaiah Scudder.pptx
Genesis chapter 3 Isaiah Scudder.pptx
FamilyWorshipCenterD
 
Cybersecurity Presentation PowerPoint!!!
Cybersecurity Presentation PowerPoint!!!Cybersecurity Presentation PowerPoint!!!
Cybersecurity Presentation PowerPoint!!!
arichardson21686
 
SASi-SPi Science Policy Lab Pre-engagement
SASi-SPi Science Policy Lab Pre-engagementSASi-SPi Science Policy Lab Pre-engagement
SASi-SPi Science Policy Lab Pre-engagement
Francois Stepman
 
Data Processing in PHP - PHPers 2024 Poznań
Data Processing in PHP - PHPers 2024 PoznańData Processing in PHP - PHPers 2024 Poznań
Data Processing in PHP - PHPers 2024 Poznań
Norbert Orzechowicz
 
一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理
一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理
一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理
vfuvxao
 
Prsentation for VIVA Welike project 1semester.pptx
Prsentation for VIVA Welike project 1semester.pptxPrsentation for VIVA Welike project 1semester.pptx
Prsentation for VIVA Welike project 1semester.pptx
prafulpawar29
 
Kalyan chart satta matka guessing result
Kalyan chart satta matka guessing resultKalyan chart satta matka guessing result
Kalyan chart satta matka guessing result
sanammadhu484
 
2023 Ukraine Crisis Media Center Annual Report
2023 Ukraine Crisis Media Center Annual Report2023 Ukraine Crisis Media Center Annual Report
2023 Ukraine Crisis Media Center Annual Report
UkraineCrisisMediaCenter
 
ACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPE
ACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPEACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPE
ACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPE
Charmi13
 

Recently uploaded (20)

2023 Ukraine Crisis Media Center Finance Balance
2023 Ukraine Crisis Media Center Finance Balance2023 Ukraine Crisis Media Center Finance Balance
2023 Ukraine Crisis Media Center Finance Balance
 
一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理
一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理
一比一原版(vancouver学位证书)加拿大温哥华岛大学毕业证如何办理
 
一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理
一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理
一比一原版(unc毕业证书)美国北卡罗来纳大学教堂山分校毕业证如何办理
 
Gamify it until you make it Improving Agile Development and Operations with ...
Gamify it until you make it  Improving Agile Development and Operations with ...Gamify it until you make it  Improving Agile Development and Operations with ...
Gamify it until you make it Improving Agile Development and Operations with ...
 
Call Girls In Bangalore 7339748667 available hotel and home full enjoy
Call Girls In Bangalore 7339748667  available hotel and home full enjoyCall Girls In Bangalore 7339748667  available hotel and home full enjoy
Call Girls In Bangalore 7339748667 available hotel and home full enjoy
 
AWS User Group Torino 2024 #3 - 18/06/2024
AWS User Group Torino 2024 #3 - 18/06/2024AWS User Group Torino 2024 #3 - 18/06/2024
AWS User Group Torino 2024 #3 - 18/06/2024
 
一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理
一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理
一比一原版昆士兰大学毕业证(UQ毕业证书)学历如何办理
 
Presentation agenda of three-day conference
Presentation agenda of three-day conferencePresentation agenda of three-day conference
Presentation agenda of three-day conference
 
2023 Ukraine Crisis Media Center Financial Report
2023 Ukraine Crisis Media Center Financial Report2023 Ukraine Crisis Media Center Financial Report
2023 Ukraine Crisis Media Center Financial Report
 
Bridging the visual gap between cultural heritage and digital scholarship
Bridging the visual gap between cultural heritage and digital scholarshipBridging the visual gap between cultural heritage and digital scholarship
Bridging the visual gap between cultural heritage and digital scholarship
 
Public Art Is (Re)connection: people, heritage and spaces
Public Art Is (Re)connection: people, heritage and spacesPublic Art Is (Re)connection: people, heritage and spaces
Public Art Is (Re)connection: people, heritage and spaces
 
Genesis chapter 3 Isaiah Scudder.pptx
Genesis    chapter 3 Isaiah Scudder.pptxGenesis    chapter 3 Isaiah Scudder.pptx
Genesis chapter 3 Isaiah Scudder.pptx
 
Cybersecurity Presentation PowerPoint!!!
Cybersecurity Presentation PowerPoint!!!Cybersecurity Presentation PowerPoint!!!
Cybersecurity Presentation PowerPoint!!!
 
SASi-SPi Science Policy Lab Pre-engagement
SASi-SPi Science Policy Lab Pre-engagementSASi-SPi Science Policy Lab Pre-engagement
SASi-SPi Science Policy Lab Pre-engagement
 
Data Processing in PHP - PHPers 2024 Poznań
Data Processing in PHP - PHPers 2024 PoznańData Processing in PHP - PHPers 2024 Poznań
Data Processing in PHP - PHPers 2024 Poznań
 
一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理
一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理
一比一原版多伦多都会大学毕业证(TMU毕业证书)学历如何办理
 
Prsentation for VIVA Welike project 1semester.pptx
Prsentation for VIVA Welike project 1semester.pptxPrsentation for VIVA Welike project 1semester.pptx
Prsentation for VIVA Welike project 1semester.pptx
 
Kalyan chart satta matka guessing result
Kalyan chart satta matka guessing resultKalyan chart satta matka guessing result
Kalyan chart satta matka guessing result
 
2023 Ukraine Crisis Media Center Annual Report
2023 Ukraine Crisis Media Center Annual Report2023 Ukraine Crisis Media Center Annual Report
2023 Ukraine Crisis Media Center Annual Report
 
ACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPE
ACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPEACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPE
ACTIVE IMPLANTABLE MEDICAL DEVICE IN EUROPE
 

Typo3 themes

  • 1. TYPO3 Themes - Ispiring people to share design TYPO3 Themes Ispiring People to share designs Cristian Buja
  • 2. TYPO3 Themes - Ispiring people to share design
  • 3. TYPO3 Themes - Ispiring people to share design Themes 2013
  • 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. TYPO3 Themes - Ispiring people to share design Ereditarietà di “Theme Bootstrap” Themes Static Info Tables Themes Gridelements Gridelements Themes Bootstrap Dyncss less Dyncss
  • 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. 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. 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. 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. TYPO3 Themes - Ispiring people to share design Variabili “themes” in fluid_styled_content (TYPO3 7.6) KayStrobachThemesDataProcessingThemesVariantsDataProcessor KayStrobachThemesDataProcessingThemesBehaviourDataProcessor KayStrobachThemesDataProcessingThemesResponsiveDataProcessor KayStrobachThemesDataProcessingThemesResponsiveColumnDataProcessor KayStrobachThemesDataProcessingThemesIconDataProcessor
  • 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. 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. 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. 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. TYPO3 Themes - Ispiring people to share design Variabili “themes” e il backend
  • 16. TYPO3 Themes - Ispiring people to share design Themes Gridelements Configurazione “backend layout” Configurazione “gridelements”
  • 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. TYPO3 Themes - Ispiring people to share design Contenuti di “themes_gridelements” 11 tipi di contenuti contenitore ○ 2 colonne ○ 3 colonne ○ 4 colonne ○ ... ○ tabs
  • 19. TYPO3 Themes - Ispiring people to share design
  • 20. TYPO3 Themes - Ispiring people to share design Theme Bootstrap Implementazione dei templates di pagina e di contenuto
  • 21. TYPO3 Themes - Ispiring people to share design Variabili “themes” e il backend
  • 22. TYPO3 Themes - Ispiring people to share design Tema derivato “theme_bootstrap_t3conitalia”
  • 23. TYPO3 Themes - Ispiring people to share design “theme_bootstrap_t3conitalia”
  • 24. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm” Extension builder per i temi ?
  • 25. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm”
  • 26. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm”
  • 27. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm”
  • 28. TYPO3 Themes - Ispiring people to share design Fluid Templates Manager “ftm” http://bitbucket.org/interadev/theme_bootstrap_t3conitalia
  • 29. TYPO3 Themes - Ispiring people to share design Grazie !