Web Design – Twitter Bootstrap Navbar Color Customization

Twitter Bootstrap Navbar Custom Coloring

Background
The Twitter opensource bootstrap tool set is amazing. Tools to customize and examples on usage are all posted on github along with all the source code.
For the specific task at hand, I wanted to change the default white/black color of the navbar. I spent more time than I expected searching the internet for easy to use and helpful examples.
In the end, I found two great tools that allowed color changes to be made in real-time and then packaged up and downloaded.
The steps will be in two main parts, picking colors and packaging.

Selecting Colors
The best tool I came across for picking a color and displaying the various shades, in order to properly shade the navbar, is at w3schools and called color picker. After selecting a color, I experimented with various darker and lighter shades.
The best tool I came across for applying colors and seeing the results on the Twitter Bootstrap navbar in real-time, is hosted on github, created by decioferreira and called bootstrap-generator. Being able to see the color changes in real-time was extremely helpful and saved a lot of time.

Packaging
Once the proper colors have been selected, Twitter provides a great customization tool that correctly packages up the changes. The customization tool is available on Github under Twitter’s bootstrap customization page.
After loading the color values into the navbar section of the customization page, at the bottom, press Customize and Download. I extracted the bootstrap.css and bootstrap.min.css from the .zip file and loaded these into my project.

Hope those tools and steps save some time and help in creating a custom color scheme for the Twitter bootstrap navbar!

Sidenote:
Will working on decioferreira’s real-time navbar tool, I found one small bug in the code incorrectly linking navbarLinkColorHover to navbarLinkBackgroundHover. I fixed the bug and sent a pull request. If his page hasn’t been updated yet, I still have the forked version with the bug fixed and working on my github – bootstrap generator.

Links:
Twitter Bootstrap: http://twitter.github.com/bootstrap
w3schools color picker: http://www.w3schools.com/tags/ref_colorpicker.asp
decioferreira bootstrap-generator: http://decioferreira.github.com/bootstrap-generators/
Twitter bootstrap customization page: http://twitter.github.com/bootstrap/customize.html