How to override website_slides CSS? - odoo

Question

I am using Odoo 13. I would like to change the background colour from purple to blue from a slide. website_slides is located in /src/odoo/addons/website_slides. I can't directly change /src/odoo/addons/website_slides/static/src/scss/website_slides.scss
I would like to override the following
.o_wslides_gradient {
background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
}
This is my first time using Odoo. I would like to change the colour so that it is always blue instead of changing it per slide I use. How would I write a custom module and add it to /src/user?

Answer 1

You need to inherit the website.assets_frontend template to include the new scss file.
First, create a module (you can check the Building a Module documentation), then:
Add website_slides module to the manifest depends list.
Inherit the website.assets_frontend template like following:
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_frontend" inherit_id="website.assets_frontend" name="Slides Frontend Assets">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/MODULE_NAME/static/src/scss/website_slides.scss" t-ignore="true"/>
</xpath>
</template>
</odoo>
Create an assets.xml XML file and add to it the above code then add it to the data list in the manifest file.
Create a scss file under static/src/scss/website_slides.scss and add the following scss code:
.o_wslides_gradient {
background-image: linear-gradient(120deg, #7C7BAD, darken(#7C7BAD, 10%));
}