Custom CSS Styles with the Bootstrap Theme Roller
What is Bootstrap Theme Roller?
The Bootstrap Theme Roller is a Free Open Source utility developed by Twitter that allows you to create website styles that can be reused across different websites or within your own website. The Bootstrap Theme Roller provides a basic user interface that allows a designer with little coding experience to create advanced CSS styles for their website.
The Bootstrap Theme Roller Basic Interface
|Bootstrap Theme Roller Basic Settings|
|Base Shades||The Base shades consists of the basic colors the site will use. You can set any color you want for each field. For example, the Yellow field by default has #ffc40d for the base shadow yellow. You can select a different yellow for this to make your site have a specific type of yellow.|
|Body and Fonts||The Body and Fonts are the base settings for what the Background, Link color, Text color, Heading color, Header border, Font Size, Line Height, Heading Weight, Font Family, and the Heading Font Family. These are global settings that will effect the entire website look.|
|Forms & Miscellaneous||The Form and Miscellaneous contains the settings to style input background, border, radius, Disabled button, Form Action Background, and HR (horizontal rule) Border. This only styles specific Form elements within your sit.|
Bootstrap Theme Roller Advanced Interface
The Advanced Settings allows you to add more styles to your site. These style consist od alerts, warnings, buttons, tables styles, and navigation styles. Below is a description of the options for the Advanced Settings.
|Bootstrap Theme Roller Advanced Settings|
|Buttons||Bootstrap has default buttons. They are the Info, Success, Danger, Inverse, Warning, and Default buttons. These buttons can be styles to your specific color needs to create different styles of buttons.|
|Form States and Alerts||The Form states and Alerts are the styles of the pop up boxes you would get if your processed a form and there was an error or a dialogue box. The4 types of dialogue boxes are the Warning, Error, Success, and Info pop ups. You can create custom error styles in this section.|
|Table Settings||You can style your tables to have a better look for your tabular data. The table Background, Accent, Hover, and Border can be set here.|
|Navbar||This is a nice feature that is built into Bootstrap. The Navbar Settings allow you to customize your navigation bar at the top of your site. You can change the Height, Background, Highlight, Text color, Link (hover, Active and default) color, Link Background colors, search style, placeholder, and Brand Color (Color of the Website title in the navbar).|
|Dropdown||This styles the look of the drop down menu. The Background, Link and Link hover can be changed here for your dropdown menu.|
Custom Bootstrap CSS Styles
Once you have your styles set for your Bootstrap Theme Roller theme, you can see the changes while you are building the site. This allows you to get an idea of what the styles will look like when you apply them to your Responsive Web Template.
When you extract the bootstrap.rar file, you will see the img, js, and css folders with the necessary files for the Bootstrap to be incorporated into your website. (See image to the right) Now that you have the styles you want for your website, we can now move forward to incorporate the CSS styles into your website design.
‹Section 7: Styling a Responsive Template with jQuery Theme Roller
›Section 9: Adding the Bootstrap files to your Responsive Template
Creating Responsive Templates
Introduction to Responsive Web Design
|1.||Introduction: Creating a Responsive Web Design|
Creating a Custom Responsive Template
|2.||Step 1: Adding HTML to the Responsive Template|
|3.||Step 2: Adding CSS styles to a Responsive Template|
|4.||Step 3: Links to the stylesheets in Responsive Templates|
|5.||Step 4: Adding the Viewpoint Meta Tag to the Responsive Template|
Customize the look of your Responsive Template
|6.||Responsive template design with the jQuery Theme Roller|
|7.||Styling a Responsive Template with jQuery Theme Roller|
|8.||Custom CSS Styles with the Bootstrap Theme Roller|
|9.||Adding the Bootstrap files to your Responsive Template|
|10.||Adding the Bootstrap Menu Buttons to your Responsive Template|
|11.||Twitter Bootstrap Common classes and HTML styles|
Free Responsive Web Design Themes
|12.||Free Responsive Templates with jQuery Theme Roller styles|