Drupal theming
Download
1 / 32

Drupal Theming - PowerPoint PPT Presentation


  • 126 Views
  • Uploaded on

Drupal Theming. [email protected] Themes. Control del diseño HTML, CSS, imágenes, Javascript, etc. Drupal “Theming”. Apariencia : Photoshop, Illustrator, Fireworks, etc. Hojas de estilo (CSS) Adaptar HTML generado por drupal. 3 pasos. Info Files (.info) Template Files (.tpl.php)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Drupal Theming' - hachi


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Themes
Themes

  • Control del diseño

  • HTML, CSS, imágenes, Javascript, etc.


Drupal theming1
Drupal “Theming”

  • Apariencia : Photoshop, Illustrator, Fireworks, etc.

  • Hojas de estilo (CSS)

  • Adaptar HTML generado por drupal


3 pasos
3 pasos

  • Info Files (.info)

  • Template Files (.tpl.php)

  • Adaptar funciones



Estructura theme1
Estructura Theme

  • 1. Info File

  • 2. Template Files .tlp.php

  • 3. Funciones y variables.


Primer paso info file
Primer Paso: .Info File

  • Nombre y descripción

  • Screenshot ó imagen

  • Core (Versión Drupal)

  • CSS

  • Regiones

  • Features “Características”


Nombre y descripci n
Nombre y descripción

  • name = Drupal México

  • description = Theme elaborado en el taller de Drupal


Screenshot
Screenshot

  • screenshot = images/screenshot.png


Core

  • core = 6.x

  • base theme = zen


CSS

  • stylesheets[all][] = styles.css


Definir regiones
Definir Regiones

  • regions[left] = left sidebar

  • regions[right] = right sidebar

  • regions[navbar] = navigation bar

  • regions[content_top] = content top

  • regions[header] = header

  • regions[footer] = footer


Caracter sticas
Características

  • features[] = logo

  • features[] = name

  • features[] = slogan


2 paso template files tpl php
2 paso : Template Files (.tpl.php)

  • Existen 5 templates básicos

  • Page.tpl.php

  • block.tpl.php

  • node.tpl.php

  • box.tpl.php

  • comment.tpl.php


Templates b sicos
Templates Básicos

  • Page.tpl.php


Templates b sicos1
Templates Básicos

  • block.tpl.php


Templates b sicos2
Templates Básicos

  • node.tpl.php


Templates b sicos3
Templates Básicos

  • box.tpl.php


Templates b sicos4
Templates Básicos

  • comment.tpl.php


Templates din micos
Templates dinámicos

  • Duplicar node.tpl.php

  • Reenombrar node-nodetype.tpl.php

node-blog.tpl.php


Templates din micos1
Templates dinámicos

Front disponible en Drupal 6.-x



Templates din micos3
Templates dinámicos

Importante! Copiar desde el Core al Theme



3 paso funciones
3 Paso: Funciones

  • template.tpl.php

  • Consultar API Drupal

  • http://api.drupal.org



Que demonios es zen
¿Que demonios es Zen?

  • Theme Framework

  • http://drupal.org/project/zen


Zen garden
Zen Garden

  • http://www.csszengarden.com/


960 gs
960.gs

  • CSS Framework

  • Basado en grid de 12 y 16 columnas


960 gs clases css
960.gs Clases CSS

  • container

  • grid

  • prefix

  • suffix

  • alpha

  • omega


960 gs ejemplos
960.gs ejemplos

  • <div id="page" class="container-16 clear-block">

  • CONTENIDO

  • </div>


960 gs1
960.gs

  • Area disponible 940 px

  • Padding 10 px por lado


ad