Presentación realizada en las Jornadas de Odoo (OpenERP) 2015 celebradas en Madrid sobre como desarrollar nuestros propios temas web para Odoo. Buenas prácticas y consejos para conseguirlo. Ejemplo práctico sobre un tema real basado en Bootstrap.

1. Diseño y creación de un tema
Bootstrap para Odoo
Jorge Camacho
jorge@trey.es
@jorgecamachoher

2. @treytux
Diseño y creación de un tema
Bootstrap para Odoo
Características
Bootstrap
CSS, LESS/SASS
jQuery, jQuery UI, Underscore
XML + QWeb
Responsive
1/8

3. @treytux
Diseño y creación de un tema
Bootstrap para Odoo
Estructura de una página
Header y Footer (comúnes)
Main (específica)
Edición
WYSIWYG
Snippets/Bloques (arrastrar y soltar)
2/8

4. @treytux
Creación del Módulo
Estructura de Ficheros
__init__.py
__openerp__.py
/views
/views/assets.xml
/views/snippets.xml
/static
/static/src/css/styles.css
/static/src/js/scripts.js
3/8

5. @treytux
Creación del Módulo
__openerp__.py
'category': 'Themes/Miscellaneous',
'depends': [
'website',
'website_less',
],
'installable': True,
'application': True,
4/8

6. @treytux
Inserción de estilos y javascript
Herencia de Plantillas
Expresiones XPath
Dónde incluir los archivos
Directiva QWeb t-call-assets para Optimización
5/8

7. @treytux
Crear una página desde el tema
6/8
Definir la plantilla
<template name="Work page" id="website.work" page="True">
Añadir al menú
<record id="work_page_link" model="website.menu">
Cuidado con las actualizaciones
<data noupdate="1">

8. @treytux
Crear un Snippet
7/8
Añadir al menú de edición
<template id="snippets" inherit_id="website.snippets">
<xpath expr="//*[@id='snippet_structure']/div[1]" position="before">
Asignar una miniatura
<div class="oe_snippet_thumbnail">
Asignar el HTML
<section class="oe_snippet_body">

9. @treytux
Referencias
8/8
Theme Tutorial
odoo.com/documentation/8.0/howtos/themes.html
Stanley Bootstrap Theme
Carlos Alvarez (alvarez.is) at BlackTie (www.blacktie.co)
bootstrapzero.com/bootstrap-template/stanley

10. GRACIAS
Jorge Camacho
jorge@trey.es
@jorgecamachoher
Trey, Kilobytes de Soluciones
info@trey.es
@treytux