Tras toda la preparación que realizamos durante el día de ayer. El primer día sirve como toma de contacto con la herramienta. En realidad lo que vamos a hacer va a ser lo siguiente:

1. Aplicar una template css en concreto «CoolWater theme». descarga y colocarla en la carpeta web/themeCoolWater.
2. Preparar la aplicación para que muestre la css introducida e incluya las vistas.
3. Para ello modificaremos apps/front/config/dm/config.yml. Lo dejaremos como a continuación:

# apps/front/config/dm/config.yml
all:

theming:                 # the theming component
themes:                  # list of themes
coolwater:               # theme key
name:      Cool Water    # theme name; defaults to the theme key
dir:       themeCoolWater# the directory in the web dir that holds the theme files
enabled:   true      # whether the theme is enabled for use with the dmThemeManager

html:
doctype:
name:      html  # Doctype name ( 'html', 'xhtml' )
version:  5      # Doctype xhtml version ( '1.0', '1.1' ) or html version ( '4', '5' )
compliance: transitional# Doctype xhtml compliance ( 'strict', 'transitional' )

4-. Modificaremos apps/front/config/view.yml como sigue:

# apps/front/config/view.yml
default:

http_metas:
content-type: text/html

stylesheets:
- layout
- typography

javascripts:     # we don't need any JS right now

has_layout:      true
layout:          layout

5-. Modificaremos la parte vista (apps/front/modules/dmFront/templates/pageSuccess.php) – Problema. A mi no me salía correctamente y symfony me lanzaba un error así que como de lo que se trata es de eliminar una columna simplemente la eliminé del archivo original sin copiar todo el código del tutorial.

Cambiamos esto:

>  


    renderArea('layout.top', '.clearfix') ?>  


      renderArea('layout.left') ?>
      renderArea('page.content') ?>
      renderArea('layout.right') ?>


    renderArea('layout.bottom', '.clearfix') ?>

Por esto:

>  


    renderArea('layout.top', '.clearfix') ?>  


      renderArea('page.content') ?>
      renderArea('layout.right') ?>


    renderArea('layout.bottom', '.clearfix') ?>

Ahora podemos ver desde el frontend una especie de administración visual y jugando con el header y el footer podremos crear la estructura de la home. Los únicos archivos que vamos a modificar van a ser: apps/front/modules/main/templates/_header.php y apps/font/modules/main/templates/_footer.php:

Header:

echo _tag('h1.t_site', _link('@homepage')->text('diem ipsum'));
echo _tag('p.t_baseline', __('meet Diem step by step'));

En este punto es interesante ver como la primera línea de código introducido lanza:

diem ipsum

Eso quiere decir que en realidad cuando incluimos h1.t_site le estamos dando la clase t_site de nuestro css. Así que los maquetadores web ya saben que hacer y dónde buscar los cambios.

Footer:

  diem ipsum
| Diem Project |
 website template
by styleshout

Y este es el resultado:

Realmente es muy sencillo solo hay que seguir estos pasos.

En poco más de media hora entre que se buscan los archivos y se sustituyen se puede tener ya la primera vista personalizada. A ver qué tal van los siguientes avances…

Segundo día >>