post: Extending Predefined Bootstrap Colours

Home

Additional colours for bootstrap components

Extending Bootstrap CSS

  

Articles

Bootstrap CSS WordPress

Innovative fonts, typography, and thoughtful templating with contemporary palettes & colours can be the difference in making any site immediately stand out – essential for the attention deficit voyeurs of the web! Sites like fontsquirrel and colorlovers an be great places for inspiration.

The Bootstrap css framework is also something I’ve spent a great deal of time digging into. Bootstrap comes with a set of 4 predefined named colours: success, info, warning, and danger. There are 7 if you include: default, primary, and secondary. On top of this you can set colours for text & backgrounds as normal with standard hex values.

Changing the whole theme of bootstrap can be done relatively simply. Tools such as LavishBootstrap can do this for you. The core bootstrap site also has a lot of information. Less and mixins can be used to automate this process. None that I know of however allow you – or give you the option – to extend the core bootstrap ‘flavours’ other then redefine the predefined ones.

It’s a bit limiting. In a few developments I’ve created an additional stylesheet: bootstrap-colors.css (using the standard css way of naming it) to add extra colour options for all the bootstrap components. I’ll show you the basics of how to do this, and detail how to integrate it into your bootstrap-based WordPress site.

Many of the components of the bootstrap css framework use colour attributes based on the predefined set e.g. ‘alert-success’ & ‘btn-success’. The bootstrap-colors.css styles also add these attributes based on the extra descriptors e.g. ‘alert-lavender’. The extra css will also work with common bootstrap component shortcodes e.g. when using the bootstrap-3-components plugin, so extending the parameters with the new flavours should work with no problems.

Breaking down the css for one of the predefined colours : ‘success’ we can see how the basic styling is constructed:


