Skip to content

CSS Customization Guide

Matt LeBel edited this page Jul 19, 2013 · 47 revisions

Jump to-

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.

Chrome Inspect Element gif

Where do I place custom CSS?

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.

Paste your custom CSS in /admin/website under advance settings

Contribute button color

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;
}

Progress bar color

Campaign title font and color

Background color/ image

External link button

Hide an element

Still have questions? Want to show us what you built and get a Crowdtilt tshirt? Email us at team@crowdhoster.com.