I have odooo online account, how can i import bootstrap theme purchased on themeforest, in the odoo? or what i should do to convert current normal theme to be working with odoo?
you could try to add the css file and the js-script file to your assets_common. Odoo will then minimise all the CSS and JS Files into one (or slightly more) files.
In addons/web/views/webclient_templates.xml you can see how the built in bootstrap is added in odoo.
So if you want to add something to all of the javascript files you can do it like this:
<template id="assets_frontend" inherit_id="web.assets_frontend" name="<name of your addition>" priority="15">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="<path to your js file>"</script>
</xpath>
But adding a CSS or JS that isn't built for odoo might cause problems since selectors might be overwritten or you use different bootstrap versions.
I havent't tried it with Bootstrap Themes myself so there might be better solutions.
Related
I need a form view and I need its layout to be customized, using directly the Bootstrap 4 styles
How exactly can I do that ?
Also
I need some fields/tabs to appear conditionally (if some values is true) and such conditionally appearing fields need to be in my custom layout
Is this possible ?
How ?
First of all, I could use an example of a custom layout
And then I could use some enlightenment on how the conditional appearing of fields is done, behind the scenes
Thanks in advance
You can create a form view using any html you like. You can also use xpath to load custom css and javascript, such as bootstrap. You should load the xpath straight after your opening form tag.
<xpath expr="." position="inside">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</xpath>
There a couple of ways to show things conditionally. I find the following example easiest when using the form views:
<div id="my-div" attrs="{'invisible': [('field','==',True)]}">Do not show this text if the field is true</div>
What is the best way to incorporate css / js assets into Odoo's website where the assets are only loaded for a particular page?
In the examples and documentation they speak of dumping your assets into Odoo's website.assets_frontend and I do this however there are circumstances where I would like to use website templates found online and I really do not want to take the time to look through the css classes and identify conflicts.
If the page itself were to fail that is one thing but if it breaks all the css on my existing pages that is another.
I was thinking of using a technique like this.
t-if="request.httprequest.path.startswith('/page/path/')"
Using an if statement to determine whether or not to incorporate the css in the website assets or not.
<odoo>
<data>
<template id="page_style" name="Page Style" inherit_id="website.assets_frontend">
<xpath expr="link[last()]" position="after">
<t t-if="request.httprequest.path.startswith('/page/path/')">
<link href="/addon_name/path/to/css/style.css" rel="stylesheet" type="text/css"/>
</t>
</xpath>
</template>
</data>
</odoo>
Anyways, if anyone would like to make a suggestion on how they incorporate css into Odoo's frontend assets in a contained way I would appreciate it.
What you can do is actually insert a:
<head>
<link href="/addon_name/path/to/css/style.css" rel="stylesheet" type="text/css"/>
</head>
to your template that you want the specific css/js to be applied to. For a specific example see addons/website_google_map/views/google_map_templates.xml
Your the contents of your head tag will be inserted inside the head tag of the final HTML that will be rendered for that template.
Since it seems to be straighforward and used by the framework itself I have resorted on using it on my own with no problems so far. As I can understand you can also create a javascript Widget that will operate on your template only that will apply a specific css. But the above solution seems cleaner to me.
I have question about some CSS stuff. I'm currently using Boostrap to develop a web application. I have come in the situation where I have to set some media queries in my custom css which i use for styling and graphic. My question is will there be any conflict with those one in Boostrap CSS.
With Bootstrap, the best practice is to add your custom CSS code (including media queries) after Bootstrap's styles have been declared. In general, you'll first call the standard Bootstrap CSS file. Next you can call a customized CSS file that you generate, which contains any overrides to the base CSS along with any media queries needed.
You can also minify your CSS files, but make sure to have the base CSS styles appear first in the minified version.
I am using dijit/form/Select in my app to dynamically bind some data. I am able to bind the data to the Select element but problem is that my Select element is not rendering properly in both of my Emulator and simulator. I am using embedded dojo 1.9 in worklight and below are the code that I am using. Is there anything else that I need to add in my code to use dijit select ? I searched for this type of question in this forum and I found this link where the user is having same problem but that is unanswered.
script error on require "dijit/form/Select"
My HTML code-
<select id="selectCity" name="selectCity" data-dojo-type="dijit/form/Select">
</select>
my script code-
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
I'm pretty sure it's because theming in dojox/mobile is different from theming in dijit. To use a dropdown using dijit modules, you would have to configure a a theme. Usually this means you need to import a CSS file and add a class to the parent element (most common practice is by adding it to your <body> tag). But these themes are not device specific.
A better solution would be by using the dojox/mobile/ComboBox, more info can be found at the reference guide.
I have a superfish jquery plugin, which has 4 js and 1 css:
<script src="~/Scripts/JQ_Addons/SuperFish/jquery.bgiframe.min.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/hoverIntent.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/supersubs.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/superfish.js"></script>
<link href="~/Scripts/JQ_Addons/SuperFish/superfish.css" rel="stylesheet" />
I want to create one bundle for all of this, but when I call bundles.Add(), it can only add one type of bundle, ScriptBundle or StyleBundle.
bundles.Add(new ScriptBundle("~/bundles/superfish").Include(
"~/Scripts/JQ_Addons/SuperFish/jquery.bgiframe.min.js",
"~/Scripts/JQ_Addons/SuperFish/hoverIntent.js",
"~/Scripts/JQ_Addons/SuperFish/supersubs.js",
"~/Scripts/JQ_Addons/SuperFish/superfish.js")); // I can not add css here
and in the view, I can only choose to render one type of bundle:
#Styles.Render or #Script.Render
So, my question is: Is it possible to create only one bundle rule with both js and css included? and in my view, I want something like:
#Bundles.Render("~/bundles/superfish")
The main reason you cannot has to do with how browser handle these files.
To retrieve style sheets, the html tag is <link>
To retrieve scripts, the html tag is <script>
The html tag tells the browser what the contents of the file is.
On the MVC server side code, the main reason to use bundling is to combine script and link files into a single file. Then to minimize them. Bundling uses different minimization functions based on type of file. If you combine scripts and css into a single file, the bundling code will not properly minimize the resulting file.