centersl/odoo-docs
1
0
Fork 0
mirror of https://github.com/odoo/documentation.git synced 2026-03-26 13:59:55 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] howtos/website_themes: Adapts "Gradients" chapter

Browse Source 
- Improve code blocks display
- Adapt the files structure

closes odoo/documentation#16724

Signed-off-by: Brandon Mercier (bram) <bram@odoo.com>
This commit is contained in:
Brandon Mercier
2026-03-06 11:32:13 +01:00
parent 6a5874f14f
commit 19f02f16e4
1 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
content/developer/howtos/website_themes/gradients.rst
View File

@@ -19,16 +19,24 @@ custom themes, gradients have to be added directly in the `section` tag with a `
.. code-block:: xml
<section class="s_text_image" data-snippet="s_text_image" data-name="Text - Image" style="background-image: linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%) !important;">
<!-- Content -->
</section>
<section
class="s_text_image"
data-snippet="s_text_image"
data-name="Text - Image"
style="background-image: linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%) !important;">
<!-- Content -->
</section>
To apply a gradient to text, use a `font` tag with the `text-gradient` class.
.. code-block:: xml
<h2>
<font class="text-gradient" style="background-image: linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%);">A Section Subtitle</font>
<font
class="text-gradient"
style="background-image: linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%);">
A Section Subtitle
</font>
</h2>
.. _website_themes/gradients/custom:
@@ -40,34 +48,34 @@ Add a custom gradient to the Website Builder. This way, the user can easily use
manually recreating them.
.. code-block:: javascript
:caption: ``/website_airproof/static/src/builder/airproof_gradients.js``
:caption: ``/website_airproof/static/src/website_builder/gradients.js``
import { ColorPickerGradientTab } from "@html_editor/main/font/color_picker_gradient_tab";
import { registry } from "@web/core/registry";
import { _t } from "@web/core/l10n/translation";
import { ColorPickerGradientTab } from "@html_editor/main/font/color_picker_gradient_tab";
import { registry } from "@web/core/registry";
import { _t } from "@web/core/l10n/translation";
export class AirproofColorPickerGradientTab extends ColorPickerGradientTab {
setup() {
super.setup();
this.DEFAULT_GRADIENT_COLORS = [
...this.DEFAULT_GRADIENT_COLORS,
"linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)",
];
}
}
export class AirproofColorPickerGradientTab extends ColorPickerGradientTab {
setup() {
super.setup();
this.DEFAULT_GRADIENT_COLORS = [
...this.DEFAULT_GRADIENT_COLORS,
"linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)",
];
}
}
const colorPickerTabs = registry.category("color_picker_tabs");
const colorPickerTabs = registry.category("color_picker_tabs");
colorPickerTabs.remove("html_editor.gradient");
colorPickerTabs.add(
"html_editor.gradient",
{
id: "gradient",
name: _t("Gradient"),
component: AirproofColorPickerGradientTab,
},
{ sequence: 60 }
);
colorPickerTabs.remove("html_editor.gradient");
colorPickerTabs.add(
"html_editor.gradient",
{
id: "gradient",
name: _t("Gradient"),
component: AirproofColorPickerGradientTab,
},
{ sequence: 60 }
);
.. note::