Madoven - Bootstrap Template

[pattyland]

@Yetiie: Hi, thanks for all you comments and tips. That Dreamweaver-like WYSIWYG-Editor for templates is an interesting idea, but I think you shouldn't mix template and content to much. For me WebsiteBaker is just for content, I don't even want my clients to be able to change the layout of the page; If there editor is really powerful it could help the developer though! I'm curious what you've built, this member module seems to be very cool!

Regarding your issue with the reappearing modal dialog; I know, and it's fixed since months in Bootstrap, but WebsiteBaker is using a jQuery Version from 2011, and Bootstrap dropped supporting this superold version months ago too. This should really be fixed: http://forum.WebsiteBaker.org/index.php/topic,25355.0.html

[Yetiie]

Yesterday in the german forum we had (once more) a discussion about WB and bootstrap. One reaction was, that fishstäbchenbrenner wrote a tutorial how an 'typical and normal' editor of a webproject (without further html knowledge) can ad bootstap-columns to a page. Even the tutorial is on german I would like to inform about the posting here:

http://forum.WebsiteBaker.org/index.php/topic,28244.0.html

He uses the wb module: 'Members'
It is an multiused(!) module which also can help to prepare special html-structures to a page.

As it was not(!) designed to be a special column module or even a special wb-bootstrap-module it is a workarround until someone would like to do such a special column module or even special wb-bootstrap-module for wb

Others/further ideas/solutions/modules/snippets are welcome

[Yetiie]

Yesterday I postet a suggestion to make the access to bootstrap elements easier in this wb template.

Today I posted a little tutorial how to make it easy to offer an editor to ad gridded elements like a item row to a webpage using list. Once more same system: the editor (without knowledge only chooses as style form the combo box.)

The tutorial was special for frameworks with padded grids.  Bootstrap is such an framework but there are other Frameworks too which uses a similar system. So I posted it in an separate thread:

http://forum.WebsiteBaker.org/index.php/topic,28240.0.html#new

Maybe you are general interessted in such a solution for bootstrap templates for wb or you would like to ad some special css to this template so the editors can reate item rows on the fly ... than have a closer look to the tutorial. A SASS mixin for direkt use or a clean css example (needs to be prepared with your properties) is added too.


----
An example what is meant with gridded items is shown on the picture.
The screenshot is done from wb template http://WebsiteBaker.at/wb-templates/template-bs_fragg.html

[Yetiie]

Just as Feedback:

