Twitter-bootstrap GS

[lucamusolesi]

This is the forum thread for the support of the Twitter-Bootstrap theme.

Demo of the theme: http://lucamusolesi.altervista.org/twitter-bootstrap/

Update: December 13, 2012
Added a new style from bootswatch: "Cosmo", a Metro inspired style.

Update: November 2012
The theme is updated to the last boostrap version and includes many improvements.

Included 12 stylesheets from bootswatch, simply edit 1 line to change between styles.

To do list:

• shortcodes
• gallery plugin
• improved multilevel navigation
  

[shawn_a]

yay, glad someone made this, it was my next project.

[lucamusolesi]

shawn_a wrote:yay, glad someone made this, it was my next project.

I was wondering why I haven't done it before

I think I will add some additional functions later. Any request is welcome!

[jdkarate]

I love this theme .... it is excellent for my purposes. Can you give me a clue on how to include modal windows? I have a gallery that I need to set up and when they click on the thumbnail I would like for a modal to popup. Thanks for any help you can give!

[lucamusolesi]

To use the modal window you need to include the modal.js file in your page and you cand find instruction on how to use it here: http://twitter.github.com/bootstrap/java...tml#modals

[fugo]

I use the I18N_Gallery but with this theme it is not working. What I need to do?

[lucamusolesi]

fugo wrote:I use the I18N_Gallery but with this theme it is not working. What I need to do?

There's a problem since the theme call jquery, I will fix it as soon as possible but in the meanwhile to get it work with the gallery plugin you can just delete the javascript calls in the template files.

[alienee2]

This theme works well...i made some improvements to the version i'm using, namely to separate out the footer into an include, and adjust some of the css to play nicely with p01 contact.

