[IMP] Update themes.rst
Attempt to fix and clarify the guide. I still can not get "Advanced Customization" to work. closes ##4291
This commit is contained in:
parent
ec25207b8f
commit
c5929c3f16
|
@ -30,7 +30,7 @@ with the structure:
|
||||||
|-- pages.xml
|
|-- pages.xml
|
||||||
`-- snippets.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.
|
XML files describing the theme and theme features to Odoo.
|
||||||
|
|
||||||
Static Page
|
Static Page
|
||||||
|
@ -51,7 +51,12 @@ copy paste the lines::
|
||||||
</t>
|
</t>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
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
|
Editing content on a page
|
||||||
'''''''''''''''''''''''''
|
'''''''''''''''''''''''''
|
||||||
|
@ -104,14 +109,25 @@ modify these lines as below:
|
||||||
|
|
||||||
.. code-block:: css
|
.. code-block:: css
|
||||||
|
|
||||||
.h1 {
|
h1 {
|
||||||
color: #215487;
|
color: #215487;
|
||||||
}
|
}
|
||||||
.span {
|
span {
|
||||||
border: 2px solid black;
|
border: 2px solid black;
|
||||||
background-color: #eee;
|
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``::
|
||||||
|
|
||||||
|
<template id="dummy_theme_asset" name="website assete for Dummy theme" inherit_id="website.theme">
|
||||||
|
<xpath expr="." position="inside">
|
||||||
|
<link rel="stylesheet" href="/dummy_theme/static/style/custom.css"/>
|
||||||
|
</xpath>
|
||||||
|
</template>
|
||||||
|
|
||||||
Refresh the page and feel the hit.
|
Refresh the page and feel the hit.
|
||||||
|
|
||||||
Get the most of the dom
|
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
|
You can easely add images in your snippets simply by setting up css
|
||||||
backgrounds images.
|
backgrounds images.
|
||||||
|
|
||||||
In ``odoo/addons/theme_dummy/static/`` create a new folder and name it
|
Put your images in ``odoo/addons/theme_dummy/static/img``, or in sub-folders
|
||||||
``img``. Put your images there, in sub-folders if needed. Open
|
if needed. Open :file:`odoo/addons/theme_dummy/static/style/custom.less`, add
|
||||||
:file:`odoo/addons/theme_dummy/static/style/custom.less`, add these lines
|
these lines
|
||||||
|
|
||||||
.. code-block:: css
|
.. 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");
|
@img-02: url("../img/img-girl.png");
|
||||||
.dummy-girl { background-image: @img-02; }
|
.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
|
In :file:`odoo/addons/theme_dummy/views/pages.xml` change the correspondant
|
||||||
lines as below::
|
lines as below::
|
||||||
|
|
||||||
<section>
|
<div class="row">
|
||||||
<div class="container">
|
<div class="col-md-12 text-center mt32 mb32">
|
||||||
<div class="row dummy-bg">
|
<h2 class="options_simple_snippet">A great Title, prmize</h2>
|
||||||
<div class="alert alert-primary" role="alert">
|
<h3 class="text-muted">And a great subtilte too</h3>
|
||||||
<a href="#" class="alert-link">...</a>
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
|
||||||
</div>
|
<div class="dummy-boy"></div>
|
||||||
<div class="col-md-6">
|
<div class="dummy-girl"></div>
|
||||||
<h2>BLUE it!</h2>
|
</div>
|
||||||
<div class="dummy-boy">
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<h2>GREEN THAT!</h2>
|
|
||||||
<div class="dummy-girl">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
Your new snippet is now ready to use. Just drag and drop it on your page to
|
Your new snippet is now ready to use. Just drag and drop it on your page to
|
||||||
see it in action.
|
see it in action.
|
||||||
|
@ -329,9 +337,12 @@ Explain xpath
|
||||||
|
|
||||||
.. TODO:: syntax not correct (see website examples)
|
.. 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::
|
In option.xml, add these lines inside the xpath::
|
||||||
|
|
||||||
<li data-check_class="text-purple"><a>YOUR OPTION 1</a></li>
|
<li data-check_class="text-purple"><a>YOUR OPTION 1</a></li>
|
||||||
|
|
Loading…
Reference in New Issue