/** Text & Link **/
.text-success { color: #3c763d; }
a.text-success:hover { color: #2b542c; }
.bg-success { background-color: #dff0d8; }
a.bg-success:hover { background-color: #c1e2b3; }

/** Table **/
.table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success { background-color: #dff0d8; }
.table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { background-color: #dff0d8; }
.table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr.success:hover > th { background-color: #d0e9c6; }

/** Button **/
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { color: #fff; background-color: #449d44; border-color: #398439; }
.btn-success:active, .btn-success.active { background-image: none; }

.open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; }
.open > .dropdown-toggle.btn-success { background-image: none; }

.btn-success.disabled, .btn-success[disabled] { background-color: #5cb85c; border-color: #4cae4c; }
.btn-success.disabled:hover, .btn-success[disabled]:hover { background-color: #5cb85c; border-color: #4cae4c; }
.btn-success.disabled:focus, .btn-success[disabled]:focus { background-color: #5cb85c; border-color: #4cae4c; }
.btn-success.disabled:active, .btn-success[disabled]:active { background-color: #5cb85c; border-color: #4cae4c; }
.btn-success.disabled.active, .btn-success[disabled].active { background-color: #5cb85c; border-color: #4cae4c; }

fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active  { background-color: #5cb85c; border-color: #4cae4c; }

.btn-success .badge { color: #5cb85c; background-color: #fff; }

/** Label **/
.label-success { background-color: #5cb85c; }
.label-success[href]:hover, .label-success[href]:focus { background-color: #449d44; }

/** Alert **/
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-success hr { border-top-color: #c9e2b3; }
.alert-success .alert-link { color: #2b542c; }

/** Progress Bar **/
.progress-bar-success { background-color: #5cb85c; }
.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

/** List Group **/
.list-group-item-success { color: #3c763d; background-color: #dff0d8; }
a.list-group-item-success { color: #3c763d; }
a.list-group-item-success .list-group-item-heading { color: inherit; }
a.list-group-item-success:hover, a.list-group-item-success:focus { color: #3c763d; background-color: #d0e9c6; }
a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus { color: #fff; background-color: #3c763d; border-color: #3c763d; }

/** Panel **/
.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-success > .panel-heading + .panel-collapse > .panel-body { border-top-color: #d6e9c6; }
.panel-success > .panel-heading .badge { color: #dff0d8; background-color: #3c763d; }
.panel-success > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #d6e9c6; }

Looking at this it’s not quite as simple as a general font colour, background-color, and border color. The ‘success’ scheme defines 11+ colors across font, background & border. In those however is a general theme based around 4 colours: 2 font colours and 2 background colours. In addition not all the definitions will be used depending on the overall theme styling. For example a flat theme would dispense with the borders and drop shadow, or merge then with the background, minimalising the css. The theme may also define extra css for the predefined colours for custom components or css. For example the current theme’s style override:


.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success { background-color: #00a651; color: #fff; }

.btn-success, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { background-color: #8cc152; border-color: #8cc152; }
.btn-success:hover, .btn-success:focus { background-color: #a0d468;  border-color: #a0d468; }
.open .dropdown-toggle.btn-success { background-color: #a0d468; border-color: #a0d468; }

.btn-group .btn-success, .btn-group .btn-success:focus, .btn-group .btn-success:active, .btn-group .btn-success.active { border-left-color: #7ab03f; }
.btn-group .btn:first-child, .btn-group .btn-primary:first-child, .btn-group .btn-success:first-child, .btn-group .btn-warning:first-child, .btn-group .btn-danger:first-child, .btn-group .btn-info:first-child { border-left-color: transparent; }
.btn-group-vertical .btn-success, .btn-group-vertical .btn-success:focus, .btn-group-vertical .btn-success:active, .btn-group-vertical .btn-success.active, .btn-group-vertical .btn-group .btn-success { border-top-color: #7ab03f !important; }
.btn-group-vertical .btn:not(.btn-default):first-child, .btn-group-vertical .btn-primary:first-child, .btn-group-vertical .btn-success:first-child, .btn-group-vertical .btn-warning:first-child, .btn-group-vertical .btn-danger:first-child, .btn-group-vertical .btn-info:first-child { border-top: none; }

.label-success, .badge-success { background-color: #8cc152; border-color: #8cc152; }
.progress-bar-success { background-color: #8cc152; }
.input-group-btn .btn + .btn.btn-success { border-color: #7ab03f; }
.alert-success { background-color: #b9df90; border: #a0d468; }

.list-group-item-success { color: #87c940; background-color: #a0d468; border-color: #8cc152 transparent transparent transparent; }
.list-group-item-success:first-child { border-color: transparent; }
a.list-group-item-success { color: #537f24; }
a.list-group-item-success:hover, a.list-group-item-success:focus { color: white; background-color: #8cc152; }
a.list-group-item-success.active, a.list-group-item-success:hover, a.list-group-item-success:focus { background-color: #8cc152; border-color: #a0d468 transparent transparent transparent; }

.panel-success > .panel-heading { color: white; background-color: #8cc152;}
.panel-success > .panel-heading > .panel-title { color: white;}

The number of colors has been reduced to 5: primary font & background, border & secondary font, link. So you can see, there is no drop-in or cut-n-paste solution. Instead some thought and a bit of work to be done to see what is required for the theme, and then translating to a new named colour based on the existing predefined colours and their use.

Once you have your new bootstrap-colors.css file integrating it depends on your framework. If it’s a standalone theme or framework that requires hardcoding css into the head then simply place the stylesheet directly below the bootstrap.css one (may be bootstrap.min.css if minimised).


<link rel='stylesheet' id='bootstrap-min'  href='http://path-to/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-colors'  href='http://path-to/bootstrap.colors.css' type='text/css' media='all' />

For a wordpress site then you can enqueue the new style into your theme and use the already defined bootstrap css file as a dependency so it is included after bootstrap.


function mytheme_bootstrap_styles {
  wp_register_style('bootstrap-min', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', array(), NULL); 
  wp_register_style('bootstrap-colors', get_stylesheet_directory_uri() . '/css/bootstrap.colors.css', array('bootstrap-min'), NULL); 
  wp_enqueue_style('bootstrap-min'); 
  wp_enqueue_style('bootstrap-colors'); 
}
add_action('wp_enqueue_scripts', 'mytheme_bootstrap_styles'); 

Hopefully this will give you a bit of an insight into bootstrap css, and how you can extend it.

comments powered by Disqus