SlideShare una empresa de Scribd logo
1 de 41
Descargar para leer sin conexión
Themes in TYPO3?!
let’s talk about standards
for storing layouts, make my work
reusable.

I want to be part of the
TYPO3 community.
Getting started
Let’s make a website!

I want to showcase XY it’s great!
Getting started
Best practices?

Is there
anything i can base my
theme on?
Getting started
ExtBase

TypoScript

FLUID

CSS

HTML
Getting started

???
Other CMS Systems are extremely successful by
providing easy to use themes.
These themes are easy extendable and adoptable to
the special needs of each single installation.
Wordpress
Drupal
TYPO3?
Getting started
But I want to use
TYPO3 CMS now and NEOS in the future,
because i like the structured interfaces!
Themes in the history
of TYPO3 CMS
EXT: static_templates
FC Bigfeet
EXT: templavoila_framework
EXT: t3designkit
What can i use today?
I’d like to use a
framework like
Bootstrap or
Foundation!

We have FLUID,
TYPOScript, TSConfig!

How to
package these?
EXT:THEMES
The Integrator / Developer
How can i reuse my
work?

Why not using
extension CGL for
themes?
The Integrator / Developer
Costs

Customers

Quality

Standards

Inventions
Design goals for THEMES?
High success rate

Prepared for version
control (git, svn, …)

Provide solutions for
typical layouts

Use best practices

Useable with Bootstrap,
Foundation, Yaml, …

Store themes in
Extensions

Easy maintainable by
replacing some files

Flexible

Configurable with
constants

Exchangeable between
TYPO3 installations

Use existing stuff where
ever possible

Easy to use
TYPO3 with THEMES!
TYPO3!
Theme Registration
Theme registers
in theme
repository

theme can be
selected in
sys_template

TypoScript, Constants
and PageTS get
included
Theme Rendering
Sys-Template with selected theme from EXT:THEMES
news, dialog, fluidcontent, ...

Static
Templates

Hook, to include TypoScript

PageTS

Hook to include PageTS

BE

FE

Extension
Templates

Data provider for be_layouts
TYPO3!
[WIP]

theme file structure
file structure
directory structure based on
extbase and NEOS
some additional files
Collecting data about a theme

is done from ext_emconf.php
additional information is collected like in NEOS with a file
called ext:theme_name/Meta/Theme.yaml
Structuring content
fluidcontent

gridelements

NEOS cce

dce

templavoila
fluidcontent

dce

gridelements

NEOS cce

templavoila
Gridelements
Gridelements
Gridelements
Roadmap
Current state
TYPO3 CMS 6.2 has a hook to inject PageTSConfig
TYPO3 CMS 6.2 LTS supports be_layout dataprovider
gridelements can parse TSConfig for be_layouts
Vagrant maschine with EXT:THEMES is available on github
Theme vault is an early prototype
What’s planned shortterm
During Sprints refine the base packages for bootstrap and other
libraries using EXT:gridelements
Add a backend module to EXT:THEMES which allows easy
configuration
Rebuild the vagrant machine, setup demo site, use distributions
Publish base themes in the TYPO3 Extension Repository
Near TYPO3 6.2 Release release a namespaced XCLass free version
What’s planned next year
Build a theme vault or create a cooperation with an existing
one like theme forest
crowd found some new features of EXT:gridelements
base packages
Get in touch
Contact us via Twitter
@bunnyfield		 	 	 	 @kaystrobach
Contact via Bugtracker
https://github.com/typo3-themes
http://forge.typo3.org/projects/show/extensiongridelements2

Más contenido relacionado

Similar a Themes

Developing sites with Magnolia 4 / STK
Developing sites with Magnolia 4 / STKDeveloping sites with Magnolia 4 / STK
Developing sites with Magnolia 4 / STKguest0afb3
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Anne Tomasevich
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
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 wayMarek Sotak
 
Bootstrap Framework and Drupal
Bootstrap Framework and DrupalBootstrap Framework and Drupal
Bootstrap Framework and DrupalJim Birch
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend developmentsparkfabrik
 
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012Rene Bakx
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAPJeanie Arnoco
 
CustomizingStyleSheetsForHTMLOutputs
CustomizingStyleSheetsForHTMLOutputsCustomizingStyleSheetsForHTMLOutputs
CustomizingStyleSheetsForHTMLOutputsSuite Solutions
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkOmkarsoft Bangalore
 
Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To DrupalLauren Roth
 
Creating and Theming Custom Content Types
Creating and Theming Custom Content TypesCreating and Theming Custom Content Types
Creating and Theming Custom Content Typesheatherrumd
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersBonnie Vasko
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersBonnie Vasko
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersBonnie Vasko
 

Similar a Themes (20)

Developing sites with Magnolia 4 / STK
Developing sites with Magnolia 4 / STKDeveloping sites with Magnolia 4 / STK
Developing sites with Magnolia 4 / STK
 
German upload
German uploadGerman upload
German upload
 
Themes #T3DD13
Themes #T3DD13Themes #T3DD13
Themes #T3DD13
 
Drupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating ModulesDrupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating Modules
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
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
 
Bootstrap Framework and Drupal
Bootstrap Framework and DrupalBootstrap Framework and Drupal
Bootstrap Framework and Drupal
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
 
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
 
Intro to OctoberCMS
Intro to OctoberCMSIntro to OctoberCMS
Intro to OctoberCMS
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
CustomizingStyleSheetsForHTMLOutputs
CustomizingStyleSheetsForHTMLOutputsCustomizingStyleSheetsForHTMLOutputs
CustomizingStyleSheetsForHTMLOutputs
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
 
Drupal
DrupalDrupal
Drupal
 
Creating and Theming Custom Content Types
Creating and Theming Custom Content TypesCreating and Theming Custom Content Types
Creating and Theming Custom Content Types
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for Beginners
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for Beginners
 
Wordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for BeginnersWordcamp 2010 Themes for Beginners
Wordcamp 2010 Themes for Beginners
 

Último

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 

Último (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

Themes