Hi, i want to know if its posible to install an external bootstrap theme on odoo to use it with "website builder" module.
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
Hi, i want to know if its posible to install an external bootstrap theme on odoo to use it with "website builder" module.
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:
addons_path = /opt/odoo/odoo-server/addons,/opt/odoo/custom/addons
Restart your odoo or openerp-server.
Login to Odoo as the admin user and go to Settings >> Update Modules List and then click the red Update List button
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:
sudo pico -w /opt/odoo/custom/addons/theme_custom/__openerp__.py
change name, description and author to reflect your own new theme's details. I did the following:
{
'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,
}
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:
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
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:
<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>
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
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:
<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>
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
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:
<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 -->
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 -->
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.
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
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.
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.
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 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 ?
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:)
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,
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 :)
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
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?
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.
@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.
Dont know when the indegogo campaign would complete and we would be able to use it.
Hi,
Thanks for all this information.
What's the best way to do when you want change all the header, foot and menu etc :
Thanks!
@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.
@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.
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign upRelated Posts | Replies | Views | Activity | |
---|---|---|---|---|
|
1
Aug 15
|
12496 | ||
|
1
Mar 15
|
7155 | ||
|
0
Jul 19
|
696 | ||
|
0
Sep 24
|
642 | ||
|
0
Aug 22
|
1603 |