diff --git a/doc/howtos/themes.rst b/doc/howtos/themes.rst index 2c6eef2d405..dbc59f6392d 100644 --- a/doc/howtos/themes.rst +++ b/doc/howtos/themes.rst @@ -30,7 +30,7 @@ with the structure: |-- pages.xml `-- snippets.xml -``static/styles`` contains your stylesheet(s), ``views`` contains the various +``static/style`` contains your stylesheet(s), ``views`` contains the various XML files describing the theme and theme features to Odoo. Static Page @@ -51,7 +51,12 @@ copy paste the lines:: -Refresh the page and feel the hit. +Comment the lines about ``options.xml`` and ``pages.xml`` in ``__openerp__.py``. + +Run the server and update the theme (``./odoo.py -u dummy_theme``), then +install the theme in the settings menu. + +Go to ``http://localhost:8069/page/hello`` feel the hit. Editing content on a page ''''''''''''''''''''''''' @@ -104,14 +109,25 @@ modify these lines as below: .. code-block:: css - .h1 { + h1 { color: #215487; } - .span { + span { border: 2px solid black; background-color: #eee; } +Compile your file (http://lesscss.org/usage/#command-line-usage) to get the +``custom.css`` file. + +Add this asset to your template in ``page.xml``:: + + + Refresh the page and feel the hit. Get the most of the dom @@ -267,9 +283,9 @@ Adding images to your snippet You can easely add images in your snippets simply by setting up css backgrounds images. -In ``odoo/addons/theme_dummy/static/`` create a new folder and name it -``img``. Put your images there, in sub-folders if needed. Open -:file:`odoo/addons/theme_dummy/static/style/custom.less`, add these lines +Put your images in ``odoo/addons/theme_dummy/static/img``, or in sub-folders +if needed. Open :file:`odoo/addons/theme_dummy/static/style/custom.less`, add +these lines .. code-block:: css @@ -279,28 +295,20 @@ In ``odoo/addons/theme_dummy/static/`` create a new folder and name it @img-02: url("../img/img-girl.png"); .dummy-girl { background-image: @img-02; } +Add also the ``width`` and the ``height`` css attributes to theses new classes. + In :file:`odoo/addons/theme_dummy/views/pages.xml` change the correspondant lines as below:: -
-
-
- -
-

BLUE it!

-
-
-
-
-

GREEN THAT!

-
-
-
-
-
-
+
+
+

A great Title, prmize

+

And a great subtilte too

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+
+
+
+
Your new snippet is now ready to use. Just drag and drop it on your page to see it in action. @@ -329,9 +337,12 @@ Explain xpath .. TODO:: syntax not correct (see website examples) -Your option menu is now correctly set in the database, you can create an new dropdown menu. +Your option menu is now correctly set in the database, you can create an new +dropdown menu. + +Let's say yout want three options which will change the text color and the +background. -Let's say yout want three options which will change the text color and the background. In option.xml, add these lines inside the xpath::
  • YOUR OPTION 1