also, there is a new plugin coming out called shortcodes (https://github.com/n00dles/gs_shortcodes), and i'll hopefully be creating shortcodes for some of the bootstrap plugins (toggles, accordions etc..);

here is a shortcode that will render the standard bootstrap tabs: (put this in your functions.php - wrap in php tags)

Code:

// Twitter Bootstrap Tabs grabbed from www.friiitz.com, tweaked by alienee2
/* tabgroup */
add_shortcode( 'tabgroup', 'tabgroup' );
function tabgroup( $atts, $content ){
    $GLOBALS['tab_count'] = 0;
    do_shortcode( $content );

        if( is_array( $GLOBALS['tabs'] ) ){
        foreach( $GLOBALS['tabs'] as $tab ){
        $tab_count = $tab_count+1;
        $tabs[] = '<li class="'.$tab['state'].'"><a href="#tab'.$tab_count.'" data-toggle="tab">'.$tab['title'].'</a></li>';
        $panes[] = '<div class="tab-pane fade '.$tab['state'].'" id="tab'.$tab_count.'">'.$tab['content'].'</div>';
        }
        $return = "\n".'<div><ul class="nav nav-tabs">'.implode( "\n", $tabs ).'</ul>'."\n".'<div class="tab-content">'.implode( "\n", $panes ).'</div></div>'."\n";
        }
        return $return;
}

/* tabs */
add_shortcode( 'tab', 'tabs' );
function tabs( $atts, $content ){
    extract(shortcode_atts(array(
    'title' => 'Tab %d',
    'state' => ''
    ), $atts));
    
    $x = $GLOBALS['tab_count'];
    $GLOBALS['tabs'][$x] = array(
        'title' => sprintf( $title, $GLOBALS['tab_count'] ),
        'state' => sprintf( $state, $GLOBALS['tab_count'] ),
        'content' =>  $content );
    $GLOBALS['tab_count']++;
}

this is how you would use the tabs shortcode within your editor:

[tabgroup]

[tab state="active in" title="My Crazy Tab"] Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.[/tab]

[tab title="My Another Tab"]

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.[/tab]

[tab title="Another Tab"] Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.[/tab]

[/tabgroup]

[lucamusolesi]

Hi alienee2, i'm actually using a similar way to use shortcodes for the bootstrap plugin but I haven't released it yet. I'd like to put everything in the function.php and give the possibility to use every plugin of the template. So far I didn't have time to work on it but I will do it.
I didn't understand if you use the shortcodes plugin to render shortcodes in the theme. This could be a way too.

[fugo]

lucamusolesi wrote:

fugo wrote:I use the I18N_Gallery but with this theme it is not working. What I need to do?

There's a problem since the theme call jquery, I will fix it as soon as possible but in the meanwhile to get it work with the gallery plugin you can just delete the javascript calls in the template files.

Thank you a lot!
I deactivate one(1) javascript call and it works now

Code:

…
        <?php get_footer(); ?>
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script -->
  <script>window.jQuery || document.write('<script src="<?php get_theme_url(); ?>/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
   <script src="<?php get_theme_url(); ?>/js/libs/bootstrap/transition.js"></script>
    <script src="<?php get_theme_url(); ?>/js/libs/bootstrap/collapse.js"></script>
    <script src="<?php get_theme_url(); ?>/js/script.js"></script>
  </body>
</html>

[alienee2]

lucamusolesi wrote:Hi alienee2, i'm actually using a similar way to use shortcodes for the bootstrap plugin but I haven't released it yet. I'd like to put everything in the function.php and give the possibility to use every plugin of the template. So far I didn't have time to work on it but I will do it.
I didn't understand if you use the shortcodes plugin to render shortcodes in the theme. This could be a way too.

Yes, i'm trying to make a number of shortcodes for functionality of bootstrap; so far i have the tabs done and those work well; the shortcodes for the theme can go into the functions.php file, but i'm actually keeping them in a separate include within the theme folder;

[simon]

Hi Luca!
How does the Head1-3 work in the heading.php?

[shawn_a]

Is this compiled with less ?

[lucamusolesi]

Yes it's compiled with less, why?

[shawn_a]

I was having troubles using less, ill try again.
I was trying .clearfix() and couldn't get it working.

I don't see any actual less files in here however.

[lucamusolesi]

Yes in the theme there are only the css files, if you want to use less you can download the less files from the twitter bootstrap project and they should work with the theme.

[Timbow]

It looks really exciting, but what is bootstrap?

[shawn_a]

Timbow wrote:It looks really exciting, but what is bootstrap?

A css, html5, javascript web framework for layout and function.

http://twitter.github.com/bootstrap/

[shawn_a]

Hey what is the purpose of the inline <style> body css for padding ?

[pier]

fugo wrote:I use the I18N_Gallery but with this theme it is not working. What I need to do?

seems many conflicts with jquery multiple calls...

to make conditional jquery calls replace, in the 3 templates provided (template.php, heading.php, and wide.php) the 2 lines calling jquery at bottom :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php get_theme_url(); ?>/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

by conditional jquery calling, 1 call jquery from google, 2 if google down take the jquery provided by the template:

<script type="text/javascript">
/* only load jQuery if not present */
if(typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></"+"script>");
var __noconflict = true;
}
</script>
<script type="text/javascript">
/* if Google is down */
if(typeof jQuery == 'undefined') {
document.write('<script src="<?php get_theme_url(); ?>/js/libs/jquery-1.7.1.min.js"><\/script>');
var __noconflict = true;
}
</script>

[Mateng]

This looks promising - I will give it a closer look when I find the time. Thanks Luca!

[sal]

Bootstrap 2.1 has been released and includes a ton of updates. Are you planning on updating your theme lucamusolesi?

[lucamusolesi]

I've been very busy so far, but in few hours I will realese an updated version of the theme with the last Boostrap and some major changes and improvements.

I'm also planning to include in the theme a lot of shortcodes to use most of the bootstrap features esily.

[oratoran]

awesome idea and hope to help for all of us

thanks luca

[jlm]

Hi,

thank you for this great theme, but how can you create a drop down menu, I tried the plugin I18, but no meaningful results.
Second question, how to let visitors the opportunity to choose the theme CSS (as in the demo)

tx

sorry for my "translate.google english"