Opportunities Widget Theming via CSS Variables

Partners can fully customize the appearance of the Opportunities widget without forking code. Use custom attributes on the <legion-opportunities> element to pass values that map to CSS variables inside the widget iframe.

🎨 Visual Customizer

For an interactive customization experience with live preview, visit: /widgets/opportunities/customize

Quick Start

1<legion-opportunities 2 count="5" 3 layout="horizontal" 4 base-url="https://your-domain.com" 5 opp-panel-start="0.6" 6 opp-panel-mid="0.45" 7 opp-panel-end="0.25" 8 opp-panel-shadow="0 8px 28px rgba(0,0,0,.45)" 9 opp-title-size="clamp(18px, 3vmin, 40px)" 10 opp-title-color="#ffffff" 11 opp-description-size="clamp(13px, 1.8vmin, 20px)" 12 opp-expires-size="clamp(11px, 1.4vmin, 16px)" 13> 14</legion-opportunities>

Notes:

  • base-url should point to your Legion deployment domain.
  • If an attribute is omitted, sensible defaults are used.

Preset Themes

Use the theme attribute for quick preset styling:

ThemeDescription
lightDefault light theme
darkHigher contrast dark overlay
minimalSubtle overlay, no shadows
boldHigh contrast, larger typography
corporateProfessional, minimal animations
vibrantColored overlay with glow effects
<legion-opportunities theme="bold" count="5" base-url="https://your-domain.com"> </legion-opportunities>

Complete Attributes Reference

Core Attributes

AttributeTypeDefaultDescription
countnumber5Number of opportunities (1-20)
layoutstringhorizontal"horizontal" or "vertical"
tagsstring-Comma-separated filter tags
themestringlightPreset theme name
heightstringauto"auto", "100%", or specific px
base-urlstringcurrent originYour deployment URL
api-keystring-Optional API key

Panel Theming

AttributeCSS VariableDefaultDescription
opp-panel-start--opp-panel-start-alpha0.6Gradient start opacity (0-1)
opp-panel-mid--opp-panel-mid-alpha0.45Gradient mid opacity (0-1)
opp-panel-end--opp-panel-end-alpha0.25Gradient end opacity (0-1)
opp-panel-color--opp-panel-color0, 0, 0Panel RGB color
opp-panel-shadow--opp-panel-shadow0 8px 28px rgba(0,0,0,0.45)Panel box-shadow
opp-panel-blur--opp-panel-blur2pxBackdrop blur
opp-panel-radius--opp-panel-radius10pxPanel border radius

Card Theming

AttributeCSS VariableDefaultDescription
opp-card-radius--opp-card-radius12pxCard border radius
opp-card-shadow--opp-card-shadow0 10px 30px rgba(0,0,0,0.35)Card box-shadow
opp-card-border--opp-card-bordernoneCard border

Typography - Title

AttributeCSS VariableDefaultDescription
opp-title-size--opp-title-sizeclamp(18px, 2.6vmin, 36px)Font size
opp-title-color--opp-title-color#ffffffText color
opp-title-weight--opp-title-weight800Font weight
opp-title-shadow--opp-title-shadow0 3px 14px rgba(0,0,0,0.85)Text shadow
opp-title-font-family--opp-title-font-familyinheritFont family

Typography - Description

AttributeCSS VariableDefaultDescription
opp-description-size--opp-description-sizeclamp(13px, 1.8vmin, 19px)Font size
opp-description-color--opp-description-colorrgba(255,255,255,0.95)Text color
opp-description-shadow--opp-description-shadow0 2px 10px rgba(0,0,0,0.7)Text shadow

Typography - Expires

AttributeCSS VariableDefaultDescription
opp-expires-size--opp-expires-sizeclamp(11px, 1.4vmin, 15px)Font size
opp-expires-color--opp-expires-colorrgba(255,255,255,0.85)Text color
opp-expires-shadow--opp-expires-shadow0 1px 8px rgba(0,0,0,0.7)Text shadow

Animations

AttributeCSS VariableDefaultDescription
opp-transition-duration--opp-transition-duration0.3sAnimation speed
opp-animation-scale--opp-animation-scale1.02Hover scale (1 = none)

Visual Examples

Darker panel and bigger title:

1<legion-opportunities 2 count="3" 3 base-url="https://your-domain.com" 4 opp-panel-start="0.75" 5 opp-panel-mid="0.55" 6 opp-title-size="clamp(22px, 3.2vmin, 44px)" 7> 8</legion-opportunities>

Minimal panel with lighter shadow:

1<legion-opportunities 2 count="3" 3 base-url="https://your-domain.com" 4 opp-panel-start="0.4" 5 opp-panel-mid="0.3" 6 opp-panel-end="0.15" 7 opp-panel-shadow="0 6px 18px rgba(0,0,0,.3)" 8> 9</legion-opportunities>

Corporate theme with custom colors:

1<legion-opportunities 2 count="5" 3 base-url="https://your-domain.com" 4 opp-panel-color="30, 41, 59" 5 opp-panel-start="0.9" 6 opp-card-radius="4px" 7 opp-animation-scale="1" 8> 9</legion-opportunities>

WordPress Integration

Step 1: Add the Script (One Time)

Add this script to your theme's header.php or use a plugin like "Header Footer Code Manager":

<script src="https://your-domain.com/js/opportunities-widget.js"></script>

Step 2: Add the Widget

Gutenberg/Block Editor: Use a "Custom HTML" block and paste the widget code.

Classic Editor: Switch to "Text" mode (not Visual) and paste the code.

Elementor: Use the "HTML" widget and paste the complete embed code.

Widget Areas: Use a "Custom HTML" widget in your sidebar or footer.

Example for WordPress:

1<!-- Add to Custom HTML block or widget --> 2<legion-opportunities 3 count="5" 4 layout="horizontal" 5 base-url="https://your-domain.com" 6 theme="bold" 7> 8</legion-opportunities>

How it works

  1. The web component appends your attributes as query parameters to the widget iframe URL.
  2. The widget page reads those values and injects them as CSS variables on the root container.
  3. The Single Opportunity component uses those variables in its CSS to render the readability panel and text styles.

Tips

  • Use clamp() for sizes to keep text readable across different embed sizes.
  • Keep panel alpha values between 0.25–0.8 for best results over bright images.
  • If you use a very light host background, consider increasing shadows for more separation.
  • Use the visual customizer at /widgets/opportunities/customize for real-time preview.
  • For WordPress, add the script tag only once per page (in header or footer).

Troubleshooting

  • If styles don’t change, ensure attributes are set on the <legion-opportunities> element and you’re loading the latest widget bundle.
  • Confirm your base-url points to the right environment (staging vs production).
  • WordPress issues: Make sure you're in "Text/HTML" mode, not "Visual" mode when pasting code.
  • CORS errors: Ensure your domain is allowed in the widget's CORS configuration.
Documentation | Legion Hand Technologies