Bootstrap3

[Ree]

Support thread for the Bootstrap3 theme.

I found GetSimple in mid September 2013, and at that time Bootstrap 3.0.0 had only been out less than a month so there weren't any themes making use of it yet (that I saw anyway). So I decided to create this theme, using the existing 2.x.x based theme as a reference since I had no idea what I was doing!

August 13, 2014 EDIT: Updated to bootstrap 3.2.0 and added 7 new themes from bootswatch.com

Extend:
http://get-simple.info/extend/theme/bootstrap3/736/

Demo/support sites:
http://bootstrap3.randm.ca (best demo, contains bootswatch theme and menu with children samples)
http://www.rickparrish.ca
http://www.randm.ca

Source:
https://github.com/rickparrish/Bootstrap3

Credit:
Innovation Theme Plugin (used as a base to create Bootstrap3's plugin)

Twitter-Bootstrap GS (used as a base to create Bootstrap3's theme)

[shawn_a]

This is my new favorite theme.

[Kolyok]

The only "issue" with bootstrap is the navigation with dropdowns (if you use multilevel menus).
Well not exactly an issue but if you want to have parent menu items to be clickable(well to navigate to their links) then you need to hack/extend the core bootstrap navigation.
I've been working with a few bootstrap themes and till now i found the following workarounds:
1. Navigate to parent on double click/double tap (still working with this one).
2. Display navigation dropdowns on hover instead of click (on non-mobile devices) and auto-expand the parents on mobile devices
3. Kept the styling but replaced the navigation with other alternatives

In the other hand its a great framework/theme to use or work with!

[stryker]

Thanks Ree for your efforts and time creating this theme. I plan to use Bootstrap 3 for all my future projects and combined with GS it makes a flexible and powerful combination.

Kolyok, What solution do you use for number 2. I'm also looking for a way to have the parent menu hover for dropdown (on desktops) and click to go to URL. Some customers still want a parent menu click-able to another page. I think it's getting more and more non-standard because you have the issue with mobile devices not having HOVER.

Looking forward to discussing this theme and any hints and tips that may be relevant.

I've just found out that if you place the following CSS in the css/Bootstrap3.css file then any inserted images scale gracefully in all devices and browser widths.

img, img a {
max-width:100%;
}

You need to make sure that you remove the height and width when inserting the image though or it will stay at that size. (Ree, maybe a suggestion for a future version )

Another tip for those people using i18n_navigation - you need to disable / remove it and use the native GS Menu manager and Parent dropdown to handle navigation and dropdowns in GS + BS3.

Also if you are using i18n_Gallery then make sure you only load one copy of jquery. Still experimenting with this at the moment but the latest jquery that works with both the gallery AND the dropdown menu is 1.8.0 - newer ones disable the Close button (for prettyphoto) and older ones disable the dropdown menus in BS3?? Maybe there is another solution but this one seems to have no drawbacks yet.

I have the latest jquery.prettyPhoto.js file but 1.8.0 seems to be OK - haven't tried other gallery options (Cycle, fancybox etc but I assume they should work OK with 1.8.0)

Let us know if you come across any other similar issues / tips.

[shawn_a]

You can use a custom component for i18n nav

[stryker]

Yes, your right. I thought I tested it enough but started a new install and downloaded the latest version of everything. I then creating a new component and all seems to still work with this theme so that's great news.

Here is the link to the other thread with the procedure
http://get-simple.info/forums/showthread...=bootstrap

But in a nutshell if you add a new component called "nav" with the following code;

PHP Code:

<?php
$s = array('current', 'activepath', 'currentpath', 'open');
$r = array('active', 'active', 'active', 'dropdown');
$c = str_replace($s, $r, $item->classes);
?>
<li class="<?php echo $c; ?>">
  <?php if ($item->isOpen) { ?>
    <a href="<?php echo htmlspecialchars($item->link); ?>" class="dropdown-toggle" data-toggle="dropdown">
      <?php echo htmlspecialchars($item->text); ?>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <?php $item->outputChildren(); ?>
    </ul>    
  <?php } else { ?>
    <a href="<?php echo htmlspecialchars($item->link); ?>">
      <?php echo htmlspecialchars($item->text); ?>
    </a>    
  <?php } ?>
</li> 


And change how the navigation gets called in the theme by replacing

<?php get_navigation_bootstrap(return_page_slug()); ?>

with

<?php get_i18n_navigation(get_page_slug(FALSE),0,1,I18N_SHOW_MENU, 'nav'); ?>

Then the Navigation still seems to be OK (Haven't tested all devices though but on the surface looks OK)

Ree, do you see an disadvantages in this method?

[shawn_a]

Ideally bootsraps less would be modified to create aliases to its nav for our specific classes.
So these class conversions are not necessary.

[Kolyok]

Kolyok, What solution do you use for number 2. I'm also looking for a way to have the parent menu hover for dropdown (on desktops) and click to go to URL. Some customers still want a parent menu click-able to another page. I think it's getting more and more non-standard because you have the issue with mobile devices not having HOVER.

Well to be honest none of these workarounds are working exactly as expected.
For example theres a plugin for bootstrap to change navbar dropdowns to hover and detect touch supported devices but that one (without another workaround/modifications) will kinda mess the menu abit with the latest 3.0.2 Bootstrap however you can still try to get it working. Check its demo here: http://cameronspear.com/demos/twitter-bo...-dropdown/

Another thing i can think of is to simply generate a copy of the parent into the dropdown so it can be clicked from there.
Edit: I just added a js snippet to test this.

Code:

$('#nav li.dropdown, #nav li.dropdown-submenu').each(function() {
        var link = $(this).find('a:first');
        if (link.attr('href')!=='#' || link.attr('href').charAt(0)!=='#') {
            var classes = $(this).attr('class');
            classes = classes.replace('dropdown-submenu','').replace('dropdown','');
            if ($(this).find('li').hasClass('current')) {
                classes = classes.replace('current','');
            }
            if ($(this).find('li').hasClass('active')) {
                classes = classes.replace('active','');
            }
            $(this).children('ul').prepend('<li class="'+classes+'"><a href="'+link[0].href+'" title="'+link[0].title+'">'+link[0].text+' [Parent]</a></li>');
        }
    });

Well theres probably a better way but it works for now.
You can see it in action on http://dev.nagysandorart.com

[dayllack]

I absolutely can't get this working, I can't find Bootstrap3Settings.xml, which i probably causing the total crash.. I'm extremely frustrated about this.. any help?

[Ree]

The only "issue" with bootstrap is the navigation with dropdowns (if you use multilevel menus).
Well not exactly an issue but if you want to have parent menu items to be clickable(well to navigate to their links) then you need to hack/extend the core bootstrap navigation.

That was actually one of the things I liked about Bootstrap! The previous template I used on all my sites had to have what I would consider redundant pages to allow mobile visitors access to the sub-menu items since it was only possible for the to click on the parent (so clicking on the parent simply displayed a page containing a list of the sub-menu links). With Bootstrap that's no longer necessary since clicking on the parent expands/collapses on all devices.

I can see why some people would consider it a good thing to be able to click on the parent though. Maybe I'll look into adding a new "make parent clickable" option that will enable hovering on desktop and duplicating the parent menu item in the sub-menu on mobile. I previously looked at the hover mod that you linked to below, but haven't tried it yet to see how it messes with the menu, but hopefully that can be worked around (or will be fixed soon).

I've just found out that if you place the following CSS in the css/Bootstrap3.css file then any inserted images scale gracefully in all devices and browser widths.

img, img a {
max-width:100%;
}

I debated on whether to add this to Bootstrap3.css or not. I'm using that CSS inline on my screenshots on randm.ca, so I agree it's useful, but I wonder if there may be circumstances where people wouldn't want it so then it wouldn't be good to have in the .css file.

I absolutely can't get this working, I can't find Bootstrap3Settings.xml, which i probably causing the total crash.. I'm extremely frustrated about this.. any help?

Poor coding on my part. What you're seeing are notices informing you that $Settings is undefined, which it will be the first time the page loads because I only define it if Bootstrap3Settings.xml exists (and it only exists after you save your settings). I'll have to update the code to assign default values to $Settings if the file doesn't exist, then the notices will go away.

Since they're just notices it shouldn't be causing a crash though. Are you able to fill out the form and hit save? If so I would expect the notices to go away at that point.

[Kolyok]

I also like the method of dropdowns in bootstrap its just that sometimes some people/clients/etc want it in a different way.
As for the img max-width I'd rather use the existing (bootstrap built-in) img-responsive class on images that I want to scale on all devices.

[alex_d]

HI,
on the fresh gs323 I have installed your bootstrap3 theme + plugin and I'm getting this error



Cheers

Alex

[n00dles101]

have you activated the plugin ?

[shawn_a]

They are just php notices, whats the problem ?

[Ree]

The plugin is meant to be optional, so they shouldn't need to activate it if they'd rather not.

Just tried fixing the notices here, but I wasn't able to get the notices to appear! I have my php.ini set to E_ALL, so AFAIK that should cause notices to appear. Does GetSimple disable notices (either by default, or by option that I might have set and forgot)?

Anyway, this commit should prevent notices from being displayed in both the front and back end. If someone with the problem can confirm, then I'll package up a new release for Extend.

https://github.com/rickparrish/Bootstrap...04a647a0ff

[alex_d]

Yes plugin is activated.

Other (oem) template works ok.

I can not comment on php notices Shawn ..

[alex_d]

There is sth more going on, when selecting different themes within bootstrap3 i'm getting the following error > see attachment

however, plugin does change the themes ..

[shawn_a]

Depends on the php version, you might have to do E_STRICT as well, but E_ALL should include E_NOTICE.

[Ree]

Yeah I'm on > 5.4, so E_ALL should include E_STRICT.

alex_d, not sure what to make of the latest screenshot. If $_POST['cmdSubmit'] is set, there's no reason for $_POST['chkDisplayOtherThemes'] to not be set (which is what the notice is indicating).

If you view the source to that page, do you see this string in there?

input type="checkbox" id="chkDisplayOtherThemes" name="chkDisplayOtherThemes"

(and just to be clear by view the source I mean the source of the page in your browser, not the source of the php script).

[alex_d]

i have wamp installed with php 5.3.5

I can not comment on 'E_ALL & E_STRICT' stuff, I'm not back-end dev.

Ree,

Yeah I'm on > 5.4, so E_ALL should include E_STRICT.
alex_d, not sure what to make of the latest screenshot. If $_POST['cmdSubmit'] is set, there's no reason for $_POST['chkDisplayOtherThemes'] to not be set (which is what the notice is indicating).
If you view the source to that page, do you see this string in there?
input type="checkbox" id="chkDisplayOtherThemes" name="chkDisplayOtherThemes"
(and just to be clear by view the source I mean the source of the page in your browser, not the source of the php script).

that latest screen shot is from GS, when I open Generated Source I can see next:
<p>
<label for="chkDisplayOtherThemes">Display 'Other Themes'?</label>
<input id="chkDisplayOtherThemes" name="chkDisplayOtherThemes" value="true" type="checkbox">
</p>

So this is happening only inside GS when I select some other Bootstap3 theme and save after it

[Tzvook]

PHP Code:

<?php
$s = array('current', 'activepath', 'currentpath', 'open');
$r = array('active', 'active', 'active', 'dropdown');
$c = str_replace($s, $r, $item->classes);
?>
<li class="<?php echo $c; ?>">
  <?php if ($item->isOpen) { ?>
    <a href="<?php echo htmlspecialchars($item->link); ?>" class="dropdown-toggle" data-toggle="dropdown">
      <?php echo htmlspecialchars($item->text); ?>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <?php $item->outputChildren(); ?>
    </ul>    
  <?php } else { ?>
    <a href="<?php echo htmlspecialchars($item->link); ?>">
      <?php echo htmlspecialchars($item->text); ?>
    </a>    
  <?php } ?>
</li> 


How do I add levels to it (i18n_navigation) ...
I need something like:

Code:

<?php if ($level == 1) { ?><ul class="dropdown-menu">
  <?php } else { ?><ul style="list-style-type: square !important;">
  <?php } ?>

Whatever I try don't work ....

[Riianna]

Just replace the crappy Bootstrap menu with some other menu, problem solvet.. like this example http://webdesign.tutsplus.com/tutorials/...avigation/

[plutek]

hi all!

i like bootstrap a lot... just wondering how to change the content of the nav bar. it's not broken out in the GS interface, right? i see that the site title shows there, linked to the home page, but how do i put other links in there... i'd really like to put facebook, twitter, etc links up there.

also... what's the icon with horizontal lines that appears at the right end of the nav bar, when the browser window width is small? is that the menu? how do i get rid of that if i don't want a menu. also, it's wierd because, even if i have a second page on the site, which is set to be included in the menu, i still never see any menu content. ????

thanks a lot... cheers!
.pltk.

[Ree]

hi all!

i like bootstrap a lot... just wondering how to change the content of the nav bar. it's not broken out in the GS interface, right? i see that the site title shows there, linked to the home page, but how do i put other links in there... i'd really like to put facebook, twitter, etc links up there.

also... what's the icon with horizontal lines that appears at the right end of the nav bar, when the browser window width is small? is that the menu? how do i get rid of that if i don't want a menu. also, it's wierd because, even if i have a second page on the site, which is set to be included in the menu, i still never see any menu content. ????

thanks a lot... cheers!
.pltk.

When you're adding/editing a page, expand the page options and tick the "Add this page to the menu" box. That will cause the page to be displayed in the navigation menu. Are you saying you've done that and it still isn't showing up?

If you want to link to facebook from the nav menu then you'll need to add a page, and then on that page you'd redirect to facebook. Or you could modify the template to add facebook there -- wouldn't require the redirect that way.

And yeah, the three lines are to expand the nav menu on mobile devices. Without the button you won't be able to expand the nav menu, and so then you wouldn't be able to navigate from a mobile device.

[shawn_a]

Need a plugin for menus