frankbaele’s picture

if done correctly would explode the the theme possibilities

cweagans’s picture

Just wanted to crosslink #1839958: Provide theme setting for picking local bootstrap or hotlink from bootstrap CDN here - if the other issue gets done first, it'd be great to have hotlink-able bootswatch files here.

andregriffin’s picture

There is also BootTheme, which is quite a powerful tool.

I don't understand what you mean by "integrate". You simply replace a css/less file if you want to apply a particular style... Do you mean adding in a theme option to automatically select and apply a particular bootswatch?

frankbaele’s picture

Version: 7.x-2.x-dev » 7.x-3.x-dev
RobLoach’s picture

I just replaced the CSS in my own theme using the .info file, but it would be nice if this kind of interaction was handled in the UI. Will have to do some brainstorming.

markcarver’s picture

In theory, this wouldn't be too hard to implement if you were using the module and the sub-theme method I'd like to get implemented into this project: #1844448: Add sub-theme starter kit. My method would allow you to easily replace the sub-theme's variable file with that of BootSwatch or BootTheme and recompile (or flush caches if using the LESS module).

To expand further on the idea of integrating an import from BootSwatch or BootTheme, the method would be similar to how I did the importing of Fontello icons in the module. We would obviously have to create a module (like: bootstrap_ui) to handle all this and probably be dependent upon the LESS module to compile the variables. I know that there's an existing module, but that simply integrates a sites/all/libraries path, plus the namespace is wrong.

RobLoach’s picture

As a side note, I've put together a pre-built repository for Bootstrap at:

Would be nice to have one for the Bootswatch themes as well.

btopro’s picture

couldn't this also be accomplished by a very simple theme settings page setting that looks at a folder for the name of some files instead of assuming the default bootstrap? This would work similar to how Garland has the color slider but has pre-built color swatches (these would be bootstrap swatches).

Since these are all from this site the naming convention for selection could just be based on folder path. Proposed method of handling:

  • "Default" uses bootstrap theme files as it does currently.
  • format: swatches/{nameofswatch}/bootstrap.css which replaces the current bootstrap/bootstrap.css
  • example: swatch/amelia/bootstrap.css

Also, as these are all Apache 2.0, a make file could be created that would allow for essentially turning the current bootstrap theme into a multitude of "colorizable" themes out of the box (most importantly, the geo-cities theme).

I just used Cerulean yesterday and made a sub-theme off of bootstrap to implement it so I'd be happy to work on a patch so I don't have to do that in the future :)

btopro’s picture

I bundled these on github as sub-themes incase people want to try out bootswatch in drupal quickly --

giorgio79’s picture

Awesome btopro!! Thank you so much, will try right now.

Robin van Emden’s picture

Hey that's great - thanks btopro!

markcarver’s picture

Marked #2043023: I think that we should be able to choose CDN theme as a dup of this issue. Perhaps we can put a theme setting to switch Bootswatch themes via BootstrapCDN?

giorgio79’s picture

I've been playing with Bootswatch themes, and I see this Admin Menu issue #1431130: Incompatibility with Admin menu with them.

Also, the Navbar menu seems to be out of line with the Site Name on Bootswatch themes.

markcarver’s picture

Version: 7.x-3.x-dev » 8.x-2.x-dev
Status: Active » Postponed
Issue tags: +needs backport to 7.x-2.x, +needs backport to 7.x-3.x

I'm postponing this feature for now. We can backport to 7.x-2.x and 7.x-3.x later.

markcarver’s picture

Version: 8.x-2.x-dev » 7.x-3.x-dev
Status: Postponed » Active
Issue tags: -needs backport to 7.x-2.x, -needs backport to 7.x-3.x

We can implement this as a theme setting since BootstrapCDN offers these. Moving to 7.x-3.x.

valkum’s picture

Status: Active » Needs work
3.35 KB

Done some work.
i'm not sure is its the best way to get the bootswatch themes via drupal_http_request(), but via AJAX on client side there were validation erros, because form api does'nt allow options selected that are not in the initial options

More to go: on Select show the thumbnail below.

valkum’s picture

added the thumbnail functionality

