CSS guide
Using CSS to customize the positioning and layout of Elements components
Most customization of the Elements is done within the Fundraise Up Dashboard. This CSS guide provides instructions and examples for customizing the layout of the Elements to better match your organization’s website. While you cannot use CSS to change the design of the Elements — except for the Stat Counter, which is detailed at the end of the guide — you can still achieve a consistent look by adjusting the layout.
Aligning components
By default, Elements are left-aligned. This alignment works for many layouts, but for fully-customized implementations, you can use CSS to align components.
Using a class (recommended)
The recommended approach to aligning Elements is to use a CSS class. This method is easily scalable and is better for performance than using inline styles.
In the example below, the CSS class, .fun-align—center, is used to center-align an Element. Because the Element is centered using a class, the class can be reused to align other components.
1<head>
2 <!-- Fundraise Up code is here -->
3 <style>
4 .fun-align--center {
5 text-align: center;
6 }
7 </style>
8</head>
9<body>
10 <div class="fun-align--center">
11 <a href="#XMNCFGSY" style="display: none"></a>
12 </div>
13</body>A CSS class, .fun-align—center, is used to align the Element component in this example.
Using inline styles
Where possible, you should use a CSS class to align Elements components, but in cases where you are not able to modify CSS rules for your website, you can use inline styles to align components.
Below, three Elements code snippets are shown. For “Example #1,” no inline styles are used, so the component will be left-aligned by default. For “Example #2” and “Example #3,” the inline styles, text-align:center; and text-align:right are used to align the Element.
1<head>
2 <!-- Fundraise Up code is here -->
3</head>
4<body>
5
6 <!-- Example #1: Standard alignment -->
7 <a href="#XMNCFGSY" style="display: none"></a>
8
9 <!-- Example #2: Center-aligned -->
10 <div style="text-align:center;">
11 <a href="#XMNCFGSY" style="display: none"></a>
12 </div>
13
14 <!-- Example #3: Right-aligned -->
15 <div style="text-align:right;">
16 <a href="#XMNCFGSY" style="display: none"></a>
17 </div>
18
19</body>Inline styles like text-align:center; are used to align the Element in this example.
Constraining container width
Elements are responsive, and their appearance will automatically adjust based on screen size. You can take advantage of this responsive behavior to fit your website’s various layouts.
In the example below, an Elements component is wrapped in a <div> that has the class .sidebar. This class includes a rule that sets the container’s maximum width to 300px. Based on this constraint, the appearance of the Elements component will be modified to fit the container’s width.
1<head>
2 <!-- Fundraise Up code is here -->
3 <style>
4 .sidebar {
5 max-width: 300px;
6 }
7 </style>
8</head>
9<body>
10 <div class="sidebar">
11 <!-- Elements component code -->
12 <a href="#XMNCFGSY" style="display: none"></a>
13 <!-- end Elements component code -->
14 </div>
15</body>Since Elements are responsive, their appearance will automatically adapt to the size of the container they’re placed in.
Styling Stat Counter
The Stat Counter component is unique in that it is rendered as plain text on your website. This enables advanced customization of Stat Counter’s appearance.