Off course I like this template.
But there seems to be a little Problem on the demo page (I don't know if it has been reported yet):

When I open the login box and close it with cancel button
the moadl box diappears
than the (light dark) background disapperas
...
than the modal box appears for a short moment once again
and disappears aggain


Firefox 37.01
Chrome 41.0.2272.118 m
IE 11

[Yetiie]

Just before: I don't use boostrap myself but I like the idea to prepare bootstrap for easy use with WB. This template to me is a very goog solution for a bootstrap starting point.



Reason for my posting:

Yesterday in the german forum we had a hard discusision about bootstrap and WB. It is known that there are some projects realized with bootstrap. But most of the users there think, that one of the biggest problem of bootstrap is to make it easy for an editor to ad elements to the page ...

I myself believe (after a nearer look), that this template is a great work and easy starting point to develop bootstrap projects with wb. Last night I thought about this ...




The Idea: make template a little step easier for editors:

As I knew (note once more: I am not a user of bootstrap myself, so this is just an idea) has bootstrap al lot of (inline-)elements which only needs one class to get the style.

To prepare such elements to easy acces for WB in a templaye is very easy:
Just prepare the file 'editor.styles.js' of the CKEditor with typical bootstrap elements
... add the file to the template
... ... and voila, - the elements are on the fingertips of the editor
... ... ... badges, labels, wells, jumbotrons, muted paragraphs, round images, a.s.o.

I suppose, that a lot of bootstrap elements could be prepared this way.
And the advantage is: the work has to be only once for every oher bootstrap template

I attached an example (untested and just as an proof of concept work) posting for some examples.




My Suggestion:

Maybe someone who knows the bootstrap framework better than me (ore the author himself?) likes to prepare a ck-style-file with the most common and typical eleements and would like to post it here. Than it can be added to the template easily?

(If there someone would like to go forward on more complex bootstrap-elements:
Complex html structures can be adviced to the editor too in the CK file editor.templates.js.
Maybe somene else likes to prepare such an file with typical complex bootstrap elements.)





Technical Instruction for CK file:

Just create a subfolder and copy file to this folder.
Now the template is prepared with bootstrap adaptions for CK Editor
/editor/editor.styles.js

(Please note: the attached file is not proofed as it is an idea!)






Don' forget: this posting is just an impulse to the bootstrap users here because I like the idea ... and maybe there will be someone interested in this ... but it is nothing what needs to be done

------------------------------

But maybe you would like to think another step forward:

Maybe it could be possible to find an additional wb-bootstrap-download-place where this file could be downloaded for other users for reuse to prepare ohter starting-bootstrap-templates ... or a wb bootstrap project.

(And dreaming of some more steps forward: if there are some others who like to work on base on this template and would like some other starting-templates (maybe from startbootstrap.com) for wb (the charme is that only the html structure in the index.php and the info.php neede to be prepared and no css needs to be written) ... maybe step for step and as time goes by it is possible to create a little wb-bootstrap-plattform with two, three or four typical wb-bootstrap-starting-templates ...)

I think:
As there had been realizes some wb projects with bootstrap yet ...
... and more and more postings here are about bootstrap ...
.... bootstrap is a theme for wb

[pattyland]

@crnogorac081: Thanks for the nice comment

[crnogorac081]

nice and clean template

[dubaimonsters]

When you start to make your website with the help of bootstrap. You should make it with responsive or SEO friendly.

[pattyland]

I'm sorry to say but bootstrap themselve took out the 3rd level from the navbar

That's exactly the reason why it's not working with Madoven. I recommend not to use submenus, they are horrible on every touch device and/or mobile device!



Just updated https://github.com/pattyland/Madoven
There is now a sample css, so you don't need to modify my theme if you want to add css!

[dbs]

For users with big viewport submenus should have a place.
My own css is enough at the moment, but good to know there are more solutions out there.
Thx for help. 

[nibz]

Hi dbs.

I'm sorry to say but bootstrap themselve took out the 3rd level from the navbar

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But over here they show that it is possible with some extra CSS: http://stackoverflow.com/a/18024991

Hope you can get it working the way you want!
If you still can't don't hessitate to ask again here in the forum then i will take a look what i can do (no guarantees)

[dbs]

Thx for the link and your test.
The solution works for a menu with 1 submenu-level.

I need additional a sub-submenu. After hours of testing i lost my mind.
At the moment the dropdown opens by mouseover and the sub-submenu is a flyout right. Works for me.

Code Select Expand

<?php show_menu2(0,
                 SM2_ROOT,
                 SM2_ALL, 
                 SM2_ALL|SM2_NO_TITLE ,'
 [if(class==menu-current && class!=menu-expand){<li class="active"><a class="[class]" href="[url]">[menu_title]</a>}]
 [if(class==menu-expand){<li class="[class] dropdown  pid[page_id]"><a class="[class]"  href="[url]">[menu_title]&nbsp;&nbsp;&#38;#10023;</a>}]
 [if(class!=menu-expand && class!=menu-current){[li]<a class="[class]" href="[url]">[menu_title]</a>}]',
 '</li>',
                 '<ul class="dropdown-menu" role="menu">',
                 '</ul>',
                 false,
                 '<ul class="nav navbar-nav">'
); ?>

[nibz]

So i just tested it (submenu code) and it works:

Replace: (around line 46)

Code Select Expand


<?php show_menu2(0,SM2_ROOT,SM2_START, null,'[if(class==menu-current){<li class="active">}else{<li>}][a][menu_title]</a>','</li>','<ul class="nav navbar-nav">','</ul>');?>


With

Code Select Expand


<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="[url]">[menu_title]</a>}]';
show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT, 
$aMaxLevel      = SM2_CURR+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);?>


[nibz]

This topic could maybe help getting it working;
http://www.websitebaker.org/forum/index.php?topic=26238.0

[dbs]

Hi, has somebody a dropdown-menu integrated?

[mikew]

What must I change to use the Submenu as dropdown menu?

[pattyland]

@mikejd: Very nice to see! As N1kko noticed you broke the responsive design of Bootstrap because you set a fixed with in line 33 of stovies.css. You shoul not do that

[N1kko]

Your site is not displaying correct on mobile see image

[mikejd]

You might like to see my website using this template which is now functional though not quite complete in content.

www.stovies.huntlyhairst.co.uk

Thanks for the template.

Mike

[pattyland]

@mikejd: Thanks for the feedback! I know this is a controversinal topic, but I think there are only benefits as long as you don't server your site via https or in an intranet where you don't have Internet.

The CDN for Bootstrap is maintained by MaxCDN, one of the biggest CDNs on the world; The paths are never changed, MaxCDN will die you and I are dead too
You may want to read an article about why using cdns anyway: http://www.sitepoint.com/7-reasons-to-use-a-cdn/

[mikejd]

@pattyland - just a thought for the future users of this template (By the way, I think this is a really great template, and just what I was looking for at this moment).

You have called the bootstrap.min.css file and the bootstrap.min.js file from an external website, which is working fine for now. But I wonder if it might not be prudent to wrap these files into the template, in case they become unavailable or changed at some future date?

Just my opinion, and thanks for the good work.

regards,
Mike

[pattyland]

@mikejd: Sure! All Bootstrap fils are available in non-minified on http://getbootstrap.com/
I will update theme to include a custom.css where you can put your own styles and update without problems!

@dbs: Thanks for the explanation. If there would be a acceptably official theme repository I would upload it there...

[dbs]

Alternatively, I quess I could create a new css file and add this to the index.php file after the bootstrap.min.css file.

Best way ...

[mikejd]

I now have the template installed and I would like to make changes. The style is set using the bootstrap.min.css file downloaded from another website. It is quite difficult to edit the .min.css file as it is compacted. So my next question is - can I access the normal css file (bootstrap.css)? Alternatively, I quess I could create a new css file and add this to the index.php file after the bootstrap.min.css file.

Mike

[mikejd]

Thanks dbs, I should have noticed this.

cheers,
Mike