
Create a fully customizable and responsive icon snippet for Odoo 17, featuring elegant icons, headings, and descriptions, perfect for enhancing your website's visual appeal and user experience.
To create a static icon snippet in Odoo 17 create a snippet.xml file in the view folder. Bring the ciphers provided to create an empanel able image piece with cardinal columns showing icons and textbook. Enhance the layout of your Odoo website with this attractive and customizable icon box snippet.
<template id="icon_box_snippet_tmpl_1" name="icon Snippet">
<section id="icon_snippet_1" class="pt32 pb32">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="content">
<span class="fa fa-cube"></span>
<h4>lorem ipsum dolor</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="content">
<span class="fa fa-heart-o"></span>
<h4>lorem ipsum dolor</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="content">
<span class="fa fa-pencil-square-o"></span>
<h4>lorem ipsum dolor</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="content">
<span class="fa fa-crosshairs"></span>
<h4>lorem ipsum dolor</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
</div>
</div>
</div>
</section>
</template>
Create snippet_panel.xml file to add icon snippet in Odoo 17's website constructor. This charge inherits the website snippet guidelines by adding your image snips to the snip blocks. Enhance your website constructor with this customizable and operator-friendly icon snippet panel.
<template id="icon_box_website_snippets" inherit_id="website.snippets" name="Icon Snippet">
<xpath expr="//div[@id='snippet_structure']" position="before">
<div id="icon_box_website_snippets" class="o_panel">
<div class="o_panel_header">Icon Snippet</div>
<div class="o_panel_body">
<t t-snippet="module_name.icon_box_snippet_tmpl_1"
t-thumbnail="/module_name/static/src/img/thumbnail/icon-1.svg" />
</div>
</div>
</xpath>
</template>
Customize the look of your icon snippet with CSS. Chasing gives way to cipher symbols and textbooks to make them visually sympathetic and responsive.
#icon_snippet_1{
.content{
text-align: center;
span{
height: 80px;
width: 80px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
border-radius: 50%;
line-height: 80px;
font-size: 26px ;
color: o-color('o-color-1');
}
h4{
font-size: 20px;
line-height: 1.3;
text-transform: capitalize;
font-weight: 600;
margin: 1.5rem 0;
}
p{
color: #898b96;
margin-bottom: 0;
}
}
}
@media (max-width: 991.9px){
#icon_snippet_1 .content{
margin-bottom: 20px;
}
}
At this point you have overworked creating a associate in nursing image snip inch odu cardinal. We've covered the XML code needed to define the CSS required for the snippet panel and content as well as styling. Pursue these CDs you get well Bring bespoke image snippets to your Odu website that enhance both its role and optic invoke
Your email address will not be published. Required fields are marked *