It is common practice to make a Donate button stand out by giving it a different color on a web site. Is there an easy way to customize the color on just one of the supporter nav buttons?
The supporter nav buttons are designed for this purpose, as they usually stand out more than anything else on the site. However, if you have a custom theme, you can edit either layout.html or _nav.html and use CSS to float a donation link or button to the right of your nav. You can then use CSS to style it however you would like.
To change the color of just one button, change the div which surrounds it from “submit_link_huge” to something unique like “donate_button_red” and then copy the following code to your theme.scss file, changing the color hex code to whatever color you want (this will make it red):
.donate_button_red a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors(#d60101, darken(#d60101, 5), darken(#d60101, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }
Juan Carlos Pineiro commented
2013-04-05 18:50:20 -0700
· Flag
Amy Leaman commented
2012-08-19 13:27:39 -0700
· Flag
Jesse Haff commented
2012-02-05 16:12:03 -0800
· Flag
.donate_button_red a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors(#d60101, darken(#d60101, 5), darken(#d60101, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }
Michael Kahlow commented
2012-02-05 08:46:53 -0800
· Flag
Putting the button in the supporter nav is not terribly useful. We’ve got a lot of people who will not want to “sign in” and give information. We want to get them to the donate page quickly and clearly, with a minimum number of clicks.
It would be useful if we could get a piece of code that started with
(if the button is = ‘donate’ or some other slug, then)
(here’s the code to change that button)
If you can include the code to make that button sit on the right side of the top nav instead of put with all of the others, that would be even better.
Adriel Hampton commented
2011-11-14 12:42:55 -0800
· Flag
.submit-button-huge, .submit_link_huge a {
@include fancy-button-structure(1.3em, 3px, 1px);
@include fancy-button-colors($theme_color_1, darken($theme_color_1, 5), darken($theme_color_1, 10));
width: 100%;
padding-right: 0px;
padding-left: 0px;
text-align: center;
line-height: 2.4em;
&:hover { text-decoration: none; color: white; } }
Adriel Hampton commented
2011-11-14 11:42:40 -0800
· Flag
http://richiroutreach.com/blog/customizing-nationbuilder-sidebars
http://richiroutreach.com/blog/advanced-customization-nationbuilder-sidebars
Peter Brown commented
2011-11-14 11:23:08 -0800
· Flag
Jesse Haff responded
2011-10-27 08:26:11 -0700
It is common practice to make a Donate button stand out by giving it a different color on a web site. Â Is there an easy way to customize the color on just one of the supporter nav buttons?
