This question has been flagged

Hi, i want to know if its posible to install an external bootstrap theme on odoo to use it with "website builder" module.

 

 

Avatar
Discard
Best Answer

Hi Nicolás,

It is possible to repackage any bootstrap theme to be installed with Odoo as a module.

Basically you would need to repackage the "building blocks" of the external bootstrap theme that you would like to use into odoo snippets using the snippets.xml file found in your theme folder under the folder called views.

I am currently working on a modification of the theme_clean module with a custom bootstrap theme and can therefore provide you with some basic instructions on how to modify this theme to include your own snippets, javascript and css.

Installing the design-themes repository:

  1. Clone the design-themes repository into a custom addons directory (I created /opt/odoo/custom/addons as my odoo installation is at /opt/odoo/odoo-server/addons):
    1. sudo git clone https://github.com/odoo/design-themes.git /opt/odoo/custom/addons/
    2. add this addons directory to your odoo-server.conf or openerp-server.conf file:
      1. sudo pico -w /etc/odoo-server.conf
      2. find the line "addons_path" =  and add a comma after your default addons directory and add your new custom addons directory. The line in my .conf file looks like the following:
        1. addons_path = /opt/odoo/odoo-server/addons,/opt/odoo/custom/addons

      3. Restart your odoo or openerp-server.

    3. Login to Odoo as the admin user and go to Settings >> Update Modules List and then click the red Update List button

    4. you should now be able to find your new themes for installation. Both theme_clean and theme_zen should be working on the latest version of 8.0 (RC1)

Copying the theme_clean module to create your own new module:

  1. go to your custom addons directory:
    1. cd /opt/odoo/custom/addons/
  2. copy theme clean to your own theme directory:
    1. sudo mkdir theme_custom
    2. sudo cp -r /opt/odoo/custom/addons/theme_clean /opt/odoo/custom/addons/theme_custom
  3. go to the views directory of your new theme:
    1. cd /opt/odoo/custom/addons/theme_custom/views
  4. open up all xml files in this directory and find and replace the following snippets in each file with your theme's new path:
    1. find /theme_clean/static/ and replace with /theme_custom/static/
  5. open up theme.xml in the following directory:
    1. /opt/odoo/custom/addons/theme_custom/static/xml/
    2. repeate point 4.1 (ie. find all references to /theme_clean/static/ and replace them with /theme_custom/static/)
  6. repeat step 4.1 for all files found in the following directories:
    1. /opt/odoo/custom/addons/theme_custom/static/css
    2. /opt/odoo/custom/addons/theme_custom/static/js
    3. /opt/odoo/custom/addons/theme_custom/static/less
  7. open up the __openerp__.py file in your  module's root directory:
    1. sudo pico -w /opt/odoo/custom/addons/theme_custom/__openerp__.py

    2. change name, description and author to reflect your own new theme's details. I did the following:

      1. {

            'name': 'My Custom Theme Name',

            'description': 'My Custom Theme Description',

            'category': 'Website',

            'version': '1.0',

            'author': 'My Theme Author Name',

            'depends': ['website'],

            'data': [

                'views/layout.xml',

                'views/theme.xml',

                'views/pages.xml',

                'views/snippets.xml',

                'views/images.xml',

                'views/options.xml',

            ],

            'application': True,

        }

    3. save this file and go back to Odoo's backend and then go to Settings >> Update Modules List and then choose to update list to refresh your module list available for install in Odoo 

You should now find that you are able to install your clone of theme_clean as it's own module. If you have any issues at this point look back through all of the themes files to check for replacements of /theme_clean/static/ with your own theme's new director (/theme_custom/static/).

