-
Notifications
You must be signed in to change notification settings - Fork 312
CSS Customization Guide
Matt LeBel edited this page Jul 19, 2013
·
47 revisions
Jump to-
- Where do I place custom CSS?
- Contribute button color
- Progress bar color
- Campaign title font and color
- Background color/ image
- External link button
- Hide an element
Resources for identifying CSS hooks-
Inspecting elements is simple with Google Chrome -- just right click on the element you want to inspect and choose 'inspect element' from the menu.
Paste all custom CSS into the text field found at the bottom of the /admin/website edit page.
It is easiest to edit the CSS in a text editor and paste in the code once you're happy with it.
Replace every instance of #34495e in this code snippet with the hex color value of your choice to change the button color.
.blue_button {
display: inline-block;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.37);
-moz-box-shadow: 0 1px 1px rgba(255,255,255,0.92),inset 0 -1px rgba(0,0,0,0.22);
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.92),inset 0 -1px 1px rgba(0,0,0,0.22);
background-image: #34495e;
background-image: -moz-linear-gradient(90deg, #34495e 0%, #34495e 100%);
background-image: -o-linear-gradient(90deg, #34495e 0%, #34495e 100%);
background-image: -webkit-linear-gradient(90deg, #34495e 0%, #34495e 100%);
background-image: linear-gradient(90deg, #34495e 0%, #34495e 100%);
}
.blue_button:hover {
color: white;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22);
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22);
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22);
background-image: #34495e;
background-image: -moz-linear-gradient(90deg, #34495e 0%, #34495e 100%);
background-image: -o-linear-gradient(90deg, #34495e 0%, #34495e 100%);
background-image: -webkit-linear-gradient(90deg, #34495e 0%, #34495e 100%);
background-image: linear-gradient(90deg, #34495e 0%, #34495e 100%);
text-decoration: none;
}
Still have questions? Want to show us what you built and get a Crowdtilt tshirt? Email us at team@crowdhoster.com.