Odoo 15 Website Homepage Using Bootstrap

/
Odoo Theme/
Odoo 15 Website Homepage Using Bootstrap

In this Odoo website theme development tutorial, we will be creating a new homepage layout using bootstrap classes by inheriting existing homepage layout. In addition, you will also learn adding custom styles.

The image below will be the homepage design we will be doing in this tutorial.

Odoo website default homepage and contact us page

When installing Odoo Website module, homepage and contact us page are automatically created, hence, we don't need to create a new page layout, but instead, we will inherit existing page. If you go under Odoo community addons folder addons/website/website_data.xml and search for homepage, you will see the two pages created below.

Create new homepage

Create a new file under views folder and name it homepage.xml. Copy the original code in website_data.xml and just replace id to inherit_id and add a new id. Then use Xpath to replace the original code.

custom-addons/theme_yourhome/views/homepage.xml

xml

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <template id="custom_homepage" inherit_id="website.homepage" name="Home">
        <xpath expr="//t[@t-call='website.layout']" position="replace">
            <t t-call="website.layout">
                <t t-set="pageName" t-value="'homepage'"/>
                <div id="wrap" class="oe_structure oe_empty"/>
                This is the new homepage.
            </t>
        </xpath>
    </template>
</odoo>

Go to browser and in backend, go to Settings -> website -> Pick a Theme and Update theme. You should see the text you added and so we can see that we have successfully inherited existing homepage layout.

But we can see the "Welcome to you Homepage!" text which we did not added. To remove this text, go back to homepage.xml and remove class "oe_empty" and put the text inside div.

Go to browser and refresh homepage, notice that the text has been removed.

Create Hero Image Layout

There's already existing and similar code from default Odoo website snippets which we can use with small modification. Go to Odoo community edition folder addons/website/views/snippets/s_cover.xml. Copy the code and paste it in homepage.xml.

custom-addons/theme_yourhome/views/homepage.xml

xml

<t t-call="website.layout">
    <t t-set="pageName" t-value="'homepage'"/>
    <div id="wrap" class="oe_structure">
        <section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
            <span class="s_parallax_bg oe_img_bg" 
                style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
            <div class="o_we_bg_filter bg-black-50"/>
            <div class="container s_allow_columns">
                <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
                <p class="lead" style="text-align: center;">
                    Write one or two paragraphs describing your product, services or a specific feature.<br/> 
                    To be successful your content needs to be useful to your readers.</p>
                <p style="text-align: center;">
                    <a t-att-href="cta_btn_href" class="btn btn-primary mb-2"><t t-esc="cta_btn_text">Contact us</t></a>
                </p>
            </div>
        </section> 
    </div>
</t>

Go to browser backend and update the theme. If you add --dev xml in you PyCharm parameters then no need to always update the theme, just reload the page.

Odoo website inherit homepage hero image

Since it is similar to our layout, we can just simply edit the text and background image. Download background image here Open https://github.com/alferjay/odoo_theme_yourhome/blob/master/theme_yourhome/static/src/img/home-bg.jpg and save under "theme_yourhome/static/src/img" folder.

custom-addons/theme_yourhome/views/homepage.xml

xml

<section class="s_cover parallax bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
    <span class="s_parallax_bg oe_img_bg" style="background-image: url('/theme_yourhome/static/src/img/home-bg.jpg');"/>
    <div class="container s_allow_columns">
        <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Find your new home</font></h1>
        <p class="lead" style="text-align: center;">
            Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for <br/>
            previewing layouts and visual mockups.</p>
        <p style="text-align: center;">
            <a t-att-href="cta_btn_href" class="btn btn-primary mb-2 mt-3 rounded-circle px-5 font-weight-medium"><t t-esc="cta_btn_text">Learn More</t></a>
        </p>
    </div>
</section>

Go to browser and refresh page.

Create Explore Cities Layout

For Explore Cities layout, copy the code below, paste in homepage.xml after "Find your home" section. Download the background images here Open and save under "theme_yourhome/static/src/img" folder.

custom-addons/theme_yourhome/views/footer.xml

xml

<section class="explore-cities">
    <div class="container">
        <div class="text-center py-5">
            <h2 class="h1">Explore Cities</h2>
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for <br/>
               previewing layouts and visual mockups.</p>
        </div>

        <div class="row">
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city1.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city2.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city3.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city4.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city5.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city6.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city7.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="d-flex align-items-center">
                    <div class="img-container mr-3 rounded">
                        <img class="country-image rounded" src="/theme_yourhome/static/src/img/city8.png"/>
                    </div>
                    <div>
                        <h5 class="mb-0">Country Name</h5>
                        <div>City name</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Add styles by adding the code below in "theme_youhome/static/src/scss/styles.scss".

Go to browser and refresh the page.

Create New Properties Layout

For New Properties layout, copy the code below in homepage.xml after explore cities section.