Adding your own custom CSS to the header of your theme:

  1. open up the following file - /theme_custom/views/theme.xml - this is the file that you should add all your custom theme's default header css that you'd like loaded on every page by default.
  2. locate the opening <template> and <xpath> tags and insert your own css files in between the openening and close tags here (i've inserted custom.css as an example). The tags in mine were as follows:
    <template id="website.theme_chd_misc" name="theme_chd_misc" inherit_id="website.theme" optional="enabled" priority="1">
         <xpath expr="//link[last()]" position="after">
                 <link href="/theme_custom/static/css/custom.css" rel="stylesheet" type="text/less"/>
        </xpath>
    </template>
  3. Be sure to use XHTML not HTML in all of these xml files. If you are unsure of how to write valid XHTML simply run your HTML through a converter. I used the following online converter - http://www.csgnetwork.com/cvthtml2xhtml.html

  4. You'll need to uninstall your theme, update your modules list, and then reinstall to see the changes. You will need to do this with any changes you make to your theme files if you would like to see/test the changes. I had issues with my own theme's bootstrap css files conflicting with Odoo's own. you may find that you run into issues here. If you do try removing your own bootstrap css library first and see if this helps. This will allow you to find and eliminate the issues one by one by adding them back one by one.

Adding your own custom Javascript to the header of your theme:

  1. open up the following file - /theme_custom/views/layout.xml - this is the file that you should add all your custom theme's default header and footer javascript (ie. the files that should be loaded for every normal page in your theme by default).
  2. near the top of the file you'll find a set of opening <template> and <xpath> tags. Inside these tags is where you should place all your header javascript. See the following for an example of adding the website_geolocation.js file:
    1. <template id="clean_script" inherit_id="website.assets_frontend" name="Clean scripts">
          <xpath expr="/t" position="inside">       
      <script type="text/javascript" src="/website_event/static/src/js/website_geolocation.js"></script>

              <script type="text/javascript">
                  (function() {
                      'use strict';
                      openerp.website.add_template_file('/theme_porto/static/xml/theme.xml');
                  })();
              </script>
          </xpath>
      </template>

  3. Be sure to use XHTML not HTML in all of these xml files. If you are unsure of how to write valid XHTML simply run your HTML through a converter. I used the following online converter - http://www.csgnetwork.com/cvthtml2xhtml.html

  4. You'll need to uninstall your theme, update your modules list, and then reinstall to see the changes. You will need to do this with any changes you make to your theme files if you would like to see/test the changes. I had issues with my own theme's jquery javascript files conflicting with Odoo's own. you may find that you run into issues here. If you do try removing your own jquery library first and see if this helps.

Adding your own custom Javascript to the footer of your theme:

  1. open up the following file - /theme_custom/views/layout.xml - this is the file that you should add all your custom theme's default header and footer javascript (ie. the files that should be loaded for every normal page in your theme by default).
  2. we'll need to add a new set of <template> and <xpath> tags to allow us to add the javascript after the closing </footer> tag in your theme. See the following code for an example of how I achieved this:
    1. <template id="clean_script_footer" inherit_id="website.layout" name="Clean scripts">

          <xpath expr="//footer[last()]" position="after">

              <!-- Custom Footer Scripts to be added at the bottom of the page -->

                  <script src="/theme_custom/static/js/custom.js"></script>

          </xpath>

      </template>

  3. Be sure to use XHTML not HTML in all of these xml files. If you are unsure of how to write valid XHTML simply run your HTML through a converter. I used the following online converter - http://www.csgnetwork.com/cvthtml2xhtml.html

  4. You'll need to uninstall your theme, update your modules list, and then reinstall to see the changes. You will need to do this with any changes you make to your theme files if you would like to see/test the changes. I had issues with my own theme's jquery javascript files conflicting with Odoo's own. you may find that you run into issues here. If you do try removing your own jquery library first and see if this helps.

Adding your own custom snippets:

  1. open the following file and locate the opening <template> and <xpath> tags - /opt/odoo/custom/addons/theme_custom/views/snippets.xml - the code you're looking for is as follows:

        <template id="theme_clean.snippets" inherit_id="website.snippets" name="Clean Theme snippets">
          <xpath expr="//ul[@class='nav navbar-nav nav-tabs']" position="inside">
            <li>
              <a href="#snippet_clean" data-toggle="tab">Clean</a>
            </li>
          </xpath>
          <xpath expr="//div[@class='tab-content']" position="inside">
            <div id="snippet_clean" class="tab-pane fade">
              <!-- Typo Showcase -->

  2. The comment <!-- Typo Showcase --> is where your snippet begins. Insert your snippet before <!-- Typo Showcase --> to add extra snippets. The basic structure of a snippet can be seen as follows:
    <!--My Custom Theme Snippet -->
    <div>
    <div class="oe_snippet_thumbnail">
                    <img src="/theme_porto/static/img/blocks/block_banner.png" class="oe_snippet_thumbnail_img" alt="" />
                    <span class="oe_snippet_thumbnail_title">My Custom Theme Snippet Label</span>
                </div>
                    <section class="oe_snippet_body mt0 mb32 fw_categories">                                    
                    
    <p>Here's an example paragraph snippet. Insert what you like here, but make sure it is valid XHTML or you will run into problems.</p>
                            
                
                    </section></div>
    <!--/My Custom Theme Snippet -->

    1. You simply need to insert your custom XHTML snippet in between the <section></section> tags. Be sure to use modular snippets that can be used as building blocks and placed anywhere on any page.

  3. Be sure to use XHTML not HTML in all of these xml files. If you are unsure of how to write valid XHTML simply run your HTML through a converter. I used the following online converter - http://www.csgnetwork.com/cvthtml2xhtml.html

  4. You'll need to uninstall your theme, update your modules list, and then reinstall to see the changes. You will need to do this with any changes you make to your theme files if you would like to see/test the changes.

  5. You can add any extra images you require for your snippets in the /opt/odoo/custom/addons/theme_custom/static/img/ directory. Make sure you reference the image path correctly in your snippet (eg. <img src="/theme_custom/static/img/example.jpg" />).

This is simply how I have managed to create my own custom theme using theme_clean as a framework. There are probably better ways to do this, and I welcome any comments or suggestions on improving the process. I hope this helps get you started on your own custom theme development in Odoo CMS / Website builder.

Avatar
Discard
Author

Thanks a lot Luke!

@Nicolás, No problem. Please post back here if you run into any issues or discover how to accomplish anything that is not listed in the above post so that others can benefit from your experience.

Thanks a lot

Anyone knows where those themes on https://github.com/odoo/design-themes moved to? What would a clean empty theme structure look like?

@Cyrill, I'll wait until the Indiegogo campaign here is finished: https://www.indiegogo.com/projects/bootstrap-themes-for-odoo-cms to allow Odoo to gather as much funding to improve the themes and building blocks from the campaign as possible as it will be beneficial to the community as many building blocks will eventually be rolled into the open-source repo's as far as i'm aware. Once the funding has closed I will add my own modified fork of theme_clean back on my github profile to allow anyone who is interested to use it as a reference. In the meantime I suggest you refer to this website for documentation: http://odoo-80.readthedocs.org/en/latest/guides.html as it gives a great rundown of what a basic (empty) theme structure should look like. I am currently running a few instances of Odoo with custom built themes in production as a pilot project to test viability, however there are some issues that I have run into mostly related to javascript libraries conflicting with Odoo's inbuilt default javascript libraries. Please post back here if you run into any issues so that others on the forum can attempt to offer some insight.

Greetings, I'm hoping that with the indiegogo project finalizing here that we can get this branch back? I openly supported the project and have contributed myself... Like I'm sure many of us, we really need this source so we can be making the changes our clients need in place now... if not long before now.

I too am looking forward to the fruits of the Indiegogo campaign, specifically from the viewpoint of a saas user. I've spent the last few weeks getting shipment tracking integrated with aftership in a saas compliant way and so it will be good to have the same capability available in saas to work on themes.

@Kurt, I think there is around 5 hours left on the campaign. From what I understand the clean theme is basically ready to go (this is what they have been advertising in most pictures on the campaign), and therefore hopefully this will be available for SaaS users soon after the campaign is finished. I'm most interested in the theme developer's handbook, so hopefully this is ready very shortly after the campaign is finished. Designing theme customisations does not seem to be too difficult, it's just the snippets JS options/customisation among a few other things that I have not yet gotten my head around. Hopefully the developer's book goes into this particular subject in detail as I think this will be the thing most theme developers will be interested in.

@Luke - yes I am looking mainly for snippet customisation - specifically to do the thing mentioned here:- https://www.odoo.com/forum/help-1/question/webrotate-360-product-spin-in-odoo-68063

@Luke, are you still planning on putting your branch back up? It would at least give us something to work with until the book is done and the official theme clean is released. Much appreciated.

Hi Greg, I'll put the old theme_clean repository up as soon as I refactor it to work with the updates that will allow it to work in the stable branch (I downloaded a version that was working with RC1). It is definitely a good starting point for building a theme, however there have been many improvements in the design-themes branch of theme_clean, so once it is released I think it will be a better boilerplate for building on.

Hi Luke, when trying to add my own css, using what you described, it has been added on odoo's own css files I think, because whan i uninstall my theme module the css effect stills there. I removed the css file from my theme module, and then I get the following error : the file custom.css defined on website.assets_frontend doesn't exist. Where can I find this definition to delete it, I don't want it anymore. Thanks Luke.

Hi Yassine,

Did you add the CSS originally in the Odoo GUI editor interface?

It sounds like it's still sticking around in a view you have created in the database. You just need to find the view and delete the changes.

Regards,

Luke

On Thu, Jul 9, 2015 at 2:20 AM, Yassine TEIMI <yteimi01@gmail.com> wrote:

Hi Luke, when trying to add my own css, using what you described, it has been added on odoo's own css files I think, because whan i uninstall my theme module the css effect stills there. I removed the css file from my theme module, and then I get the following error : the file custom.css defined on website.assets_frontend doesn't exist. Where can I find this definition to delete it, I don't want it anymore. Thanks Luke.

--
Yassine TEIMI
Sent by Odoo S.A. using Odoo about Forum Post False

No I've added it only using a module. I created a new fresh database, because it was wasting my time. I've emailed you about this topic, I hope you received my emails. Thank you for your efforts.

Hello @lukebranch, have you done any further work to use Material Design base to override theme_default ?

Best Answer

This is interesting topic, but unfortunatly, as John Baldwin noticed, the themes are removed/hidden from repositories...

As the indiegogo campaign (mentioned by Fabien in one of comments) is over with more than 600 % success, 
I think that it would be realy nice if someone could finaly share / unhide  some repo with at least  some basic module,
Or a skeleton with basic functionality (already present widgets) 

Waiting for july 2015 is a long time... would like to play a bit over some examples:) 


 

