Integrate with Bootswatch

if done correctly would explode the the theme possibilities

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.

There is also BootTheme, which is quite a powerful tool. http://www.boottheme.com/.

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?

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.

In theory, this wouldn't be too hard to implement if you were using the http://dgo.to/less 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 http://dgo.to/fontello 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 http://dgo.to/twitter_bootstrap_ui module, but that simply integrates a sites/all/libraries path, plus the namespace is wrong.

As a side note, I've put together a pre-built repository for Bootstrap at:
https://github.com/components/bootstrap

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

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 :)

I bundled these on github as sub-themes incase people want to try out bootswatch in drupal quickly -- https://github.com/btopro/bootswatch_drupal

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

Hey that's great - thanks btopro!

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?

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.

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

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

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.

added the thumbnail functionality

1. +++ b/includes/theme.inc
   @@ -281,7 +281,11 @@ function bootstrap_css_alter(&$css) {
      // Add Bootstrap CDN file and overrides.
      if (theme_get_setting('bootstrap_cdn')){
        // Add CDN.
   -    $cdn = '//netdna.bootstrapcdn.com/bootstrap/'. theme_get_setting('bootstrap_cdn')  .'/css/bootstrap.min.css';
   +    if(theme_get_setting('bootstrap_bootswatch')) {
   +      $cdn = '//netdna.bootstrapcdn.com/bootswatch/'. theme_get_setting('bootstrap_cdn')  .'/'.theme_get_setting('bootstrap_bootswatch_theme').'/bootstrap.min.css';
   +    } else {
   +      $cdn = '//netdna.bootstrapcdn.com/bootstrap/'. 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/theme.inc
   @@ -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("http://api.bootswatch.com/3/", function (data) {;
   +				previews = '';
   +				$.each(data.themes, function(k, v){
   +					previews += '<div class="bootswatch-preview hidden" id="'+ v.name +'"><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");
   +		}
   +	};
   +
   +})(jQuery);
   \ 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('http://api.bootswatch.com/3/')->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', 'http://bootstrapcdn.com', 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', 'http://bootstrapcdn.com', 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.

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.

rework

Thanks @valkum!

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

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

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

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 :)