From categories:
page 1123...next »

Figured it out:


 
Example

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

___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

Re: Bootstrap questions by jjsjjs, 01 Feb 2016 10:22

Hello!

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.


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

Bootstrap questions by jjsjjs, 31 Jan 2016 18:35

I'm in the same boat as you…have been using wikidot for years now and can't seem to make sense of how to implement this much needed functionality.Considering changing platforms.


chsglogo560x250-1200ppi.jpg
Re: installing bootstrap by Chris HannahChris Hannah, 10 Mar 2015 17:39

Thanks Ed!


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

Re: Stacking FontAwesome Icons? by jjsjjs, 25 Nov 2014 05:04

Here's the Font Awesome 4 CSS that has what you need. You could copy just the parts you need or download v4.2 and add it to your site using an @import… rule.

Hi Ed and thanks for the info, I'll try to figure it out!

Edit: Oops, wrong account. It's jjs here, as in the original post.


Kertomo Productions

It looks like the classes for Font Awesome v4 were rewritten according to the link you referenced. Wikidot is currently using v3.2.1.

<head>
...
<link href="http://d3g0gp89917ko0.cloudfront.net/v--c67e663218b6/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet">
...
</head>

At this point, I think you'll have to add your own custom classes to do the stacking.

Hi!

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

Thanks!


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

Stacking FontAwesome Icons? by jjsjjs, 23 Nov 2014 19:06

You can use a basic form of tooltips by using James Kanjo's inline hovertips. If you are using the Standard Theme, then this will already be done for you. Otherwise, you would need to add the following CSS:

/*  Inline Hovertips by James Kanjo (!INHV)
==============================================================================*/
.hover{
    display: inline-block;
    background: none;
    height: 1.42857em;
    margin-bottom: 3px;
}
.hover:hover{
    background: url('http://css.wikidot.com/local--files/theme:standard-theme/hovertipBelow.png');
    background-repeat: no-repeat;
    background-position: center calc(1.42857em - 2px);
    height: calc(1.42857em + 3px);
    margin-bottom: 0;
}
.hover span{  transition: none; }
.hover:hover span{
    border: none;
    background: rgba(20, 20, 20, .95);
    font-size: 12px;
    min-width: 200px;
    color: #FFF;
    border-radius: 4px;
    padding: 4px 12px;
    margin-top: calc(1.42857em + 6px);
}


Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Bootstrap Tooltips and popovers would be useful in many cases. Could it be possible to use them with Wikidot somehow?


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

I do have to tell you though I am a total virgin when it comes to any of this stuff . But I love to learn and thats why Im here. Thank you.


Que les bendiga Dios. Hasta la proxima,
La Chula Caprichosa

The solution could be to update wikidot FontAwesome to 4.2.

Is this something that site owner should do or is it somewhere deeper in Wikidot? If it's something that only Wikidot can do, can you say when you are planning to update it?


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

Its because there are 2 font files loaded and wikidot (3.2.1) is at first place.
When I'v deleted this code from page:

<link href="http://d3g0gp89917ko0.cloudfront.net/v--811d59f5bc66/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet">

using firebug. All icons appears. The solution could be to update wikidot FontAwesome to 4.2.

Bartłomiej Bąkowski @ Wikidot Inc.
';.;' TeRq (Write PM)

Oh really? That's odd… wouldn't have expected it to. Any screenshots? :)


Kenneth Tsang (@jxeeno)

The strange thing is that some icons actually show up on Firefox.


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

There's a (security) requirement in Firefox that requires that the web font files be requested from the same domain as the originating webpage request. Unfortunately, the way that Wikidot currently includes Font Awesome from the www.wikidot.com domain (it's hardcoded).

I have reported this as a bug here


Kenneth Tsang (@jxeeno)

Hi!

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?


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

I just added some CSS that gives us a fade transition option for carousel. I updated the demo page so you can see it in action. The "How to Extend Twitter Bootstrap’s Carousel Functionality" article I found that inspired this has some other interesting tweaks for the carousel.

I haven't messed with other transitions too much yet, but it should be fairly easy to extend the choice of carousel transitions in a similar fashion since it's all done via CSS transitions and does not require access to the javascript.

Any chance you'll plug a transition attribute into the CSI, Timothy?

Re: Carousel Image Slider by Ed JohnsonEd Johnson, 30 Aug 2014 22:30

Thanks Ed!


___TTT___/ http://www.trumpetexercises.net
 (_|||_) \ - Janne

Re: Modals :D by jjsjjs, 19 Aug 2014 03:30
page 1123...next »

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License