Avatar
Discard
Best Answer

Dear Odoo and Community,

As  indegogo campaign has finished can somebody return this repository back for community. We would like to do some testing if possible.

https://github.com/odoo/design-themes.git

Regards,

Avatar
Discard

They are here: https://www.odoo.com/apps/themes

Yenthe, Thank you very much for your fast reply, I already checked that out...but there is no free sample theme there !!! From the initial post It seems that theme_clean was free sample or maybe that changed during time ??? If possible having that free sample theme back as it was would be helpful for community. Thank you again,

I don't think that's what lolziac means by the design-themes.git. You give him de App Store of odoo with the themes. Nothing wrong with making money, but I think lolziac want the git repository so he can see the source code without paying, and building his own theme. I know that before the Indiegogo theme someone posted an github repository with a kind of starters theme. That github repository was asked (by odoo) to shutdown because of they wanted to make money on the campaign. The owner of that github agreed, but stated said that after the campaign on Indiegoto was finished he would enable the github again. So other users could benefit.

Martin, You got the point :)

Best Answer

Hi,

Is this solution to use an external bootstrap theme still valid for v13? Is there an easier way? Looking for a way to use an HTML5 Bootstrap Theme from Envato on Odoo...

Thanks,
Paulo

Avatar
Discard
Best Answer

