How to Style Content Inside an Odoo Embed Code Block

To style content inside an Odoo Embed Code block, open the page editor, click the Embed Code block, then select the Style tab in the right panel. From there you can adjust padding, margin, borders, background color, and visibility settings without writing CSS. For deeper customization, wrap your embed code in a <div class="your-class"> and add matching CSS rules in the website's Custom Code area under Website → Configuration → Custom Code, or place a <style> block directly inside the embed snippet.

What the Embed Code block actually does

The Embed Code block is an Inner Content building block that lets you paste raw HTML, CSS, and JavaScript into any page. It does not sanitize or sandbox your snippet, so whatever you paste runs in the page context. That means your styles can affect the embed, and the embed's styles can leak out to the rest of the page if you are not careful.

Odoo 17 and later surface a Style tab for every block, including Embed Code. The tab exposes the same layout and design controls you get on structure blocks: spacing, borders, background, box shadow, and responsive visibility. Those controls write inline styles on the block's wrapper element, so they apply to the container, not to the inner markup you pasted.

Prerequisites before you start styling

• Editor access on the target website (Website → Edit).
• An Embed Code block already placed on the page (drag it from Dynamic Content in the Blocks panel).
• The third-party snippet or custom markup you want to style, copied and ready to paste.
• Basic familiarity with CSS selectors if you plan to write custom rules.

Step-by-step: styling with the built-in Style tab

1. Open the page in edit mode and click the Embed Code block. The right panel switches to that block's settings.
2. Select the Style tab at the top of the panel.
3. Adjust Spacing (padding and margin) to create breathing room around the embed.
4. Set a Background color or image if the embed has transparent areas.
5. Add a Border and Border Radius to frame the embed visually.
6. Use Box Shadow for depth.
7. Open Visibility and toggle Hide on Desktop, Hide on Mobile, or both if the embed should only appear on certain devices.
8. Click Save in the top-right corner of the editor.

These changes are stored on the block instance, so they survive theme updates and do not require a developer.

Step-by-step: adding custom CSS via the website Custom Code area

1. In the website editor, open the Website menu (top-left) and choose Configuration → Custom Code.
2. In the Head or Body tab, paste your CSS rules wrapped in <style> tags.
3. Use a class selector that matches the wrapper you added inside the Embed Code block, for example:

   <style>
     .my-embed-wrapper iframe { width: 100%; height: 400px; border: none; }
     .my-embed-wrapper .cta-button { background: #0066cc; color: #fff; }
   </style>

4. Return to the Embed Code block, click Edit, and wrap your snippet:

   <div class="my-embed-wrapper">
     <!-- your third-party embed code here -->
   </div>

5. Click Save on the block, then Save on the page.

This approach keeps styles centralized, version-controlled in the Custom Code UI, and reusable across multiple embed blocks.

Step-by-step: inline <style> inside the embed block

1. Click the Embed Code block and choose Edit.
2. Paste a <style> block before your markup:

   <style>
     .widget-container { max-width: 600px; margin: 0 auto; font-family: inherit; }
     .widget-container .title { font-weight: 600; color: #1a1a1a; }
   </style>
   <div class="widget-container">
     <!-- embed markup -->
   </div>

3. Click Save.

Use this method for one-off embeds that will never be reused. It avoids a round-trip to the Custom Code screen but mixes presentation with content.

Expert perspective: when to choose which method

If you manage dozens of pages and want consistent framing for every third-party widget, put the layout rules (width, spacing, border) in the Style tab and the widget-specific typography or color overrides in Custom Code. The Style tab is faster for non-technical editors; Custom Code scales better for design systems. Inline <style> is a last resort for quick prototypes or embeds that live on a single page and will be removed soon.

A common mistake is targeting the embed's internal elements from the Style tab. The Style tab only styles the block's outer wrapper. To reach inside an iframe or shadow DOM you must use CSS injected via Custom Code or the embed provider's own theming options.

Key facts

Aspect	Detail
Block location	Dynamic Content section in Blocks panel
Edit entry point	Click block → Edit button in right panel
Style tab controls	Spacing, Background, Border, Box Shadow, Visibility
Custom Code location	Website → Configuration → Custom Code (Head or Body)
Visibility options	Hide on Desktop, Hide on Mobile
Save workflow	Save block, then Save page

Limitations and gotchas

• Iframe isolation: Styles defined outside an iframe cannot penetrate it. The embed provider must expose theming parameters or allow CSS injection.
• Style leakage: Unscoped CSS in Custom Code or inline <style> can affect unrelated page elements. Always namespace your classes (e.g., .seatext-embed- prefix).
• Theme updates: Inline styles on the block wrapper persist, but Custom Code CSS is theme-agnostic and survives theme changes.
• Performance: Large <style> blocks on many pages increase DOM size. Prefer the centralized Custom Code area.
• Editor preview: The Odoo editor may not render third-party scripts fully. Always publish and view the live page to verify.

Verification checklist

1. Publish the page.
2. Open the live URL in an incognito window.
3. Inspect the embed wrapper in DevTools: confirm your custom class is present and your CSS rules apply.
4. Test responsive behavior at mobile, tablet, and desktop breakpoints.
5. Check that Hide on Desktop/Mobile toggles work as expected.
6. Validate no console errors from the embed script.

Terminology quick reference

• Embed Code block: Inner Content building block that accepts raw HTML/CSS/JS.
• Style tab: Per-block visual controls for spacing, background, border, shadow, visibility.
• Custom Code: Site-wide CSS/JS injection point under Website → Configuration.
• Dynamic Content: Blocks panel category containing Embed Code, Form, and other interactive snippets.
• Visibility section: Responsive display toggles in the Style tab.

FAQ

Can I use SCSS or Less in the Custom Code area?

No. Odoo's Custom Code field accepts plain CSS only. Compile your preprocessor output locally and paste the resulting CSS.

Why do my Style tab changes not affect the embed's inner text?

The Style tab targets the block's wrapper element. Inner content lives inside your markup or an iframe, so you must style it with custom CSS that matches your wrapper class.

How do I center an embed horizontally?

In the Style tab set left and right margin to auto, or add .my-wrapper { margin: 0 auto; max-width: 800px; } in Custom Code.

Can I animate the embed entrance?

Yes. Add a CSS animation on your wrapper class in Custom Code. Keep it subtle; heavy animations hurt CLS scores.

What if the embed provider loads its own stylesheet that conflicts with mine?

Increase specificity (e.g., .my-wrapper .provider-class) or use !important sparingly. If the embed loads inside an iframe, you cannot override its internal styles from the parent page.

Does the Embed Code block sanitize scripts?

No. Odoo does not strip <script> tags. Only paste code you trust.

Can I reuse a styled embed across multiple pages?

Save the block as a custom building block (click the block → Save as custom block). The saved block retains Style tab settings and inner markup.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

• Building blocks — Odoo 19.0 documentation
• How I can Embed HTML, CSS, JS in Odoo website? | Odoo
• Building blocks — Odoo master documentation

How SEATEXT AI can help

SEATEXT AI installs through the same Embed Code block you just styled. Paste the SEATEXT JavaScript snippet into an Embed Code block, use the Style tab to hide it on desktop if you only want mobile personalization, and add a custom class in Custom Code to scope any visual tweaks. The AI then rewrites headlines, CTAs, and product copy in real time without further code changes. You need a SEATEXT account and a valid domain (localhost and dynamic dev domains are restricted). Each domain requires its own account.