A fresh, functional, versatile, and mobile-friendly theme built on Bootstrap 4. Use it for your organization’s flagship website, a single-page microsite, and everything in between. (See a demo.)
Features
Built to work with many of Bootstrap 4’s native components & utilities
Fully responsive, and designed to look and work great on devices of all sizes. Compatible with Google Fonts.
Create an engaging homepage with full-width, modular homepage sections and featured content sliders
Action forms included in sidebars for petition pages, endorsement pages, signup pages, and more
Fixed navigation menu that stays with you as you scroll
More intuitive UI design for nearby event search, user generated events, suggestion box pages, and more
New profile card design for directory pages, leaderboard pages, public profiles, and more
New expanding & collapsing accordion design for FAQ pages
Images and sizing
Featured content sliders
The recommended image dimensions for featured content sliders are 1440px wide by 500px tall.
Note that on different screen sizes your image may be “cropped” due to the responsive nature of the theme, so we recommend against using images that contain text as part of the image itself. You can add overlay text using the “Headline / Action text” field.
Any text that you enter after a “
|” character in the “Headline / Action text” field will be used as button textIf you set the “Page to feature” field to point to the same page that the featured content slider is on, that slide will not be clickable. If it points to another page it will be clickable.
If a page tagged with
homepagehas a featured content slider, that slider will appear as a full-width section on the homepage above the section with the content for that page. If that page has no content but is still tagged withhomepage, then the slider will appear on it’s own on the homepage.
Logo
Ideal logo is horizontal
No small print
Ideal size 250 x 150px
May require some edits to the template see instructions here.
Homepage background image
The background image for the first section of the homepage pulls the image uploaded to Site settings > Background image
Recommended minimum width for this image is 1440px wide
Recommended height will vary, as the height of the first section of your homepage will depend on the content added to it.
Note an overlay will automatically be added to your image to help ensure any overlay text is legible.
Header image for other pages
The background image for the header section of other pages on your site pulls the image uploaded to Site settings > Header image
Recommended dimensions for this image are 1440px wide by 250px tall
Note an overlay will automatically be added to your image to help ensure any overlay text is legible.
Blog post & event card background image
Add a custom background image to blog post and event cards by uploading an image with the name “thumbnail” to the Files tab for that blog post or event page. Note that it can be either a
.jpgor.pngfile.Recommended image dimensions ate 700px wide by 920px tall
If no thumbnail image is uploaded the page thumbnail image uploaded under the Settings > Social media tab will be used instead. Note that this is also the image that will appear in the page preview when shared on Facebook & Twitter
Navigation for this theme
Supporter navigation (supporter nav)
To view the supporter nav, a user must be logged in. When they are logged in, clicking the profile icon in the top right corner of the nav menu will display the supporter nav.
Any page with the “Include in supporter nav” option checked will show up as a button in the supporter nav.
The user’s profile image, social capital score, and point person will also display in the supporter nav, as well as links to their public profile (if enabled), account settings page, and a link to log out
Note that the three site buttons found under Supporter nav > Buttons are not used in this theme.
Page sidebars
When the sidebar is turned on for these page types, the form will appear in the sidebar, otherwise the form appears below the main body of content: Petition, Signup, Endorsement, Volunteer Signup, and Event. Page sidebars are only available for these page types.
Turning the page sidebar on or off for other page types will not change the layout.
Website Page tags for this theme
Homepage tags
Tag your homepage with any of these tags to enable/disable the described feature:
site: disable sticky nav- turns off the sticky nav feature (nav will remain fixed at the top of the page)site: hide like page- hides the social sharing options at the bottom of some pages (site-wide)
Other page tags
Tag any page with any of these tags to enable/disable the described feature:
homepage- adds the tagged page as a modular section on the homepage.nav button- Will turn top nav link into a button and move it to the far right. Note “include in top nav” must still be checked.hide like page- hides the social sharing options at the bottom of the pagesitemap- adds a sitemap to the page. Works on basic pages only
Split fields for Addresses in this theme
This theme uses the "one field" address box, which is not ideal if you are located out of the USA. If you are located outside of the USA, you should follow these instructions to split the default single address field into separate fields, as provided in this article. Reach out to [email protected] for support.
Basic Customizations
Change primary colors on Raise Theme
Four main colors are used in the Raise theme.
With a little work, these colors can be changed so the website fits your branding needs. This HOWTO doc will walk you through how to change these four colors. If you need to change other colors that are shown in your theme, please consider working with one of our ecosystem partners, that level of customization is out of the scope of what our support team can help with.
Before you start, make sure you've already selected your color palette. You can use a tool like Canva Palette Generator. Learn about how the colors are used below. These can be viewed in a working demo website here.
Primary
Is the color used for the “buttons” of the website, so this color should be bright, it will be used as the color for all of the buttons on action pages.
Color 1
By default this color is set to be the same as your primary color, but you can change it. If you have a “Donate” button, it will appear in this color and stand out on your top navigation.
Color 2
This is the color that becomes the backdrop of your menu when someone hovers over a menu item.
Color 3
This color is the one that is used the most of all the colors. It should be a dark color. The default color for the font of your top navigation menu and the background color of the footer, homepage excerpt background panels. It is also the default page headline color.
This is the color palette I have chosen for my website. I've got Color 3 as the darkest color, the primary and color 1 are the highlight shade, and color 2 is more of a neutral that looks good with white text over the top of it. If you stick to those principles, you won't need to dive any deeper into code.
To make the change. I need to follow these three easy steps
Create a custom template
Open file and replace color codes
Save changes
Step 1: Create a new theme
To create a custom website theme, sign in to your nation's control panel and click Websites > Theme. This will display thumbnails of all public themes. You can also browse all free public themes in the theme gallery. For this HOWTO guide please select the “Raise” theme and then choose “Click New custom theme”.
Give your theme a name, and leave Clone your current theme and Switch site to your new site immediately selected.
Click Create theme.
When the theme is done cloning, you will land on the templates page of your new custom theme that looks like this.
Step 2: Open theme.scss file and make color hex changes
On lines 2 - 5 you will see the list of colors and their corresponding hex codes. Copy/paste your color hex codes on the corresponding line. Please be aware that Color 3 is the main color for the font used in your top navigation, and the background color for the panels. It should be a dark color, the highlight color could be Primary or Color 1 or Color 2. Please see above for explanation of each.
If you need to restart, there is a button at the bottom of the template that says “Restore default template”. That will restore the template to its original and you can start again.
Step 3: Save changes and check your work
Click “Save and Publish Changes” button at the bottom of the page. Check out your website to see the changes. If you need to come back to edit the colors again, just come back to the theme.scss template and make those changes on the corresponding rows
All done!
Voila! You should now have a website with your brand's colors! For reference here is the website showing the changes made in this HOWTO doc.
If you need help, please email [email protected]. Note that our Support team may recommend you work with one of our ecosystem partners if the customizations you are trying to make are outside of the scope of the technical advice they can provide.
Change Logo size, Raise theme
Depending on your logo, the space available might make your logo too small. You can make a couple of edits to allow more space in this area. Please note that making this space larger will increase the size of your top navigation, making the logo space too large the Top Navigation tiles and Donate button will appear too small.
Ideal logo specifications:
Horizontal logo
No small print
Ideal size 250 x 150px
To make the change, sign in to your nation's control panel and click Websites > Theme > Files > variables.scss, scroll to line 687 &688
The dimensions for the logo of this theme are set in _variables.scss, lines 687 & 688
For most logos, a good size for width is 17rem, and for height, 6 or 7rem. If the logo has small lettering included, you can try 20rem width and 8rem height.
Note: The Larger this logo is made, the more the Top Nav will expand. If it is too large, the Top Nav page titles and the Donate-button appear too small, and it doesn’t look great.
If you need help, please reach out to [email protected]. Note that our Support team may recommend you work with one of our ecosystem partners if the customizations you are trying to make are outside of the scope of the technical advice they can provide.