Luke the design-themes directory on github does not seem to exist. I tried using your directions and paths to the themes, did something happen with the theme design functionality to cause these to be removed? 

Avatar
Discard

Hi John, It seems the design-themes repository has been taken down shortly after this post. I'm not entirely sure why. I have an older fork of the repository here: https://github.com/lukebranch/design-themes however due to the fact the original one was taken down if Odoo messages me to ask me to take it down I will.

Luke, we hide the design-themes branch because we plan to launch an indiegogo campaign to make a big boost on themes: clean documentation for designers, 50 pro themes available by default, cleaning the theme mechanism (customize box, CSS concatenation, less...), theme store... We expect to launch the indiegogo campaign within the next 4 weeks. It will help us finance a big boost in this direction. Would be great if you can hide your fork to not decrease the value of the indiegogo campaign.

Hi Fabien, No problem. I will remove the design-themes fork from my repository for now so as not to interfere with the campaign.

Author

@Fabien Pinckaers, were is that campaign?

@Nicolás, Here it is, released yesterday: https://www.indiegogo.com/projects/bootstrap-themes-for-odoo-cms

Sounds very much in line with "open source" mentality. Let's all turn off our github branches.

Best Answer

Hi,

Thanks for all this information.

What's the best way to do when you want change all the header, foot and menu etc : 

  • Override the website.layout
  • Inherit the website.layout

Thanks!

Avatar
Discard

@Laurent, I'd recommend purchasing the developer book through the indiegogo.com campaign by making a small contribution: https://www.indiegogo.com/projects/bootstrap-themes-for-odoo-cms I think you can get the developer/designer book + 1 bootswatch base starter theme module to get you started. I've just done it myself as I would also like to know the answer to your question among many others that (from my understanding) will be covered in this developer/designer book.

Best Answer

@Luke :

Hi Luke, when trying to add my own css, using what you described, it has been added on odoo's own css files I think, because whan i uninstall my theme module the css effect stills there. I removed the css file from my theme module, and then I get the following error : the file custom.css defined on website.assets_frontend doesn't exist. Where can I find this definition to delete it, I don't want it anymore. Thanks Luke.

Avatar
Discard
Best Answer

Dont know when the indegogo campaign would complete and we would be able to use it. 

Avatar
Discard