How to override website_slides CSS?

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?

Solution

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%));
}