If I have some questions regarding Bootstrap & Wikidot, would you recommend posting here or at the community forum? The people who help, are more or less the same anyway… The examples (as below) will not work on the community site. Anyway, here's the question:

Below is a wide Bootstrap default button. If you click anywhere else than the icon or text, nothing happens (the button changes color though). How should I change the code for it to work properly (as a "real" button instead of just a text link)?

 
Example

[[span class="btn btn-default btn-block"]] [[a href="http://www.example.com/"]][[span class="fa fa-taxi fa-2x"]]@<&nbsp;>@[[/span]][[/a]] [[a href="http://www.example.com/"]]Example [[/a]] [[/span]]

Thanks!

Btw. I find it strange that there isn't that much activity here. When Ed started this, I kind of expected it to become a Wikidot community forum equivalent for Bootstrap oriented discussion and questions. Even all of the example sites have been deleted.

Can I stack FontAwesome icons in Wikidot Bootstrap like this? If I can, how?

Thanks!

I originally posted this at the community forum, but this might be a bit more appropriate place.

Some FontAwesome icons are not showing when using Firefox (tested on versions 23.0.1, 32.0.2 and 32.0.3). With Chrome they appear correctly (I haven't tested other browsers yet).

Example here: http://fontawesome.wikidot.com/

Any idea what might be causing this?

Accordion Demo

I had been working on the assumption that it wouldn't be possible without some help from the devs because according to the BS3 docs, the target element had to be set up with an ID.

But, "Au contraire, mon capitan!"

It also works with classes for targeting the container!

Carousel Demo

I just have one small issue to work out with the navigation shader spilling out the bottom of the slide container.

https://www.evernote.com/shard/s108/sh/37f7c552-4d5b-44ce-ae79-d3e8e69bfa55/9a2c4f8bb7a0d5f3a37fba5b7f04df1c

http://wytwory.wikidot.com/

By using ListPages and the Modal dialog code that tsangk turned us on to, I think you get a really nice result. A live example is here (the link might go away later, so if I forget to edit this post, let me know).

Note: for reasons I haven't totally figured out yet, I had to add the css module. The default position for modals is left: 50%; and it didn't position correctly on my 2 column page layout without resetting it to zero.

[[module css]] .modal-dialog { left: 0; } @media screen and (min-width: 768px) { .modal-dialog { width: 700px; } } [[/module]] [[div class="row"]] [[div class="col-sm-8"]] [[module ListPages category="blog" separate="false" limit="5" order="_originaldate desc" tags="+_home +_active"]] [[div class="panel panel-info"]] [[div class="panel-heading"]] [[div class="panel-title"]] [[date %%form_data{originaldate}%% format="%B %d, %Y"]] + %%title%% [[/div]] [[/div]] [[div class="panel-body"]] %%form_data{summary}%% [[div class="pull-%%form_raw{imageposition}%%" style="display: none%%form_data{imagefile}%%;"]] [[image %%form_raw{imagefile}%% class="img-responsive img-center"]] [[/div]] [[a data-toggle="modal" data-target=".wikidot-bs-modal%%name%%" class="btn btn-primary btn-lg"]]Read More[[/a]] [[div class="modal fade wikidot-bs-modal%%name%%" tabindex="-1" role="dialog" aria-labelledby="Modal%%name%%" aria-hidden="true"]] [[div class="modal-dialog"]] [[div class="modal-content"]] [[div class="modal-header"]] [[a class="close" data-dismiss="modal" aria-hidden="true"]]@<&times;>@[[/a]] [[date %%form_data{originaldate}%% format="%B %d, %Y"]] + %%title%% [[/div]][!-- /modal-header --] [[div class="modal-body"]] %%form_data{summary}%% [[div class="pull-%%form_raw{imageposition}%%" style="display: none%%form_data{imagefile}%%;"]] [[image %%form_raw{imagefile}%% class="img-responsive img-center"]] [[/div]] ~~~~ %%form_data{readmore}%% [[/div]][!-- /modal-body --] [[div class="modal-footer"]] [[a class="btn btn-default" data-dismiss="modal"]]Close[[/a]] [[/div]][!-- /modal-footer --] [[/div]][!-- /modal-content --] [[/div]][!-- /modal-dialog --] [[/div]][!-- /modal --] [[/div]] [[/div]] [[/module]] [[/div]][!-- /col-sm-8 --] [[div class="col-sm-4"]] [[div class="panel panel-warning"]] [[div class="panel-heading"]] [[div class="panel-title"]] FinleyPR Blog + Recent Posts [[/div]] [[/div]] [[div class="panel-body"]] [[module ListPages category="blog" separate="false" limit="5" order="_originaldate desc"]] * %%linked_title%% - [[date %%form_data{originaldate}%% format="%B %d, %Y"]] [[/module]] [[/div]] [[/div]] [[/div]][!-- /col-sm-4 --] [[/div]][!-- /row --]

I'm new in wikidot, and a bit less to programing. but I'm practicing.
I would like to build a wiki website that would function mostly on mobile devises.
I have already started playing with the css and html of the website I've started to build but figured out that it's not mobile friendly..

my question is how to install bootstrap?
on the 'Layouts and Bootstrap in Wikidot' it said:
"When creating a custom CSS theme, form now on, users may choose Bootstrap to be loaded " - i can't see this option
should i just copy past the code into my css?
i think i want to start from scratch. where do I start?

I just posted this as a bug on the Feedback site, but wanted to add the info here in case you're not watching the Feedback site.

I noticed that tags we being displayed without any space between tags and upon investigating found that [[tags]] does not render the full HTML markup in Bootstrap layouts. I was able to fix it by changing my layout to include the missing markup and I was then able to add the CSS styles (also missing from the Bootstrap base CSS). These are the edits I made to the layout and CSS on this site.

Layout Before

 [[if tags]] [[tags]] [[/if]]

Layout After

 [[if tags]] <div class="page-tags"> <span>[[tags]]</span> </div> [[/if]]

Missing CSS Added

/* Page Tags Default Styling */ .page-tags { clear: both; margin: 10px 0 0; padding: 0 2px; text-align: left; } .page-tags a { margin: 0 3px; } .page-tags span { border-top: 1px solid #BBBBBB; font-size: 85%; padding-top: 2px; }

I've created a legacy section on this site which will help users to "upgrade" their legacy layouts to customisable ones without additional programming.

I have achieved this by:

• Upgrading legacy CSS themes to compatible ones (Emulated Legacy CSS)
• Emulating the legacy layout (Emulated Legacy Layout)
• Creating a JavaScript CSS converter (Legacy CSS Upgrade Converter)

There is a known issue where Wikidot's base CSS doesn't seem to include the button GIFs in the editor, however I'm not prepared to look into resolving that issue. If others are willing, I recommend appending the CSS fix to the Emulated Base CSS.

Feel free to test this with your own sites. I know that I'd probably enjoy using my existing layouts but moving the editor to above the page content instead of below it :-)

I have inserted the parent page (home) on Overview and About.

There is also the breadcrumb module missing…

Devanos

On custom layout, [[content]] module is including #page-content and #action-area. I'd like to situate #action-area under #page-options-bottom, but I cannot do that because of upper reason.

This is now completed and [[action_area]] is inserted into the layout.

Question: have we here to do somthing to insert such an action_area?

some sample text[

[[note]] some sample text [[/note]]

some sample text

I really like being to grab themes from sites like Bootswatch and Paintstrap and plug them in. But, I'll be more careful because I'm not sure the color scheme is the only thing affected when I grab these new themes (I think Paintstrap generated CSS is probably "safe", but those from Bootswatch may change other design elements).

I know, at this point of alpha/beta-testing this is not sooo important, but the area should be anywhere… only not to forget it.

"col-md-2" "col-md-2" "col-md-2" "col-md-2" "col-md-2" "col-md-2"

if i shrink the browser at some point it becomes
"col-md-2"
"col-md-2"
etc

What i need to be able to do is :
"col-md-2" "col-md-2" "col-md-2" "col-md-2" "col-md-2" "col-md-2"
drops down to
"col-md-2" "col-md-2" "col-md-2"
"col-md-2" "col-md-2" "col-md-2"
and then
"col-md-2"
"col-md-2"
etc.

anyone one of you young uns know how thes hell i do this please?

awaiting in anticipation.

phil
xx

Forgot to mention, I like the look of the new owindow stuff in general much more than in the previous implementation (:

I've been working on this on a page on a private site for now (I'm too embarrassed to make it public right now), but I was hoping one of my fellow gurus would take a stab at this if you have time.

I'm really curious if we can use a JSON file as shown in the "Rapid Start" section of the docs for Galereya or if we need to stick with the more conventional HTML markup example. I don't know anything about JSON, but it seems like it might need support from Wikidot on the server side of things to work.

Thanks in advance for any working demo you can come up with.

Here is a demo of the renovated snippet.

When Wikidot goes officially live with its Bootstrap implementation, I will put this on the snippets site, but for now feel free to play around with it (:

Edit: Might be useful to know what variables it has:

image, heading, caption, float, width, max-width, force-float, alt, title, link, kind

width now forces the width of the image, while max-width serves as the more flexible version.

force-float is either true or false (false by default). When false, the float will no longer apply at screen widths under 970 pixels. If you make force-float true, then the object will float regardless.

link, when supplied with a value none, will deactivate the link.

kind can be any one of the Bootstrap thematic keywords (default, primary, info, success, danger, warning).

Permissions should be set so Wikidot members can see page options to inspect the source.
atgmarketingsolutions.com

The slider on the home page is using Slicebox. This is where I spent most of my time.

The rest of the markup is standard Wikodot/Bootstrap.

I used Adobe Kuler and PaintStrap to do the color palette (more info).

Before I dive back in and start to play with some of that I'd like to know if I'll be wasting my time. I suspect I'll need to have patience until some of these items are made available to us via layout markup.

[[module CSS]] .show-data { display: block !important; } .show-data-inline { display: inline !important; } [[/module]]

I documented this technique on the Snippets site a while ago, but I think it's even better now that we can use it "cleanly" as part of our top navigation.

Considering our long-term plan, what we have in mind is a thorough migration to Bootstrap, including: main Wikidot site, user account page (activities, messages and settings), login screen, feedback and blog. We would also really like to introduce Bootstrap to every new user on Wikidot by changing default templates.

Wikidot needs a complete redesign, that's for sure. Our official sites must remain coherent by design, together with everything done by users by default, i.e. default templates' UI elements. We are not sure if we're going to do that by ourselves or we're going to hire someone or a company - simply somebody better than us in designing things.

But we'd also like to involve our users in creating default templates. Nobody knows better than you what users' needs really are. We're not thinking about anything extraordinary, rather think of a simple, neat and clean solution, which users will find easy to use and get familiar with. We do not exclude the possibility of appropriately rewarding good designs, if they will be used as official templates.

I'd really like to get a feedback from you and hear your opinion about these ideas we might put into discussion.

I've become a tester of Bootstrap, but I cannot change layout because of permission.

When I saved my custom layout, system show me following message:

You have not permission to make this action.

Does anybody can help me?

An example of these awesome features is the tooltip. The HTML embed-able markup is:

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

[[a href="#" data-toggle="tooltip" data-original-title="first tooltip"]]Hover over me[[/a]]

Live code: Hover over me

From what I understand (I may be wrong) — by default, these tooltips will not be initiated. The Bootstrap demo site itself uses the following Javascript code to initialize all the data-toggle="tooltip" on $(document).ready():

 // tooltip demo $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" })

If this could be done on all the different types of Javascript plugins: the popover, the carousel, the tabs, etc… it would make an awesome addition in functionality :D

[[a data-toggle="modal" data-target=".wikidot-bs-modal" class="btn btn-primary btn-lg"]]Launch Wikidot Bootstrap Modal[[/a]] [[div class="modal fade wikidot-bs-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true"]] [[div class="modal-dialog"]] [[div class="modal-content"]] [[div class="modal-header"]] [[a class="close" data-dismiss="modal" aria-hidden="true"]]@<&times;>@[[/a]] ++++ Modal title [[/div]][!-- /modal-header --] [[div class="modal-body"]] This is amazing! [[/div]][!-- /modal-body --] [[div class="modal-footer"]] [[a class="btn btn-default" data-dismiss="modal"]]Close[[/a]][[a class="btn btn-primary"]]Save changes[[/a]] [[/div]][!-- /modal-footer --] [[/div]][!-- /modal-content --] [[/div]][!-- /modal-dialog --] [[/div]][!-- /modal --]

Launch Wikidot Bootstrap Modal

<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bootstrap 3.0</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li><a href="/home"><i class="icon-home"></i> Home</a></li> <li><a href="/about"><i class="icon-info-sign"></i> About</a></li> <!-- doesn't work <li><a href="/about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li> --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i> Wikidot Setup <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/overview"><i class="icon-exclamation-sign"></i> Overview</a></li> <li><a href="/custom-layout"><i class="icon-leaf"></i> Custom Layout</a></li> <li><a href="/custom-css"><i class="icon-css3"></i> Custom CSS</a></li> <li><a href="/wikidot-modules"><i class="icon-group"></i> Wikidot Modules</a></li> </ul> </li> <li><a href="/forum:start"><i class="icon-comments"></i> Discussion</a></li> </ul> </div> </nav>

But you can do it directly in nav:top, changing the layout to:

<nav class="navbar navbar-default" role="navigation"> [[topbar]] </nav>

and in the nav:top

[[div class="navbar-header"]] [[div type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"]] [[span class="sr-only"]]Toggle navigation[[/span]] [[span class="icon-bar"]][[/span]] [[span class="icon-bar"]][[/span]] [[span class="icon-bar"]][[/span]] [[span class="icon-bar"]][[/span]] [[/div]] [[a class="navbar-brand" href="#"]]Bootstrap 3.0[[/a]] [[/div]] [[div class="collapse navbar-collapse navbar-ex1-collapse"]] [[ul class="nav navbar-nav"]] [[li]][[a href="/home"]][[span class="icon-home"]][[/span]] Home[[/a]][[/li]] [[li]][[a href="/about"]][[span class="icon-info-sign"]][[/span]] About[[/a]][[/li]] [[li class="dropdown"]] [[a href="#" class="dropdown-toggle" data-toggle="dropdown"]][[span class="icon-cog"]][[/span]] Wikidot Setup [[b class="caret"]][[/b]][[/a]] [[ul class="dropdown-menu"]] [[li]][[a href="/overview"]][[span class="icon-exclamation-sign"]][[/span]] Overview[[/a]][[/li]] [[li]][[a href="/custom-layout"]][[span class="icon-leaf"]][[/span]] Custom Layout[[/a]][[/li]] [[li]][[a href="/custom-css"]][[span class="icon-css3"]][[/span]] Custom CSS[[/a]][[/li]] [[li]][[a href="/wikidot-modules"]][[span class="icon-group"]][[/span]] Wikidot Modules[[/a]][[/li]] [[/ul]] [[/li]] [[li]][[a href="/forum:start"]][[span class="icon-comments"]][[/span]] Discussion[[/a]][[/li]] [[/ul]] [[/div]]

If we didn't screw up anything, it should work :)

There are many extensions/plugins for Bootstrap that would be [nice/fun/useful/cool] to have available here. For example, here is short list from Tutolialzine.com:
50 Must-have Plugins for Extending Twitter Bootstrap

I would like to see the dev team figure out a way for us to include plugins in a way that they deem safe. How about setting up some kind of review panel that can take requests from users to make specific plugins available? For example, I might like to be able to use the Bootstrap Image Gallery, so I submit a request asking that it be made available for Bootstrap sites. Squark, TeRq or mkoszut take a look and see that it's safe and agree it would be a good addition and add it to the Wikidot Bootstrap plugin library.

Then in my layout code, I use module-type syntax to activate the plugin on my site.

[[plugin BootstrapImageGallery]]

I think most plugins would consist of a javascript file and a CSS file. The above code would tell Wikidot to add the appropriate code to the <head> section of our site.

 /* bootstrap js*/ <script type="text/javascript" src="<path to plugin-javascript>"></script> /* bootstrap css*/ @import url(<path to plugin css>);

At the moment we don't seem to be able to do this with the "layout" section.
I think it would be rather useful if we could (cos i keep making mistakes! )

.wd-editor-toolbar-panel li.hseparator {display: None}

makes the buttons shift around smother (still not perfect )

I am also trying to find how to make the "title of page" box fluid as it does for "thread title"

You might want to bookmark these sites. It should be a handy resource for our Bootstrap sites!

Paintstrap generates complete Bootstrap 3 CSS, which is great if you're hosting your own site. I would prefer if it would just generate the necessary CSS to change the colors. But as it is now, it works great and is very useful.

Edit: this gets weirder and weirder! now its showing site|cat||page options… sometimes!.

ah ha… have a look at
http://bootstrap-playground.wikidot.com/
and then
http://bootstrap-playground.wikidot.com/home

The basic wikidot css for this is

table.wiki-content-table td{ border: 1px solid #888; padding: 0.3em 0.7em; } table.wiki-content-table th{ border: 1px solid #888; padding: 0.3em 0.7em; background-color: #EEE; }

With class="img-responsive"

[[image /admin:files/cupcake-face.jpg class="img-responsive"]]

Without class="img-responsive"

[[image /admin:files/cupcake-face.jpg]]

example : http://uknxcl-rules.wikidot.com/

If Wikidot could give us alternate syntax for <ul><li></li></ul> ([[ul class="..."]] [[li class="..."]] [[/li]] [[/ul]]), then we could build the nice Bootstrap navigation all in wiki syntax. This could lead to some neat ways to create dynamic menus using ListPages. There would be other issues trying to move the navigation out of the layout like getting the code that collapses the menu into a button on smaller screens.

I don't mind maintaining things through the theme layout, but it would be nice to see some added capability later on.

If you didn't get an invite, I didn't mean to overlook you. Send me a PM and I'll invite you ASAP.