Standard Styles include our logo and aren't easily overridden with your custom CSS. Widgets come in a few flavors, depending on the options you are interested in. You can edit these options to get new code to embed by clicking the "Options" button underneath the widget code section. Widgets are available in three styles:
- Standard Style is our default widget. It includes some Action Network branding, like our logo and font styling.
- Layout Styles Only removes our banding, attempts to blend in with your website, and are easily overridden with your custom CSS.
- No Styles comes without any stylesheet at all, allowing you to completely customize the CSS for the widget.
Widgets also have two different layouts, each available in all three styles:
- Standard Layout is a bare-bones, default layout, including an action title, the form, and little else.
- Full Layout replicates our published page and includes the banner image, description, and the progress bar to count people who take action in addition to the title and form.
When integrating widgets into your website, we recommend starting with the layout styles only version and tweaking from there. Test your widgets and try each feature to ensure they work and look how you'd like them to look!
You'll want to ensure you are handling all possible widget states when you are setting up your custom CSS. Situations to test include:
- Non-recognized users (log out of your Action Network account and load your widget to see this version)
- Recognized users (log in to your Action Network account and load your widget to see this version)
- Partially or fully saved credit card information on fundraising and ticketed event widgets
- International users (click the "Not in the US?" link when viewing a non-recognized widget to see the dropdown for country)
- Validation errors (try filling out a form without entering required information)
- Thank you pages (fill out a form to see the thank you widget, unless you are using a custom redirect)
- Event and ticketed event thank you pages (the thank you widget for events has more features, including a map and discussion board)
- Event campaign blank search, events not found, and events found states
- Letter campaign targets not found and targets found (with potential extra fields to fill out) states
Note: You can style within the iframe on page wrappers for ticketed events and fundraisers hosted on Action Network. @import rules or stylesheets served from domains different from the one where your widget is embedded cannot be imported into the fundraising or ticketed event widget iframe widgets due to security restrictions. For our page wrappers, this means you should use <style> tags instead of linked stylesheets, unless you've uploaded the stylesheet to our files system to get a link on our domain.
Use Chrome's web inspector, Firebug in Firefox, Internet Explorer's developer tools, or similar tools to see the HTML code widgets generate that you can use as hooks for your custom CSS. Generally you should be able to create CSS for widgets once and use it on every widget going forward.
Click here for tips for customizing widgets or custom page wrappers with javascript.
Click here for CSS snippets you can use to customize your widgets and wrappers.