CSS guide
Using CSS to customize the positioning and layout of Elements components
Nearly all customizations to Elements are made within the Fundraise Up Dashboard, but for advanced implementation techniques, refer to this CSS guide, which includes instructions and examples for how to further customize components to match the design and layout of your organization’s website.
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.