Our Services
- Cloud Hosting
- Support
- Unlimited space
``, one with ID ``wrap`` and the other one with class ``container``. This is to provide a minimal layout.
The next step is to add an empty area that the user
can fill with snippets. To achieve this, just create a ``div`` with
``oe_structure`` class just before closing the ``div#wrap`` element.
.. code-block:: xml
.. tip::
You can create as many snippet areas as you like and place them anywhere in your pages.
Our page is almost ready. Now all we have to do is add **pages.xml** in our **__openerp__.py** file
.. code-block:: python
'data': [
'views/layout.xml',
'views/pages.xml'
],
Update your theme
.. image:: theme_tutorial_assets/img/restart.png
Great, our Services page is ready and you’ll be able to access it by navigating to ``/yourwebsite/page/services``.
You will notice that it's possible to drag/drop snippets underneath the
*Our Services* list.
.. image:: theme_tutorial_assets/img/services_page_nostyle.png
:class: shadow-0
Now let's go back to our *pages.xml* and, after our page template,
copy/paste the following code.
.. code-block:: xml
Services
/page/services
99
This code will add a link to the main menu.
.. image:: theme_tutorial_assets/img/services_page_menu.png
:class: shadow-0
The **sequence** attribute defines the link’s position in the top menu.
In our example, we set the value to ``99`` in order to place it last. I you want to place it in a particular position, you have to replace the value according to your needs.
As you can see inspecting the *data.xml* file in the ``website`` module, the **Home** link is set to ``10`` and the **Contact** us one is set to ``60`` by default.
If, for example, you want to place your link in the **middle**, you can set your link’s sequence value to ``40``.
Add Styles
==========
Odoo includes Bootstrap by default. This means that you can take advantage of all Bootstrap styles and layout functionalities out of the box.
Of course Bootstrap is not enough if you want to provide a unique design. The following steps will guide you through how to add custom styles to your theme.
The final result won't be pretty, but will provide you with enough information to build upon on your own.
Let’s start by creating an empty file called **style.less** and place it in a folder called **less** in your static folder.
The following rules will style our *Services* page. Copy and paste it, then save the file.
.. code-block:: css
.services {
background: #EAEAEA;
padding: 1em;
margin: 2em 0 3em;
li {
display: block;
position: relative;
background-color: #16a085;
color: #FFF;
padding: 2em;
text-align: center;
margin-bottom: 1em;
font-size: 1.5em;
}
}
Our file is ready but it is not included in our theme yet.
Let’s navigate to the view folder and create an XML file called *assets.xml*. Add the default Odoo xml markup and copy/paste the following code. Remember to replace ``theme folder`` with your theme’s main folder name.
.. code-block:: xml
We just created a template specifying our less file. As you can see,
our template has a special attribute called ``inherit_id``. This
attribute tells Odoo that our template is referring to another one in
order to operate.
In this case, we are referring to ``assets_frontend`` template,
located in the ``website`` module. ``assets_frontend`` specifies the
list of assets loaded by the website builder and our goal is to add
our less file to this list.
This can be achieved using xpath with the attributes
``expr="link[last()]"`` and ``position="after"``, which means "*take my
style file and place it after the last link in the list of the
assets*".
Placing it after the last one, we ensure that our file will
be loaded at the end and take priority.
Finally add **assets.xml** in your **__openerp__.py** file.
Update your theme
.. image:: theme_tutorial_assets/img/restart.png
Our less file is now included in our theme, it will be automatically compiled, minified and combined with all Odoo’s assets.
.. image:: theme_tutorial_assets/img/services_page_styled.png
:class: shadow-0
Create Snippets
===============
Since snippets are how users design and layout pages, they are the most important element of your design.
Let’s create a snippet for our Service page. The snippet will display three testimonials and it will be editable by the end user using the Website Builder UI.
Navigate to the view folder and create an XML file called **snippets.xml**.
Add the default Odoo xml markup and copy/paste the following code.
The template contains the HTML markup that will be displayed by the snippet.
.. code-block:: xml
As you can see, we used Bootstrap default classes for our three columns. It’s not just about layout, these classes **will be triggered by the Website Builder to make them resizable by the user**.
The previous code will create the snippet’s content, but we still need to place it into the editor bar, so the user will be able to drag&drop it into the page. Copy/paste this template in your **snippets.xml** file.
.. code-block:: xml
.. rst-class:: col-sm-6
Using xpath, we are targeting a particular element with id
``snippet_structure``. This means that the snippet will appear in the
Structure tab. If you want to change the destination tab, you have just to replace the ``id`` value in the xpath expression.
.. image:: theme_tutorial_assets/img/snippet_bar.png
:class: col-sm-6 shadow-0
============ ==================================
Tab Name Xpath expression
============ ==================================
Structure ``//div[@id='snippet_structure']``
Content ``//div[@id='snippet_content']``
Feature ``//div[@id='snippet_feature']``
Effect ``//div[@id='snippet_effect']``
============ ==================================
The ```` tag will call our snippet's template and will assign a thumbnail placed in the img folder.
You can now drag your snippet from the snippet bar, drop it in your page and see the result.
.. image:: theme_tutorial_assets/img/snippet_default.png
Snippet options
===============
Options allow publishers to edit a snippet’s appearance using the Website Builder’s UI.
Using Website Builder functionalities, you can create snippet options easily and automatically add them to the UI.
Options group properties
-------------------------
Options are wrapped in groups. Groups can have properties that define how the included options will interact with the user interface.
``data-selector=" css selector(s) "``
Bind all the options included into the group to a particular element.
``data-js=" custom method name "``
Is used to bind custom Javascript methods.
``data-drop-in=" css selector(s) "``
Defines the list of elements where the snippet can be dropped into.
``data-drop-near=" css selector(s) "``
Defines the list of elements that the snippet can be dropped beside.
Default option methods
-----------------------
Options apply standard CSS classes to the snippet. Depending on the method that you choose, the UI will behave differently.
``data-select_class=" class name "``
More data-select_class in the same group defines a list of classes that the user can choose to apply. Only one option can be enabled at a time.
``data-toggle_class=" class name "``
The data-toggle_class is used to apply one or more CSS classes from the list to a snippet. Multiple selections can be applied at once.
Let's demonstrate how default options work with a basic example.
We start by adding a new file in our views folder - name it **options.xml** and add the default Odoo XML markup. Create a new template copy/pasting the following
.. code-block:: xml
.. note::
The previous template will inherit the default **snippet_options template** adding our options after the **background** options (xpath expr attribute).
To place your options in a particular order, inspect the **snippet_options template** from the **website module** and add your options before/after the desired position.
As you can see, we wrapped all our options inside a DIV tag that will
group our options and that will target them to the right selector
(``data-selector=".snippet_testimonial"``).
To define our options we applied ``data-select_class`` attributes to the
``li`` elements. When the user selects an option, the class contained in
the attribute will automatically be applied to the element.
Since ``select_class`` method avoids multiple selections, the last "empty"
option will reset the snippet to default.
Add **options.xml** to ``__openerp__.py`` and update your theme.
.. image:: theme_tutorial_assets/img/restart.png
Dropping our snippet onto the page, you will notice that our new options are automatically added to the customize menu. Inspecting the page, you will also notice that the class will be applied to the element when selecting an option.
.. image:: theme_tutorial_assets/img/snippet_options.png
Let’s create some css rules in order to provide a visual feedback for our options. Open our **style.less** file and add the following
.. code-block:: css
.snippet_testimonial {
border: 1px solid #EAEAEA;
padding: 20px;
}
// These lines will add a default style for our snippet. Now let's create our custom rules for the options.
.snippet_testimonial {
border: 1px solid #EAEAEA;
padding: 20px;
&.opt_shadow img {
box-shadow: 0 2px 5px rgba(51, 51, 51, 0.4);
}
&.opt_grey_bg {
border: none;
background-color: #EAEAEA;
}
}
.. image:: theme_tutorial_assets/img/snippet_options2.png
:class: shadow-0
Great! We successfully created options for our snippet.
Any time the publisher clicks on an option, the system will add the class specified in the data-select_class attribute.
By replacing ``data-select_class`` with ``data-toggle_class`` you will be able to select
more classes at the same time.
Javascript Options
------------------
``data-select_class`` and ``data-toggle_class`` are great if you need to perform
simple class change operations. But what if your snippet’s customization needs something more?
As we said before, ``data-js`` propriety can be assigned to an options group in order to define a custom method. Let’s create one for our *testimonials snippet* by adding a ``data-js`` attribute to the option’s group div that we created earlier.
.. code-block:: xml
Update your theme
.. image:: theme_tutorial_assets/img/restart.png
Let’s test our new javascript function. Enter in Edit mode and drop into the page.
You should now see the javascript alert that we bound on the ``on_focus`` event.
If you close it, then click outside of your snippet and then click in it again, the event will trigger again.
.. image:: theme_tutorial_assets/img/snippet_custom_method.png
:class: shadow-0
Editing Reference Guide
=======================
Basically all the elements in a page can be edited by the publisher.
Besides that, some element types and css classes will trigger special Website Builder functionalities when edited.
Layout
------
````
Any section element can be edited like a block of content. The publisher can move or duplicate it. It’s also possible to set a background image or color. Section is the standard main container of any snippet.
``.row > .col-md-*``
Any medium bootstrap columns directly descending from a .row element, will be resizable by the publisher.
``contenteditable="False"``
This attribute will prevent editing to the element and all its children.
``contenteditable="True"``
Apply it to an element inside a contenteditable="False" element in order to create an exception and make the element and its children editable.
````
In Edit Mode, any link can be edited and styled. Using the “Link Modal” it’s also possible to replace it with a button.
Media
-----
````
Pictogram elements. Editing this element will open the Pictogram library to replace the icon. It’s also possible to transform the elements using CSS.
``![]()
``
Once clicked, the Image Library will open and you can replace images. Transformation is also possible for this kind of element.
.. code-block:: html
This html structure will create an ``
Our Services
- Cloud Hosting
- Support
- Unlimited space
Client Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Client Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Client Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[...]
Done. From now on, the Website Builder will look for a
``snippet_testimonial_options`` method each time the publisher enters in edit
mode.
Let's go one step further by creating a javascript file, name
it **tutorial_editor.js** and place it into the **static** folder. Copy/paste
the following code
.. code-block:: javascript
(function() {
'use strict';
var website = openerp.website;
website.openerp_website = {};
})();
Great, we successfully created our javascript editor file. This file will contain all the javascript functions used by our snippets in edit mode. Let’s create a new function for our testimonial snippet using the ``snippet_testimonial_options`` method that we created before.
.. code-block:: javascript
(function() {
'use strict';
var website = openerp.website;
website.openerp_website = {};
website.snippet.options.snippet_testimonial_options = website.snippet.Option.extend({
on_focus: function() {
alert("On focus!");
}
})
})();
As you will notice, we used a method called ``on_focus`` to trigger our function. The Website Builder provides several events you can use to trigger your custom functions.
=========================== ==================================
Event Description
=========================== ==================================
``start`` Fires when the publisher selects the snippet for the first time in an editing session or when the snippet is drag-dropped into the page
``on_focus`` Fires each time the snippet is selected by the user or when the snippet is drag-dropped into the page.
``on_blur`` This event occurs when a snippet loses focus.
``on_clone`` Fires just after a snippet is duplicated. A new js variable is created ($clone) containing the cloned element.
``on_remove`` It occurs just before that the snippet is removed.
``drop_and_build_snippet`` Fires just after that the snippet is drag and dropped into a drop zone. When this event is triggered, the content is already inserted in the page.
``clean_for_save`` It trigger before the publisher save the page.
=========================== ==================================
Let’s add our new javascript files to the editor assets list.
Go back to **assets.xml** and create a new template like the previous one.
This time we have to inherit ``assets_editor`` instead of ``assets_frontend``.
.. code-block:: xml