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:
- Aplicar una template css en concreto “CoolWater theme”. descarga y colocarla en la carpeta web/themeCoolWater.
- Preparar la aplicación para que muestre la css introducida e incluya las vistas.
- 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:
<!-- apps/front/modules/dmFront/templates/pageSuccess.php -->
<div id="dm_page">
>
<div class="dm_layout">
renderArea('layout.top', '.clearfix') ?>
<div class="dm_layout_center clearfix">
renderArea('layout.left') ?>
renderArea('page.content') ?>
renderArea('layout.right') ?></div>
renderArea('layout.bottom', '.clearfix') ?></div>
</div>Por esto:
<!-- apps/front/modules/dmFront/templates/pageSuccess.php -->
<div id="dm_page">
>
<div class="dm_layout">
renderArea('layout.top', '.clearfix') ?>
<div class="dm_layout_center clearfix">
renderArea('page.content') ?>
renderArea('layout.right') ?></div>
renderArea('layout.bottom', '.clearfix') ?></div>
</div>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:
<h1 class="t_site"><a class="link" href="/">diem ipsum</a></h1>
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 <a href="http://www.styleshout.com/">styleshout</a>
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…