custom-addons/theme_yourhome/views/homepage.xml

xml

<section class="new-properties o_cc5 mt-5">
    <div class="container py-5">
        <div class="d-flex align-items-center">
            <h2 class="h1 m-0">New Properties</h2>
            <a href="#" class="ml-auto btn btn-primary mb-2 mt-3 rounded-circle font-weight-medium">View All Properties</a>
        </div>

        <div class="row mt-5">
            <div class="col-lg-3">
                <div class="property-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/property1.png"/>
                </div>
                <div class="mt-2">
                    <span class="text-muted d-block">Apartment</span>
                    <span class="text-primary d-block h3 m-0">100,000 USD</span>
                    <span class="text-light d-block">Location of the property</span>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="property-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/property2.png"/>
                </div>
                <div class="mt-2">
                    <span class="text-muted d-block">Apartment</span>
                    <span class="text-primary d-block h3 m-0">100,000 USD</span>
                    <span class="text-light d-block">Location of the property</span>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="property-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/property3.png"/>
                </div>
                <div class="mt-2">
                    <span class="text-muted d-block">Apartment</span>
                    <span class="text-primary d-block h3 m-0">100,000 USD</span>
                    <span class="text-light d-block">Location of the property</span>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="property-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/property4.png"/>
                </div>
                <div class="mt-2">
                    <span class="text-muted d-block">Apartment</span>
                    <span class="text-primary d-block h3 m-0">100,000 USD</span>
                    <span class="text-light d-block">Location of the property</span>
                </div>
            </div>
        </div>
    </div>
</section>

Copy code below for new properties layout styles to "theme_yourhome/static/src/scss/styles.scss".

Go to browser and refresh homepage.

Create Property Agents Layout

Copy the code below in homepage.xml for Property Agents layout.

custom-addons/theme_yourhome/views/homepage.xml

xml

<section class="property-agents">
    <div class="container">
        <div class="text-center py-5">
            <h2 class="h1">Property Agents</h2>
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for <br/>
                previewing layouts and visual mockups.</p>
        </div>

        <div class="d-flex justify-content-center pb-5">
            <div class="mx-5 text-center">
                <div class="agent-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/agent1.png"/>
                </div>
                <h5 class="mb-0 mt-3">Agent Name</h5>
                <div>Company name</div>
            </div>
            <div class="mx-5 text-center">
                <div class="agent-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/agent2.png"/>
                </div>
                <h5 class="mb-0 mt-3">Agent Name</h5>
                <div>Company name</div>
            </div>
            <div class="mx-5 text-center">
                <div class="agent-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/agent3.png"/>
                </div>
                <h5 class="mb-0 mt-3">Agent Name</h5>
                <div>Company name</div>
            </div>
            <div class="mx-5 text-center">
                <div class="agent-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/agent4.png"/>
                </div>
                <h5 class="mb-0 mt-3">Agent Name</h5>
                <div>Company name</div>
            </div>
            <div class="mx-5 text-center">
                <div class="agent-img-container rounded">
                    <img class="object-fit rounded" src="/theme_yourhome/static/src/img/agent5.png"/>
                </div>
                <h5 class="mb-0 mt-3">Agent Name</h5>
                <div>Company name</div>
            </div>
        </div>
    </div>
</section>

Add property agents styles below:

Go to browser and refresh the page.

Create Contact Form Layout

For the homepage contact form layout copy code below in homepage.xml.

custom-addons/theme_yourhome/views/homepage.xml

xml

<section class="s_cover parallax bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
    <span class="s_parallax_bg oe_img_bg" style="background-image: url('/theme_yourhome/static/src/img/contact-bg.jpg');"/>
    <div class="container s_allow_columns">
        <div class="row">
            <div class="col-lg-6">
                <h2 class="h1">We help you find your <br class="d-none d-lg-block"/>new home</h2>
                <p class="pr-5">
                    Lorem ipsum is placeholder text commonly used in the graphic, 
                    print, and publishing industries for previewing layouts and visual mockups.</p>
                <p>
                    <a href="" class="btn btn-primary mb-2 mt-3 rounded-circle px-5 font-weight-medium">Learn More</a>
                </p>
            </div>
            <div class="col-lg-6 o_cc1 p-5 rounded">
                <form>
                    <div class="form-group">
                        <label for="name">Your name</label>
                        <input type="text" class="form-control" id="name"
                            placeholder="Eg. Alfer Jay"/>
                    </div>
                    <div class="form-group">
                        <label for="email">Your email</label>
                        <input type="email" class="form-control" id="email"
                            placeholder="Eg. youremail@ajfscript.com"/>
                    </div>
                    <div class="form-group">
                        <label for="number">Your number</label>
                        <input type="text" class="form-control" id="number"
                        placeholder="Eg. 0123456789"/>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 mt-3 font-weight-medium">Submit</button>
                </form>
            </div>
        </div>
    </div>
</section>