Theming
en
@rlujano
Sobre mi:
Rene Lujano
rlujano13l@gmail.com
@rlujano_pe
¿De que hablaremos?
Pre requisitos
Conceptos de theming
Componentes del tema
... Crearemos nuestro tema
Pre-requisitos para su aventura en
HTML
Theming
CSS
Drupal básico
Alguna idea de PHP
¿Que es un tema?
Opciones para Theming
Temas del core
Otros temas
Contribuidos
De pago
Temas desde cero (Trabajo duro)
Sub-tema (Sub-theme)
Temas del core
Bartik (tema por defecto)
Stark
Seven (tema de administración)
Garland
Los temas del core viven en: tudrupal/core/themes/
Temas contribuidos
Bartik
Omega
Bootstrap
Zurb foundation
https://www.drupal.org/project/project_theme
Los temas contribuidos viven en: tudrupal/themes/
¿Sub tema?
Selecciona un tema base.
Elimina elementos que no te gusten.
Agrega código PHP, HTML, CSS o JS.
¡Never hack a core theme!
¿Que contiene un
Tema o Sub tema?
Manifest (.info.yml)
Templates (.html.twig)
Styles (.css)
Javascript (.js)
Manifest:nombre_de_tu_tema.info.yml
Descripción
Requerimientos
Estilos
Regiones
Scripts
name: Bartik
type: theme
base theme: classy
description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'
package: Core
version: VERSION
core: 8.x
libraries:
- bartik/global-styling
ckeditor_stylesheets:
- css/base/elements.css
- css/components/captions.css
- css/components/table.css
- css/components/text-formatted.css
regions:
header: Header
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
page_bottom: 'Page bottom'
highlighted: Highlighted
featured_top: 'Featured top'
breadcrumb: Breadcrumb
content: Content
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
featured_bottom_first: 'Featured bottom first'
featured_bottom_second: 'Featured bottom second'
featured_bottom_third: 'Featured bottom third'
footer_first: 'Footer first'
footer_second: 'Footer second'
footer_third: 'Footer third'
footer_fourth: 'Footer fourth'
footer_fifth: 'Footer fifth'Regiones
;REGIONES
regions[header] = Header
regions[help] = Help
regions[highlighted] = Highlighted
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[footer] = Footer
Templates
<div class="row">
{{ fields.field_important_image.content }}
</div>CSS y Javascript
Podemos agregar el codigo CSS y javascript que deseemos, librerias externas y demás
¿Ahora que sigue?
¡Construyamos nuestro Sub-tema!
¿Preguntas?
Gracias!
Rene Lujano
rlujano13l@gmail.com
@rlujano_pe
