CSS Customization Guide

Jump to-

• Where do I place custom CSS?
• Contribute button color
• Progress bar color
• Campaign title font and color
• Background color
• Hide an element
• Adding a custom header/banner

Resources for identifying CSS hooks-

• Google Chrome Developer Tools
• Mozilla Firefox Page Inspector
• Apple Safari Developer Resources

Inspecting elements is simple with Google Chrome:
Just right click on the element you want to inspect and choose 'inspect element' from the menu.

Resources for hex color values-

• FlatUIColors.com
• BrandColors.com
• Adobe Kuler (iPhone)

---

Where do I place custom CSS?

Paste all custom CSS into the text field found under the "Customize" tab in the admin panel.

It is easiest to edit the CSS in a text editor and paste in the code once you're happy with it.

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

Replace every instance of #1392dc in this code snippet with the hex color value of your choice to change the button color. This color should match the color selected for both Call To Action (aka "Contribute") buttons.

#campaign #funding_area #progress_bg #progress {
height: 40px;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59);
background-image: -moz-linear-gradient(90deg, #1392dc 0%, #069df4 100%);
background-image: -o-linear-gradient(90deg, #1392dc 0%, #069df4 100%);
background-image: -webkit-linear-gradient(90deg, #1392dc 0%, #069df4 100%);
background-image: linear-gradient(90deg, #1392dc 0%, #069df4 100%);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
min-width: 2%;
width: 100%;
max-width: 100%;
display: inline-block;
}

Campaign title font and color

Change font and size. Find font options in this MIT document.

#campaign #funding_area .campaign_title {
font-family: Helvetica;
font-size: 42px;
font-weight: bold;
letter-spacing: -.05em;
}

Change font color by replacing #323232 with the hex color value of your choice.

#campaign #funding_area .campaign_title a {
color: #323232;
text-decoration: none;
}

Background color

Change page background color by replacing #f6f6f6 with the hex color value of your choice.

#campaign #funding_area {
background: #f6f6f6;
}

Hide an element

Hide an element by adding display: none; under the selector of the element that you want to hide.

#campaign #funding_area #backing #backers {
display: none;
}

Adding a Custom Header/Banner

Add a custom header by replacing the value of background-image and height in the snippet below.

• Replace 'https://s3.amazonaws.com/crowdhoster/github_assets/header_example.png' with a URL to the image of your choice. Your image should be served over a secure connection (https).

• Replace 277px; with the height of your image.

#header {
    width: 100%;
    padding: 0px;
    position: relative;
    background-image: url('https://s3.amazonaws.com/crowdhoster/github_assets/header_example.png');
    background-repeat: no-repeat;
    background-position: center;
    height: 277px; /* height of the linked background image */
}

#header .container h1 {
    display: none;
}

---

Still have questions? Want to show us what you built and get a Tilt tshirt? Email us at [email protected].