Customizing widgets
You can customize widgets using the Control Center or custom CSS.
Customization with Control Center
You can use the CrowdTwist Control Center to customize the global colors of your widgets. Brand colors can be added for headers, buttons, links, and more.
To customize styles using the Control Center:
- In Control Center, navigate to Program > Widgets.
- Click Edit Styling.
- Click Edit to modify the standard widget colors:
- Header Color
- Header Text Color
- Button Color
- Button Text Color
- Link Color
- Points Color
- Click Save.
Customization with CSS
Standard widget creative can be easily modified using CSS. For changes beyond brand colors, you can write your own CSS to customize elements like colors, fonts, margins, and whether certain elements appear at all.
You can also customize widgets for tiers through CSS so the widgets appear differently depending on the tier of the member.
Things to keep in mind:
-
The custom CSS file must be hosted using an https:// link (NOT http://).
-
In order to override default CSS attributes, you may have to use the !important rule for particular attributes.
-
While some things can be hidden via CSS, the CSS will not allow for the addition, or change of any content in the widget as it stands today.
-
Some widgets have accompanying modals that overlay the screen. These modals can be customized by a separate CSS file.
-
When implementing the widgets on a web page, please note that the following:
-
Widget Height: dynamically calculated based on its content (no fixed pixel value).
-
Widget Width: spans the full length of its container. It is up to you to determine the dimensions of the container, which is where the widget would be dropped.
-
Responsive Design: The widgets have a responsive design, allowing for automatic adjustment to tablet and mobile resolutions.
-