markcarver’s picture

  1. +++ b/includes/
    @@ -281,7 +281,11 @@ function bootstrap_css_alter(&$css) {
       // Add Bootstrap CDN file and overrides.
       if (theme_get_setting('bootstrap_cdn')){
         // Add CDN.
    -    $cdn = '//'. theme_get_setting('bootstrap_cdn')  .'/css/bootstrap.min.css';
    +    if(theme_get_setting('bootstrap_bootswatch')) {
    +      $cdn = '//'. theme_get_setting('bootstrap_cdn')  .'/'.theme_get_setting('bootstrap_bootswatch_theme').'/bootstrap.min.css';
    +    } else {
    +      $cdn = '//'. theme_get_setting('bootstrap_cdn')  .'/css/bootstrap.min.css';
    +    }

    We're using theme_get_setting('bootstrap_cdn') a few times here now. Let's put this in a variable like $bootstrap_cdn.

  2. +++ b/includes/
    @@ -281,7 +281,11 @@ function bootstrap_css_alter(&$css) {
    diff --git a/js/bootswatch.admin.js b/js/bootswatch.admin.js
    diff --git a/js/bootswatch.admin.js b/js/bootswatch.admin.js
    new file mode 100644
    new file mode 100644
    index 0000000..7d971d0
    index 0000000..7d971d0
    --- /dev/null
    --- /dev/null
    +++ b/js/bootswatch.admin.js
    +++ b/js/bootswatch.admin.js
    +++ b/js/bootswatch.admin.js
    @@ -0,0 +1,20 @@
    @@ -0,0 +1,20 @@
    +(function ($) {
    +	Drupal.behaviors.exampleModule = {
    +		attach: function (context, settings) {
    +			$.get("", function (data) {;
    +				previews = '';
    +				$.each(data.themes, function(k, v){
    +					previews += '<div class="bootswatch-preview hidden" id="'+ +'"><p><a href="'+ v.preview +'"><img src="'+ v.thumbnail +'"></a></p></div>';
    +				});
    +				$('#bootswatch-previews').append(previews);
    +				$('select[name="bootstrap_bootswatch_theme"]').change(function(){
    +					$('.bootswatch-preview').addClass('hidden');
    +					var show = '#' + $('select[name="bootstrap_bootswatch_theme"] :selected').text();
    +					$(show).removeClass('hidden');
    +    		}).change();
    +			}, "json");
    +		}
    +	};
    \ No newline at end of file

    Please review Drupal's JavaScript and jQuery Coding Standards

  3. +++ b/theme-settings.php
    @@ -25,6 +25,33 @@ function bootstrap_form_system_theme_settings_alter(&$form, $form_state, $form_i
    +  $bootswatch_api = drupal_json_decode(drupal_http_request('')->data);

    PHP 5.2 and below do not support invoking adjacent methods or properties off of a function callback that returns a class or object (ie: function()->property). Let's separate this into a separate $request variable.

  4. +++ b/theme-settings.php
    @@ -25,6 +25,33 @@ function bootstrap_form_system_theme_settings_alter(&$form, $form_state, $form_i
    +  $form['bootstrap']['bootstrap_bootswatch'] = array(
    +    '#type' => 'checkbox',
    +    '#title' => t('Use Bootswatch to load a bootstrap theme.'),
    +    '#default_value' => theme_get_setting('bootstrap_bootswatch'),
    +    '#description' => t('Use Bootswatch to load a Bootstrap Theme from !bootstrapcdn ', array('!bootstrapcdn' => l('BootstrapCDN', '', array('external' => TRUE)))),
    +  );
    +  $form['bootstrap']['bootstrap_bootswatch_theme'] = array(
    +    '#type' => 'select',
    +    '#title' => t('Bootswatch Theme'),
    +    '#options' => $bootswatch_themes,
    +    '#default_value' => theme_get_setting('bootstrap_bootswatch_theme'),
    +    '#description' => t('Use !bootstrapcdn to serve a Bootswatch Theme. Choose Bootswatch Theme here.', array('!bootstrapcdn' => l('BootstrapCDN', '', array('external' => TRUE)))) . '<div id="bootswatch-previews"></div>',
    +    '#states' => array(
    +      'invisible' => array(
    +        ':input[name="bootstrap_bootswatch"]' => array('checked' => FALSE),
    +      ),
    +    ),
    +  );

    I don't think it's necessary to have a separate checkbox here. Let's do the same thing we did with the bootstrap_cdn variable and just make use of #empty_option here to determine when this is enabled.

markcarver’s picture

FYI, just committed b97dbd2 to 7.x-3.x, which is just some coding standards and verbiage cleanup on theme-settings.php. You'll need to re-roll this patch.

valkum’s picture

Status: Needs work » Needs review
3.41 KB


markcarver’s picture

Status: Needs review » Fixed

Thanks @valkum!

Committed d756c7b to 7.x-3.x.
Committed 7fc3b40 to 7.x-3.x.

wundo’s picture

Version: 7.x-3.x-dev » 7.x-2.x-dev
Status: Fixed » Patch (to be ported)

I'd suggest we backport this to 7.x-2x too

markcarver’s picture

Version: 7.x-2.x-dev » 7.x-3.x-dev
Status: Patch (to be ported) » Fixed

I'd rather not port feature requests. 2.x is now in bug fix mode only (since 3.x is now head).

markcarver’s picture

Version: 7.x-3.x-dev » 7.x-3.0-rc1
giorgio79’s picture

Bootswatch is a massive win for this project. You need to mention it on the frontpage :) with a link to bootswatch

markcarver’s picture

I've been updating the project page periodically, but my ultimate goal is to completely rewrite the project page to highlight all the features, not just this one, once a full 7.x-3.0 release is made.

I agree though, this is a huge win for this project :)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.