Tweeki - User contributions [en]

Custom Styling

2020-03-09T17:03:28Z

Bmulckhu: Added the mediawik:tweeki.css option

__TOC__
As usual you have several options to add custom CSS to your MediaWiki installation (see also the [http://www.mediawiki.org/wiki/Manual:CSS manual pages on mediawiki.org]):

* via '''[[Mediawiki:Common.css]]''': be aware that it is not used for the login and preferences pages (you can, hower, [http://www.mediawiki.org/wiki/Manual:CSS#Styles_not_working_on_Special:UserLogin_or_Special:Preferences.3F allow it] if you don't care for the security implications)
* via '''[[Mediawiki:Tweeki.css]]''': more specifically, this CSS will only be loaded when you're using Tweeki as a skin. Same exceptions as above!
* via your own extension

<pre>
$wgResourceModules['xxx'] = [
'styles' => 'styles.css',
'localBasePath' => '.',
'remoteExtPath' => '',
'position' => 'top'
];
</pre>

How-Tos

2019-04-18T22:49:30Z

Bmulckhu: /* Hide parts of the navigation on specific pages */

__TOC__

== Complete example configurations ==

Have a look at the [[Setup for tweeki.thai-land.at]] or the much more elaborate [[Setup for skriptenforum.net]].

== Navigation ==

=== Hide parts of the navigation on specific pages ===

You can use the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]]. See the [[Navigation|documentation on navigation]] to see a list of navigational sections and elements that can be hidden via this function.

Example: if you want to hide the right sidebar on the main page, add the code <code><nowiki>{{#tweekihide:sidebar-right}}</nowiki></code> to the page's content.

'''NB''': To make a section or an element ''hideable'', it must be enabled in <code>LocalSettings.php</code>. Please refer to [[Configuration_Options#Hiding Page Elements|Configuration Options]].

=== Show navigation or parts of it only for logged in users ===

Just add the [[Navigation|navigational sections and elements]] you want to hide for anonymous users to the <code>$wgTweekiSkinHideAnon</code> array in LocalSettings.php, e.g.

$wgTweekiSkinHideAnon = array( 'navbar' );

=== Add links to the footer ===

You can either use [http://www.mediawiki.org/wiki/Manual:Footer#Add_links_to_the_footer Mediawiki's default mechanisms] or you can add your own link or any [[Navigation|navigational section or element]] by placing it in [[MediaWiki:Tweeki-footer]] or [[MediaWiki:Tweeki-footer-custom]]. See also the detailed [[Footer Examples]].

=== Define your own tooltips and accesskeys for navigational elements ===

You just have to find out the id of the element and then edit <code>MediaWiki:Tooltip-MY-ID</code> and <code>MediaWiki:Accesskey-MY-ID</code>. If would like to have a tooltip and/or an accesskey for the toolbox dropdown you would just have to change the content of <code>MediaWiki:Tooltip-p-toolbox</code> and <code>MediaWiki:Accesskey-p-toolbox</code>.

=== Show or hide navigational elements depending e.g. on category ===

If you define your own navigational element in your extension or in <code>LocalSettings.php</code>, you can apply whatever logic you want. Your custom function should return a string that can be interpreted as a [[Buttons|button]].

Definition in <code>LocalSettings.php</code> (or in your extension):

$wgTweekiSkinNavigationalElements['MYNAV'] = 'mynav';

function mynav( $skin, $context ) {
$categories = $skin->getSkin()->getTitle()->getParentCategories();
if( is_array( $categories ) && array_key_exists( 'Category:MyCategory', $categories ) ) {
return 'myLink';
}
}

Now you can use <code>MYNAV</code> in any navigational section (e.g. the sidebar) and the link/button will only be shown on pages that belong to category 'MyCategory'.

=== Show a text block in a navigational section ===

If you define your own special element in your extension or in <code>LocalSettings.php</code>, you can insert any html into navigational sections.

Definition in <code>LocalSettings.php</code> (or in your extension):

$wgTweekiSkinSpecialElements['MYNAV'] = 'mynav';

function mynav( $skin, $context ) {
echo '<nowiki><div>my text</div></nowiki>';
}

Now you can use <code>MYNAV</code> in any navigational section (e.g. the sidebar) and the text will be shown.

== Styling ==

Tweeki comes standard with Twitter Bootstrap 3.3.7 installed; Common CSS, Components and Javascript components are all installed.

So don't forget to check [http://getbootstrap.com/docs/3.3/|the Bootstrap 3.3 documentation] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

=== Example: Styling Images ===

This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-responsive</code> to the image within the wiki text.
<pre>
[[File:Screenshot tweeki.png|class=img-responsive]]
</pre>

Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):

[[File:Screenshot tweeki.png|class=img-responsive]]

Now this was a ''very'' simple example, which might also be achieved without Bootstrap. But now try adding <code>img-circle</code> and see how that changes the appearance:

[[File:Screenshot tweeki.png|300px| class=img-circle]]

See [http://getbootstrap.com/docs/3.3/css/#images Bootstrap documentation] for details on styling images.

=== Example: Using grids ===

One of the major features of Bootstrap is the use of "grids", which can make your website responsive and adapt automatically to the size of the media (screen size). Consider this example with 3 panels in a grid width one row and three columns (on large screens).
Then see what it does when you change the size of your browser window.

<pre>
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>
</pre>

And the result looks like this:

<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>

Please refer to the [http://getbootstrap.com/docs/3.3/css/#grid Bootstrap documentation] for all details on grids.

=== Add custom CSS ===

The easiest way to add custom CSS is via the <code>MediaWiki:Common.css</code> or <code>MediaWiki:Tweeki.css</code> system messages. However, it has the drawback that it doesn't get loaded on the login page and user preferences page.

Another possibility is to [https://www.mediawiki.org/wiki/Manual:Developing_extensions create your own extension]. Place a CSS file in your extension directory. Then in your <code>extension.json</code> file add a ''Resource Module'' (replace “MYEXTENSION“ with your extension's name):

…
"ResourceModules": {
"x.MYEXTENSION.styles": {
"styles": [
"x.mystyles.css"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteExtPath": "MYEXTENSION"
},
…

Load the module either somewhere in your extension or add the following line to <code>LocalSettings.php</code>:

$wgTweekiSkinCustomCSS[] = 'x.MYEXTENSION.styles';

'''Attention!''' Your CSS file will be included via Ressource Loader. As the mechanism seems to sort the files in alphabetical order and you want your stylings to be loaded last (in order to overwrite default stylings) chose a name for your ''Resource Module'' accordingly (e.g. start with an 'x' as in the example).

=== Completely replace bootstrap files with customized versions ===

You can download your own customized version of bootstrap at [http://getbootstrap.com/customize/ getbootstrap.com] or get a free bootstrap theme from [http://bootswatch.com/ bootswatch.com]. To replace the default styles and scripts create your own extension, put the files in the extension folder and use the <code>$wgTweekiSkinCustomizedBootstrap</code> configuration:

$wgTweekiSkinCustomizedBootstrap = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'MyExtension'
);

The files should be organized in folders like this (mimicking the original structure from Tweeki):

<MyExtension>
– bootstrap
– css
– bootstrap.min.css
– bootstrap-theme.min.css
– js
– bootstrap.min.js

== Show hidden stuff ==

In order to increase usability Tweeki hides some of MediaWiki's features by default. Some things are really just hidden via CSS. E.g. if you want to see the category links at the bottom of the page, just add <code>#catlinks {display:block;}</code> to your custom CSS.

== Layout ==

=== Widths ===

If you want to use the full screen width, set the [[MediaWiki:Tweeki-container-class]] message to <code>container-fluid</code> (see [[Messages#Appearance|Messages/Appearance]]).

If you want to change the widths for the sidebars and the main content, see [[Configuration_Options#Grids|Configuration Options/Grids]]. If you want to have no offset for a page without sidebars, use the following lines in your <code>LocalSettings.php</code>:

$wgTweekiSkinGridNone = array(
"mainoffset" => 0,
"mainwidth" => 12
);

== Visual Editor ==

In principle, it should be possible to use Tweeki with [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor]. However, as VisualEditor is still in development and therefore a moving target, things can break very easily. I had it working with MW 1.26 and haven't been testing since. Just try it out, any patches are warmly welcome. As a starting point, you'll need this line in <code>LocalSettings.php</code> to make it work:

$wgVisualEditorSupportedSkins[] = 'tweeki';

== Logo ==

If you want to use an image instead of a text link for the “brand” section in the navigation, you can change the content of [[MediaWiki:Tweeki-navbar-brand]] to the name of an uploaded file (including the namespace), e.g. <code>File:MyLogo.png</code> (see also the [[Messages#Navbar|navbar section]] in the documentation for messages). By default the image will be shown with a height of 40px, use the <code>.navbar-brand img</code> selector to define your custom stylings.

== Standard Table Of Contents ==

If you want to have the usual table of contents at the top of the page, don't use the <code>TOC</code> navigational element in any of the navigational sections. Especially, you'll have to remove it from <code>Mediawiki:Tweeki-sidebar-right</code> as it belongs to this section's default content. On top of that you'll have to make it visible by adding the following line to your custom styles:

#toc {
display:block;
}

Please be aware that you'll have to add your own stylings in order to make it look nice.

Template:Carousel

2018-06-13T10:17:00Z

Bmulckhu:

<noinclude>
This is the template "{{PAGENAME}}". This template will display Bootstrap Carrousel with five images (incl. titles and captions). It uses custom styling to enable ''fading'' instead of ''sliding'' images.
<pre>
{{Carousel
|Image1=
|Title1=
|Caption1=
|Image2=
|Title2=
|Caption2=
|Image3=
|Title3=
|Caption3=
|Image4=
|Title4=
|Caption4=
|Image5=
|Title5=
|Caption5=
}}
</pre>
<span class="plainlinks">[{{fullurl:{{FULLPAGENAME}}|action=edit}} Edit this page]</span> to inspect the template text.
</noinclude><includeonly><div class="row main-slider">
<div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="#MyCarousel" data-slide-to="1"></li>
<li data-target="#MyCarousel" data-slide-to="2"></li>
<li data-target="#MyCarousel" data-slide-to="3"></li>
<li data-target="#MyCarousel" data-slide-to="4"></li>
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">
[[File:{{{Image1|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title1|}}}</h3>
<p>{{{Caption1}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image2|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title|}}}</h3>
<p>{{{Caption2}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image3|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title3|}}}</h3>
<p>{{{Caption3}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image4|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title4|}}}</h3>
<p>{{{Caption4}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image5|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title5|}}}</h3>
<p>{{{Caption5}}}</p>
</div>
</div>
</div>
</div>
</div></includeonly>

Carousel

2018-06-06T15:31:19Z

Bmulckhu: /* Using custom styling and template for Bootstrap carousel */

<div class="alert alert-warning">This page exists just for testing purposes. Carousels are not currently supported by Tweeki out of the box. Patches with CSS fixes and the necessary code to allow the <code>data-slider</code> attribute in <code>btn</code> elements are warmly welcome.</div>

This said, there is couple of workarounds, that you could use if you're really eager to get a carousel on you wiki:
# Use the standard Bootstrap-slider carousel ''without the controls''
# Use the [https://www.mediawiki.org/wiki/Extension:Widgets extension Widgets] if you need a full functioning carousel

Additionally, you can also adapt the standard Bootstrap ''slider'' to a ''fading'' carousel. This will make your carousel less "flashy". You will have to skip the ''controls'' part of the carousel as well, though.

== Standard carousel without controls ==

This is the more-or-less standard bootstrap carousel code, with the ''controls'' part removed. Then, only the images are adapted to wiki text:

<pre>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>
</pre>

'''NB: Make sure to remove all the indents (spaces), or they will mess up the layout!'''

=== Example Standard Carousel - no controls ===

This is what the result of the code above will look like:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>

== Bootstrap carousel using the Widget extension ==

TBD

== Using custom styling and template for Bootstrap carousel ==

WORK IN PROGRESS

''Fading'' from one image to the next is not a standard option for a Bootstrap carousel. To implement fading you need to add custom styling to [[MediaWiki:Common.css]] or [[Mediawiki:Tweeki.css]]. You can find the CSS you need to implement ''fading'' here: https://codepen.io/redfrost/pen/QwWMwb

Because Bootstrap carousel requires quite some html-code it makes sense to use a template. You can find an example of a working template for a carousel on [[Template:Carousel]] - feel free to copy it to your site!

Using this template you can display a carousel with five slides in a more convenient way:

<pre>
{{Carousel
|Image1=Screenshot_tweeki.png
|Title1= Screenshot 1
|Caption1= Website of Tweeki
|Image2=Screenshot_skrifo.png
|Title2= Screenshot 2
|Caption2= Website made with Tweeki
|Image3=Screenshot_tweeki.png
|Title3= Screenshot 3
|Caption3=Website of Tweeki
|Image4=Screenshot_skrifo.png
|Title4= Screenshot 4
|Caption4= Website made with Tweeki
|Image5=Screenshot_tweeki.png
|Title5= Screenshot 5
|Caption5=Website of Tweeki
}}
</pre>

=== Example ===

{{Carousel
|Image1=Screenshot_tweeki.png
|Title1= Screenshot 1
|Caption1= Website of Tweeki
|Image2=Screenshot_skrifo.png
|Title2= Screenshot 2
|Caption2= Website made with Tweeki
|Image3=Screenshot_tweeki.png
|Title3= Screenshot 3
|Caption3=Website of Tweeki
|Image4=Screenshot_skrifo.png
|Title4= Screenshot 4
|Caption4= Website made with Tweeki
|Image5=Screenshot_tweeki.png
|Title5= Screenshot 5
|Caption5=Website of Tweeki
}}

Carousel

2018-06-06T15:25:19Z

Bmulckhu: /* Using custom styling and template for Bootstrap carousel */

<div class="alert alert-warning">This page exists just for testing purposes. Carousels are not currently supported by Tweeki out of the box. Patches with CSS fixes and the necessary code to allow the <code>data-slider</code> attribute in <code>btn</code> elements are warmly welcome.</div>

This said, there is couple of workarounds, that you could use if you're really eager to get a carousel on you wiki:
# Use the standard Bootstrap-slider carousel ''without the controls''
# Use the [https://www.mediawiki.org/wiki/Extension:Widgets extension Widgets] if you need a full functioning carousel

Additionally, you can also adapt the standard Bootstrap ''slider'' to a ''fading'' carousel. This will make your carousel less "flashy". You will have to skip the ''controls'' part of the carousel as well, though.

== Standard carousel without controls ==

This is the more-or-less standard bootstrap carousel code, with the ''controls'' part removed. Then, only the images are adapted to wiki text:

<pre>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>
</pre>

'''NB: Make sure to remove all the indents (spaces), or they will mess up the layout!'''

=== Example Standard Carousel - no controls ===

This is what the result of the code above will look like:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>

== Bootstrap carousel using the Widget extension ==

TBD

== Using custom styling and template for Bootstrap carousel ==

WORK IN PROGRESS

''Fading'' from one image to the next is not a standard option for a Bootstrap carousel. To implement fading you need to add custom styling to [[MediaWiki:Common.css]] or [[Mediawiki:Tweeki.css]]. You can find the CSS you need to implement ''fading'' here: https://codepen.io/redfrost/pen/QwWMwb

<pre>
{{Carousel
|Image1=Screenshot_tweeki.png
|Title1= Screenshot 1
|Caption1= Website of Tweeki
|Image2=Screenshot_skrifo.png
|Title2= Screenshot 2
|Caption2= Website made with Tweeki
|Image3=Screenshot_tweeki.png
|Title3= Screenshot 3
|Caption3=Website of Tweeki
|Image4=Screenshot_skrifo.png
|Title4= Screenshot 4
|Caption4= Website made with Tweeki
|Image5=Screenshot_tweeki.png
|Title5= Screenshot 5
|Caption5=Website of Tweeki
}}
</pre>

Carousel

2018-06-06T15:19:28Z

Bmulckhu: /* Using custom styling and template for Bootstrap carousel */

<div class="alert alert-warning">This page exists just for testing purposes. Carousels are not currently supported by Tweeki out of the box. Patches with CSS fixes and the necessary code to allow the <code>data-slider</code> attribute in <code>btn</code> elements are warmly welcome.</div>

This said, there is couple of workarounds, that you could use if you're really eager to get a carousel on you wiki:
# Use the standard Bootstrap-slider carousel ''without the controls''
# Use the [https://www.mediawiki.org/wiki/Extension:Widgets extension Widgets] if you need a full functioning carousel

Additionally, you can also adapt the standard Bootstrap ''slider'' to a ''fading'' carousel. This will make your carousel less "flashy". You will have to skip the ''controls'' part of the carousel as well, though.

== Standard carousel without controls ==

This is the more-or-less standard bootstrap carousel code, with the ''controls'' part removed. Then, only the images are adapted to wiki text:

<pre>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>
</pre>

'''NB: Make sure to remove all the indents (spaces), or they will mess up the layout!'''

=== Example Standard Carousel - no controls ===

This is what the result of the code above will look like:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>

== Bootstrap carousel using the Widget extension ==

TBD

== Using custom styling and template for Bootstrap carousel ==

WORK IN PROGRESS

<pre>
{{Carousel
|Image1=Screenshot_tweeki.png
|Title1= Screenshot 1
|Caption1= Website of Tweeki
|Image2=Screenshot_skrifo.png
|Title2= Screenshot 2
|Caption2= Website made with Tweeki
|Image3=Screenshot_tweeki.png
|Title3= Screenshot 3
|Caption3=Website of Tweeki
|Image4=Screenshot_skrifo.png
|Title4= Screenshot 4
|Caption4= Website made with Tweeki
|Image5=Screenshot_tweeki.png
|Title5= Screenshot 5
|Caption5=Website of Tweeki
}}
</pre>

Template:Carousel

2018-06-06T15:15:03Z

Bmulckhu: Created page with "<noinclude> This is the template "{{PAGENAME}}". This template will display Bootstrap Carrousel with five images (incl. titles and captions). It uses custom styling to enable..."

<noinclude>
This is the template "{{PAGENAME}}". This template will display Bootstrap Carrousel with five images (incl. titles and captions). It uses custom styling to enable ''fading'' instead of ''sliding'' images.
<pre>
{{Carousel
|Image1=
|Title1=
|Caption1=
|Image2=
|Title2=
|Caption2=
|Image3=
|Title3=
|Caption3=
|Image4=
|Title4=
|Caption4=
|Image5=
|Title5=
|Caption5=
}}
</pre>
<span class="plainlinks">[{{fullurl:{{FULLPAGENAME}}|action=edit}} Edit this page]</span> to inspect the template text.
</noinclude><includeonly><div class="row main-slider">
<div id="CarrouselTE1" class="carousel slide carousel-fade" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="#MyCarousel" data-slide-to="1"></li>
<li data-target="#MyCarousel" data-slide-to="2"></li>
<li data-target="#MyCarousel" data-slide-to="3"></li>
<li data-target="#MyCarousel" data-slide-to="4"></li>
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">
[[File:{{{Image1|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title1|}}}</h3>
<p>{{{Caption1}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image2|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title|}}}</h3>
<p>{{{Caption2}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image3|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title3|}}}</h3>
<p>{{{Caption3}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image4|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title4|}}}</h3>
<p>{{{Caption4}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image5|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title5|}}}</h3>
<p>{{{Caption5}}}</p>
</div>
</div>
</div>

</div>
</div></includeonly>

Carousel

2018-06-06T15:12:11Z

Bmulckhu: /* Using custom styling and template for Bootstrap carousel */

<div class="alert alert-warning">This page exists just for testing purposes. Carousels are not currently supported by Tweeki out of the box. Patches with CSS fixes and the necessary code to allow the <code>data-slider</code> attribute in <code>btn</code> elements are warmly welcome.</div>

This said, there is couple of workarounds, that you could use if you're really eager to get a carousel on you wiki:
# Use the standard Bootstrap-slider carousel ''without the controls''
# Use the [https://www.mediawiki.org/wiki/Extension:Widgets extension Widgets] if you need a full functioning carousel

Additionally, you can also adapt the standard Bootstrap ''slider'' to a ''fading'' carousel. This will make your carousel less "flashy". You will have to skip the ''controls'' part of the carousel as well, though.

== Standard carousel without controls ==

This is the more-or-less standard bootstrap carousel code, with the ''controls'' part removed. Then, only the images are adapted to wiki text:

<pre>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>
</pre>

'''NB: Make sure to remove all the indents (spaces), or they will mess up the layout!'''

=== Example Standard Carousel - no controls ===

This is what the result of the code above will look like:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">
<div class="item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 1</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 2</h3>
</div>
</div>
<div class="item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
<div class="carousel-caption">
<h3 style="color: red">Caption 3</h3>
</div>
</div>
</div>


</div>

== Bootstrap carousel using the Widget extension ==

TBD

== Using custom styling and template for Bootstrap carousel ==

WORK IN PROGRESS

<pre>
<noinclude>
This is the template "{{PAGENAME}}". This template will display Bootstrap Carrousel with five images (incl. titles and captions). It uses custom styling to enable ''fading'' instead of ''sliding'' images.
<pre>
{{Carousel
|Image1=
|Title1=
|Caption1=
|Image2=
|Title2=
|Caption2=
|Image3=
|Title3=
|Caption3=
|Image4=
|Title4=
|Caption4=
|Image5=
|Title5=
|Caption5=
}}
</pre>
<span class="plainlinks">[{{fullurl:{{FULLPAGENAME}}|action=edit}} Edit this page]</span> to inspect the template text.
</noinclude><includeonly><div class="row main-slider">
<div id="CarrouselTE1" class="carousel slide carousel-fade" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#MyCarousel" data-slide-to="0" class="active"></li>
<li data-target="#MyCarousel" data-slide-to="1"></li>
<li data-target="#MyCarousel" data-slide-to="2"></li>
<li data-target="#MyCarousel" data-slide-to="3"></li>
<li data-target="#MyCarousel" data-slide-to="4"></li>
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">
[[File:{{{Image1|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title1|}}}</h3>
<p>{{{Caption1}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image2|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title|}}}</h3>
<p>{{{Caption2}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image3|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title3|}}}</h3>
<p>{{{Caption3}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image4|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title4|}}}</h3>
<p>{{{Caption4}}}</p>
</div>
</div>

<div class="item ">
[[File:{{{Image5|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
<div class="carousel-caption">
<h3>{{{Title5|}}}</h3>
<p>{{{Caption5}}}</p>
</div>
</div>
</div>

</div>
</div></includeonly>

</pre>

Carousel

2018-06-06T14:44:43Z

Bmulckhu:

How-Tos

2018-05-02T15:05:44Z

Bmulckhu: /* Example: Responsive Images */ addition of ing-round example

__TOC__

== Complete example configurations ==

Have a look at the [[Setup for tweeki.thai-land.at]] or the much more elaborate [[Setup for skriptenforum.net]].

== Navigation ==

=== Hide parts of the navigation on specific pages ===

You can use the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]]. See the [[Navigation|documentation on navigation]] to see a list of navigational sections and elements that can be hidden via this function.

Example: if you want to hide the right sidebar on the main page, add the code <code><nowiki>{{#tweekihide:sidebar-right}}</nowiki></code> to the page's content.

=== Show navigation or parts of it only for logged in users ===

Just add the [[Navigation|navigational sections and elements]] you want to hide for anonymous users to the <code>$wgTweekiSkinHideAnon</code> array in LocalSettings.php, e.g.

$wgTweekiSkinHideAnon = array( 'navbar' );

=== Add links to the footer ===

You can either use [http://www.mediawiki.org/wiki/Manual:Footer#Add_links_to_the_footer Mediawiki's default mechanisms] or you can add your own link or any [[Navigation|navigational section or element]] by placing it in [[MediaWiki:Tweeki-footer]] or [[MediaWiki:Tweeki-footer-custom]]. See also the detailed [[Footer Examples]].

=== Define your own tooltips and accesskeys for navigational elements ===

You just have to find out the id of the element and then edit <code>MediaWiki:Tooltip-MY-ID</code> and <code>MediaWiki:Accesskey-MY-ID</code>. If would like to have a tooltip and/or an accesskey for the toolbox dropdown you would just have to change the content of <code>MediaWiki:Tooltip-p-toolbox</code> and <code>MediaWiki:Accesskey-p-toolbox</code>.

=== Show or hide navigational elements depending e.g. on category ===

If you define your own navigational element in your extension or in <code>LocalSettings.php</code>, you can apply whatever logic you want. Your custom function should return a string that can be interpreted as a [[Buttons|button]].

Definition in <code>LocalSettings.php</code> (or in your extension):

$wgTweekiSkinNavigationalElements['MYNAV'] = 'mynav';

function mynav( $skin, $context ) {
$categories = $skin->getSkin()->getTitle()->getParentCategories();
if( is_array( $categories ) && array_key_exists( 'Category:MyCategory', $categories ) ) {
return 'myLink';
}
}

Now you can use <code>MYNAV</code> in any navigational section (e.g. the sidebar) and the link/button will only be shown on pages that belong to category 'MyCategory'.

== Styling ==

Tweeki comes standard with Twitter Bootstrap 3.3.7 installed; Common CSS, Components and Javascript components are all installed.

So don't forget to check [http://getbootstrap.com/docs/3.3/|the Bootstrap 3.3 documentation] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

=== Example: Styling Images ===

This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-responsive</code> to the image within the wiki text.
<pre>
[[File:Screenshot tweeki.png|class=img-responsive]]
</pre>

Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):

[[File:Screenshot tweeki.png|class=img-responsive]]

Now this was a ''very'' simple example, which might also be achieved without Bootstrap. But now try adding <code>img-circle</code> and see how that changes the appearance:

[[File:Screenshot tweeki.png|300px| class=img-circle]]

See [http://getbootstrap.com/docs/3.3/css/#images Bootstrap documentation] for details on styling images.

=== Example: Using grids ===

One of the major features of Bootstrap is the use of "grids", which can make your website responsive and adapt automatically to the size of the media (screen size). Consider this example with 3 panels in a grid width one row and three columns (on large screens).
Then see what it does when you change the size of your browser window.

<pre>
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>
</pre>

And the result looks like this:

<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>

Please refer to the [http://getbootstrap.com/docs/3.3/css/#grid Bootstrap documentation] for all details on grids.

=== Add custom CSS ===

The easiest way to add custom CSS is via the <code>MediaWiki:Common.css</code> or <code>MediaWiki:Tweeki.css</code> system messages. However, it has the drawback that it doesn't get loaded on the login page and user preferences page.

Another possibility is to [https://www.mediawiki.org/wiki/Manual:Developing_extensions create your own extension]. Place a CSS file in your extension directory. Then in your <code>extension.json</code> file add a ''Resource Module'' (replace “MYEXTENSION“ with your extension's name):

…
"ResourceModules": {
"x.MYEXTENSION.styles": {
"styles": [
"x.mystyles.css"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteExtPath": "MYEXTENSION"
},
…

Load the module either somewhere in your extension or add the following line to <code>LocalSettings.php</code>:

$wgTweekiSkinCustomCSS[] = 'x.MYEXTENSION.styles';

'''Attention!''' Your CSS file will be included via Ressource Loader. As the mechanism seems to sort the files in alphabetical order and you want your stylings to be loaded last (in order to overwrite default stylings) chose a name for your ''Resource Module'' accordingly (e.g. start with an 'x' as in the example).

=== Completely replace bootstrap files with customized versions ===

You can download your own customized version of bootstrap at [http://getbootstrap.com/customize/ getbootstrap.com] or get a free bootstrap theme from [http://bootswatch.com/ bootswatch.com]. To replace the default styles and scripts create your own extension, put the files in the extension folder and use the <code>$wgTweekiSkinCustomizedBootstrap</code> configuration:

$wgTweekiSkinCustomizedBootstrap = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'MyExtension'
);

The files should be organized in folders like this (mimicking the original structure from Tweeki):

<MyExtension>
– bootstrap
– css
– bootstrap.min.css
– bootstrap-theme.min.css
– js
– bootstrap.min.js

== Show hidden stuff ==

In order to increase usability Tweeki hides some of MediaWiki's features by default. Some things are really just hidden via CSS. E.g. if you want to see the category links at the bottom of the page, just add <code>#catlinks {display:block;}</code> to your custom CSS.

== Layout ==

=== Widths ===

If you want to use the full screen width, set the [[MediaWiki:Tweeki-container-class]] message to <code>container-fluid</code> (see [[Messages#Appearance|Messages/Appearance]]).

If you want to change the widths for the sidebars and the main content, see [[Configuration_Options#Grids|Configuration Options/Grids]]. If you want to have no offset for a page without sidebars, use the following lines in your <code>LocalSettings.php</code>:

$wgTweekiSkinGridNone = array(
"mainoffset" => 0,
"mainwidth" => 12
);

== Visual Editor ==

In principle, it should be possible to use Tweeki with [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor]. However, as VisualEditor is still in development and therefore a moving target, things can break very easily. I had it working with MW 1.26 and haven't been testing since. Just try it out, any patches are warmly welcome. As a starting point, you'll need this line in <code>LocalSettings.php</code> to make it work:

$wgVisualEditorSupportedSkins[] = 'tweeki';

== Logo ==

If you want to use an image instead of a text link for the “brand” section in the navigation, you can change the content of [[MediaWiki:Tweeki-navbar-brand]] to the name of an uploaded file (including the namespace), e.g. <code>File:MyLogo.png</code> (see also the [[Messages#Navbar|navbar section]] in the documentation for messages). By default the image will be shown with a height of 40px, use the <code>.navbar-brand img</code> selector to define your custom stylings.

== Standard Table Of Contents ==

If you want to have the usual table of contents at the top of the page, don't use the <code>TOC</code> navigational element in any of the navigational sections. Especially, you'll have to remove it from <code>Mediawiki:Tweeki-sidebar-right</code> as it belongs to this section's default content. On top of that you'll have to make it visible by adding the following line to your custom styles:

#toc {
display:block;
}

Please be aware that you'll have to add your own stylings in order to make it look nice.

How-Tos

2018-05-02T14:55:19Z

Bmulckhu: /* Example: Using grids */ - small improvement

__TOC__

== Complete example configurations ==

Have a look at the [[Setup for tweeki.thai-land.at]] or the much more elaborate [[Setup for skriptenforum.net]].

== Navigation ==

=== Hide parts of the navigation on specific pages ===

You can use the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]]. See the [[Navigation|documentation on navigation]] to see a list of navigational sections and elements that can be hidden via this function.

Example: if you want to hide the right sidebar on the main page, add the code <code><nowiki>{{#tweekihide:sidebar-right}}</nowiki></code> to the page's content.

=== Show navigation or parts of it only for logged in users ===

Just add the [[Navigation|navigational sections and elements]] you want to hide for anonymous users to the <code>$wgTweekiSkinHideAnon</code> array in LocalSettings.php, e.g.

$wgTweekiSkinHideAnon = array( 'navbar' );

=== Add links to the footer ===

You can either use [http://www.mediawiki.org/wiki/Manual:Footer#Add_links_to_the_footer Mediawiki's default mechanisms] or you can add your own link or any [[Navigation|navigational section or element]] by placing it in [[MediaWiki:Tweeki-footer]] or [[MediaWiki:Tweeki-footer-custom]]. See also the detailed [[Footer Examples]].

=== Define your own tooltips and accesskeys for navigational elements ===

You just have to find out the id of the element and then edit <code>MediaWiki:Tooltip-MY-ID</code> and <code>MediaWiki:Accesskey-MY-ID</code>. If would like to have a tooltip and/or an accesskey for the toolbox dropdown you would just have to change the content of <code>MediaWiki:Tooltip-p-toolbox</code> and <code>MediaWiki:Accesskey-p-toolbox</code>.

=== Show or hide navigational elements depending e.g. on category ===

If you define your own navigational element in your extension or in <code>LocalSettings.php</code>, you can apply whatever logic you want. Your custom function should return a string that can be interpreted as a [[Buttons|button]].

Definition in <code>LocalSettings.php</code> (or in your extension):

$wgTweekiSkinNavigationalElements['MYNAV'] = 'mynav';

function mynav( $skin, $context ) {
$categories = $skin->getSkin()->getTitle()->getParentCategories();
if( is_array( $categories ) && array_key_exists( 'Category:MyCategory', $categories ) ) {
return 'myLink';
}
}

Now you can use <code>MYNAV</code> in any navigational section (e.g. the sidebar) and the link/button will only be shown on pages that belong to category 'MyCategory'.

== Styling ==

Tweeki comes standard with Twitter Bootstrap 3.3.7 installed; Common CSS, Components and Javascript components are all installed.

So don't forget to check [http://getbootstrap.com/docs/3.3/|the Bootstrap 3.3 documentation] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

=== Example: Responsive Images ===

This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-responsive</code> to the image within the wiki text.
<pre>
[[File:Screenshot tweeki.png|class=img-responsive]]
</pre>

Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):

[[File:Screenshot tweeki.png|class=img-responsive]]

See [http://getbootstrap.com/docs/3.3/css/#images-responsive Bootstrap documentation] for details on <code>img-responsive</code>

=== Example: Using grids ===

One of the major features of Bootstrap is the use of "grids", which can make your website responsive and adapt automatically to the size of the media (screen size). Consider this example with 3 panels in a grid width one row and three columns (on large screens).
Then see what it does when you change the size of your browser window.

<pre>
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>
</pre>

And the result looks like this:

<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|class=img-responsive| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>

Please refer to the [http://getbootstrap.com/docs/3.3/css/#grid Bootstrap documentation] for all details on grids.

=== Add custom CSS ===

The easiest way to add custom CSS is via the <code>MediaWiki:Common.css</code> or <code>MediaWiki:Tweeki.css</code> system messages. However, it has the drawback that it doesn't get loaded on the login page and user preferences page.

Another possibility is to [https://www.mediawiki.org/wiki/Manual:Developing_extensions create your own extension]. Place a CSS file in your extension directory. Then in your <code>extension.json</code> file add a ''Resource Module'' (replace “MYEXTENSION“ with your extension's name):

…
"ResourceModules": {
"x.MYEXTENSION.styles": {
"styles": [
"x.mystyles.css"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteExtPath": "MYEXTENSION"
},
…

Load the module either somewhere in your extension or add the following line to <code>LocalSettings.php</code>:

$wgTweekiSkinCustomCSS[] = 'x.MYEXTENSION.styles';

'''Attention!''' Your CSS file will be included via Ressource Loader. As the mechanism seems to sort the files in alphabetical order and you want your stylings to be loaded last (in order to overwrite default stylings) chose a name for your ''Resource Module'' accordingly (e.g. start with an 'x' as in the example).

=== Completely replace bootstrap files with customized versions ===

You can download your own customized version of bootstrap at [http://getbootstrap.com/customize/ getbootstrap.com] or get a free bootstrap theme from [http://bootswatch.com/ bootswatch.com]. To replace the default styles and scripts create your own extension, put the files in the extension folder and use the <code>$wgTweekiSkinCustomizedBootstrap</code> configuration:

$wgTweekiSkinCustomizedBootstrap = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'MyExtension'
);

The files should be organized in folders like this (mimicking the original structure from Tweeki):

<MyExtension>
– bootstrap
– css
– bootstrap.min.css
– bootstrap-theme.min.css
– js
– bootstrap.min.js

== Show hidden stuff ==

In order to increase usability Tweeki hides some of MediaWiki's features by default. Some things are really just hidden via CSS. E.g. if you want to see the category links at the bottom of the page, just add <code>#catlinks {display:block;}</code> to your custom CSS.

== Layout ==

=== Widths ===

If you want to use the full screen width, set the [[MediaWiki:Tweeki-container-class]] message to <code>container-fluid</code> (see [[Messages#Appearance|Messages/Appearance]]).

If you want to change the widths for the sidebars and the main content, see [[Configuration_Options#Grids|Configuration Options/Grids]]. If you want to have no offset for a page without sidebars, use the following lines in your <code>LocalSettings.php</code>:

$wgTweekiSkinGridNone = array(
"mainoffset" => 0,
"mainwidth" => 12
);

== Visual Editor ==

In principle, it should be possible to use Tweeki with [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor]. However, as VisualEditor is still in development and therefore a moving target, things can break very easily. I had it working with MW 1.26 and haven't been testing since. Just try it out, any patches are warmly welcome. As a starting point, you'll need this line in <code>LocalSettings.php</code> to make it work:

$wgVisualEditorSupportedSkins[] = 'tweeki';

== Logo ==

If you want to use an image instead of a text link for the “brand” section in the navigation, you can change the content of [[MediaWiki:Tweeki-navbar-brand]] to the name of an uploaded file (including the namespace), e.g. <code>File:MyLogo.png</code> (see also the [[Messages#Navbar|navbar section]] in the documentation for messages). By default the image will be shown with a height of 40px, use the <code>.navbar-brand img</code> selector to define your custom stylings.

== Standard Table Of Contents ==

If you want to have the usual table of contents at the top of the page, don't use the <code>TOC</code> navigational element in any of the navigational sections. Especially, you'll have to remove it from <code>Mediawiki:Tweeki-sidebar-right</code> as it belongs to this section's default content. On top of that you'll have to make it visible by adding the following line to your custom styles:

#toc {
display:block;
}

Please be aware that you'll have to add your own stylings in order to make it look nice.

How-Tos

2018-05-02T14:47:54Z

Bmulckhu: /* Example: Grids */

__TOC__

== Complete example configurations ==

Have a look at the [[Setup for tweeki.thai-land.at]] or the much more elaborate [[Setup for skriptenforum.net]].

== Navigation ==

=== Hide parts of the navigation on specific pages ===

You can use the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]]. See the [[Navigation|documentation on navigation]] to see a list of navigational sections and elements that can be hidden via this function.

Example: if you want to hide the right sidebar on the main page, add the code <code><nowiki>{{#tweekihide:sidebar-right}}</nowiki></code> to the page's content.

=== Show navigation or parts of it only for logged in users ===

Just add the [[Navigation|navigational sections and elements]] you want to hide for anonymous users to the <code>$wgTweekiSkinHideAnon</code> array in LocalSettings.php, e.g.

$wgTweekiSkinHideAnon = array( 'navbar' );

=== Add links to the footer ===

You can either use [http://www.mediawiki.org/wiki/Manual:Footer#Add_links_to_the_footer Mediawiki's default mechanisms] or you can add your own link or any [[Navigation|navigational section or element]] by placing it in [[MediaWiki:Tweeki-footer]] or [[MediaWiki:Tweeki-footer-custom]]. See also the detailed [[Footer Examples]].

=== Define your own tooltips and accesskeys for navigational elements ===

You just have to find out the id of the element and then edit <code>MediaWiki:Tooltip-MY-ID</code> and <code>MediaWiki:Accesskey-MY-ID</code>. If would like to have a tooltip and/or an accesskey for the toolbox dropdown you would just have to change the content of <code>MediaWiki:Tooltip-p-toolbox</code> and <code>MediaWiki:Accesskey-p-toolbox</code>.

=== Show or hide navigational elements depending e.g. on category ===

If you define your own navigational element in your extension or in <code>LocalSettings.php</code>, you can apply whatever logic you want. Your custom function should return a string that can be interpreted as a [[Buttons|button]].

Definition in <code>LocalSettings.php</code> (or in your extension):

$wgTweekiSkinNavigationalElements['MYNAV'] = 'mynav';

function mynav( $skin, $context ) {
$categories = $skin->getSkin()->getTitle()->getParentCategories();
if( is_array( $categories ) && array_key_exists( 'Category:MyCategory', $categories ) ) {
return 'myLink';
}
}

Now you can use <code>MYNAV</code> in any navigational section (e.g. the sidebar) and the link/button will only be shown on pages that belong to category 'MyCategory'.

== Styling ==

Tweeki comes standard with Twitter Bootstrap 3.3.7 installed; Common CSS, Components and Javascript components are all installed.

So don't forget to check [http://getbootstrap.com/docs/3.3/|the Bootstrap 3.3 documentation] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

=== Example: Responsive Images ===

This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-responsive</code> to the image within the wiki text.
<pre>
[[File:Screenshot tweeki.png|class=img-responsive]]
</pre>

Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):

[[File:Screenshot tweeki.png|class=img-responsive]]

See [http://getbootstrap.com/docs/3.3/css/#images-responsive Bootstrap documentation] for details on <code>img-responsive</code>

=== Example: Using grids ===

One of the major features of Bootstrap is the use of "grids", which can make your website responsive and adapt automatically to the size of the media (screen size). Consider this example with 3 panels in a grid width one row and three columns (on large screens).
Then see what it does when you change the size of your browser window.

<pre>
<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|200px| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|200px| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|200px| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>
</pre>

And the result looks like this:

<div class="flex-row row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 1</div>
<div class="panel-body">[[File:Screenshot tweeki.png|200px| link=]]
</div>
<div class="panel-footer">Footer text 1</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 2</div>
<div class="panel-body">[[File:Screenshot tweeki.png|200px| link=]]
</div>
<div class="panel-footer">Footer text 2</div>
</div>
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Title 3</div>
<div class="panel-body">[[File:Screenshot tweeki.png|200px| link=]]
</div>
<div class="panel-footer">Footer text 3</div>
</div>
</div>

</div>

Please refer to the [http://getbootstrap.com/docs/3.3/css/#grid Bootstrap documentation] for all details on grids.

=== Add custom CSS ===

The easiest way to add custom CSS is via the <code>MediaWiki:Common.css</code> or <code>MediaWiki:Tweeki.css</code> system messages. However, it has the drawback that it doesn't get loaded on the login page and user preferences page.

Another possibility is to [https://www.mediawiki.org/wiki/Manual:Developing_extensions create your own extension]. Place a CSS file in your extension directory. Then in your <code>extension.json</code> file add a ''Resource Module'' (replace “MYEXTENSION“ with your extension's name):

…
"ResourceModules": {
"x.MYEXTENSION.styles": {
"styles": [
"x.mystyles.css"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteExtPath": "MYEXTENSION"
},
…

Load the module either somewhere in your extension or add the following line to <code>LocalSettings.php</code>:

$wgTweekiSkinCustomCSS[] = 'x.MYEXTENSION.styles';

'''Attention!''' Your CSS file will be included via Ressource Loader. As the mechanism seems to sort the files in alphabetical order and you want your stylings to be loaded last (in order to overwrite default stylings) chose a name for your ''Resource Module'' accordingly (e.g. start with an 'x' as in the example).

=== Completely replace bootstrap files with customized versions ===

You can download your own customized version of bootstrap at [http://getbootstrap.com/customize/ getbootstrap.com] or get a free bootstrap theme from [http://bootswatch.com/ bootswatch.com]. To replace the default styles and scripts create your own extension, put the files in the extension folder and use the <code>$wgTweekiSkinCustomizedBootstrap</code> configuration:

$wgTweekiSkinCustomizedBootstrap = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'MyExtension'
);

The files should be organized in folders like this (mimicking the original structure from Tweeki):

<MyExtension>
– bootstrap
– css
– bootstrap.min.css
– bootstrap-theme.min.css
– js
– bootstrap.min.js

== Show hidden stuff ==

In order to increase usability Tweeki hides some of MediaWiki's features by default. Some things are really just hidden via CSS. E.g. if you want to see the category links at the bottom of the page, just add <code>#catlinks {display:block;}</code> to your custom CSS.

== Layout ==

=== Widths ===

If you want to use the full screen width, set the [[MediaWiki:Tweeki-container-class]] message to <code>container-fluid</code> (see [[Messages#Appearance|Messages/Appearance]]).

If you want to change the widths for the sidebars and the main content, see [[Configuration_Options#Grids|Configuration Options/Grids]]. If you want to have no offset for a page without sidebars, use the following lines in your <code>LocalSettings.php</code>:

$wgTweekiSkinGridNone = array(
"mainoffset" => 0,
"mainwidth" => 12
);

== Visual Editor ==

In principle, it should be possible to use Tweeki with [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor]. However, as VisualEditor is still in development and therefore a moving target, things can break very easily. I had it working with MW 1.26 and haven't been testing since. Just try it out, any patches are warmly welcome. As a starting point, you'll need this line in <code>LocalSettings.php</code> to make it work:

$wgVisualEditorSupportedSkins[] = 'tweeki';

== Logo ==

If you want to use an image instead of a text link for the “brand” section in the navigation, you can change the content of [[MediaWiki:Tweeki-navbar-brand]] to the name of an uploaded file (including the namespace), e.g. <code>File:MyLogo.png</code> (see also the [[Messages#Navbar|navbar section]] in the documentation for messages). By default the image will be shown with a height of 40px, use the <code>.navbar-brand img</code> selector to define your custom stylings.

== Standard Table Of Contents ==

If you want to have the usual table of contents at the top of the page, don't use the <code>TOC</code> navigational element in any of the navigational sections. Especially, you'll have to remove it from <code>Mediawiki:Tweeki-sidebar-right</code> as it belongs to this section's default content. On top of that you'll have to make it visible by adding the following line to your custom styles:

#toc {
display:block;
}

Please be aware that you'll have to add your own stylings in order to make it look nice.

How-Tos

2018-05-02T14:11:03Z

Bmulckhu: /* Add custom CSS */ small additions

__TOC__

== Complete example configurations ==

Have a look at the [[Setup for tweeki.thai-land.at]] or the much more elaborate [[Setup for skriptenforum.net]].

== Navigation ==

=== Hide parts of the navigation on specific pages ===

You can use the <code><nowiki>{{#tweekihide:}}</nowiki></code> [[Parser Functions#Tweekihide parser function|parser function]]. See the [[Navigation|documentation on navigation]] to see a list of navigational sections and elements that can be hidden via this function.

Example: if you want to hide the right sidebar on the main page, add the code <code><nowiki>{{#tweekihide:sidebar-right}}</nowiki></code> to the page's content.

=== Show navigation or parts of it only for logged in users ===

Just add the [[Navigation|navigational sections and elements]] you want to hide for anonymous users to the <code>$wgTweekiSkinHideAnon</code> array in LocalSettings.php, e.g.

$wgTweekiSkinHideAnon = array( 'navbar' );

=== Add links to the footer ===

You can either use [http://www.mediawiki.org/wiki/Manual:Footer#Add_links_to_the_footer Mediawiki's default mechanisms] or you can add your own link or any [[Navigation|navigational section or element]] by placing it in [[MediaWiki:Tweeki-footer]] or [[MediaWiki:Tweeki-footer-custom]]. See also the detailed [[Footer Examples]].

=== Define your own tooltips and accesskeys for navigational elements ===

You just have to find out the id of the element and then edit <code>MediaWiki:Tooltip-MY-ID</code> and <code>MediaWiki:Accesskey-MY-ID</code>. If would like to have a tooltip and/or an accesskey for the toolbox dropdown you would just have to change the content of <code>MediaWiki:Tooltip-p-toolbox</code> and <code>MediaWiki:Accesskey-p-toolbox</code>.

=== Show or hide navigational elements depending e.g. on category ===

If you define your own navigational element in your extension or in <code>LocalSettings.php</code>, you can apply whatever logic you want. Your custom function should return a string that can be interpreted as a [[Buttons|button]].

Definition in <code>LocalSettings.php</code> (or in your extension):

$wgTweekiSkinNavigationalElements['MYNAV'] = 'mynav';

function mynav( $skin, $context ) {
$categories = $skin->getSkin()->getTitle()->getParentCategories();
if( is_array( $categories ) && array_key_exists( 'Category:MyCategory', $categories ) ) {
return 'myLink';
}
}

Now you can use <code>MYNAV</code> in any navigational section (e.g. the sidebar) and the link/button will only be shown on pages that belong to category 'MyCategory'.

== Styling ==

Tweeki comes standard with Twitter Bootstrap 3.3.7 installed; Common CSS, Components and Javascript components are all installed.

So don't forget to check [http://getbootstrap.com/docs/3.3/|the Bootstrap 3.3 documentation] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

=== Example: Responsive Images ===

This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-responsive</code> to the image within the wiki text.
<pre>
[[File:Screenshot tweeki.png|class=img-responsive]]
</pre>

Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):

[[File:Screenshot tweeki.png|class=img-responsive]]

See [http://getbootstrap.com/docs/3.3/css/#images-responsive Bootstrap documentation] for details on <code>img-responsive</code>

=== Add custom CSS ===

The easiest way to add custom CSS is via the <code>MediaWiki:Common.css</code> or <code>MediaWiki:Tweeki.css</code> system messages. However, it has the drawback that it doesn't get loaded on the login page and user preferences page.

Another possibility is to [https://www.mediawiki.org/wiki/Manual:Developing_extensions create your own extension]. Place a CSS file in your extension directory. Then in your <code>extension.json</code> file add a ''Resource Module'' (replace “MYEXTENSION“ with your extension's name):

…
"ResourceModules": {
"x.MYEXTENSION.styles": {
"styles": [
"x.mystyles.css"
]
}
},
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteExtPath": "MYEXTENSION"
},
…

Load the module either somewhere in your extension or add the following line to <code>LocalSettings.php</code>:

$wgTweekiSkinCustomCSS[] = 'x.MYEXTENSION.styles';

'''Attention!''' Your CSS file will be included via Ressource Loader. As the mechanism seems to sort the files in alphabetical order and you want your stylings to be loaded last (in order to overwrite default stylings) chose a name for your ''Resource Module'' accordingly (e.g. start with an 'x' as in the example).

=== Completely replace bootstrap files with customized versions ===

You can download your own customized version of bootstrap at [http://getbootstrap.com/customize/ getbootstrap.com] or get a free bootstrap theme from [http://bootswatch.com/ bootswatch.com]. To replace the default styles and scripts create your own extension, put the files in the extension folder and use the <code>$wgTweekiSkinCustomizedBootstrap</code> configuration:

$wgTweekiSkinCustomizedBootstrap = array(
'localBasePath' => __DIR__,
'remoteExtPath' => 'MyExtension'
);

The files should be organized in folders like this (mimicking the original structure from Tweeki):

<MyExtension>
– bootstrap
– css
– bootstrap.min.css
– bootstrap-theme.min.css
– js
– bootstrap.min.js

== Show hidden stuff ==

In order to increase usability Tweeki hides some of MediaWiki's features by default. Some things are really just hidden via CSS. E.g. if you want to see the category links at the bottom of the page, just add <code>#catlinks {display:block;}</code> to your custom CSS.

== Layout ==

=== Widths ===

If you want to use the full screen width, set the [[MediaWiki:Tweeki-container-class]] message to <code>container-fluid</code> (see [[Messages#Appearance|Messages/Appearance]]).

If you want to change the widths for the sidebars and the main content, see [[Configuration_Options#Grids|Configuration Options/Grids]]. If you want to have no offset for a page without sidebars, use the following lines in your <code>LocalSettings.php</code>:

$wgTweekiSkinGridNone = array(
"mainoffset" => 0,
"mainwidth" => 12
);

== Visual Editor ==

In principle, it should be possible to use Tweeki with [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor]. However, as VisualEditor is still in development and therefore a moving target, things can break very easily. I had it working with MW 1.26 and haven't been testing since. Just try it out, any patches are warmly welcome. As a starting point, you'll need this line in <code>LocalSettings.php</code> to make it work:

$wgVisualEditorSupportedSkins[] = 'tweeki';

== Logo ==

If you want to use an image instead of a text link for the “brand” section in the navigation, you can change the content of [[MediaWiki:Tweeki-navbar-brand]] to the name of an uploaded file (including the namespace), e.g. <code>File:MyLogo.png</code> (see also the [[Messages#Navbar|navbar section]] in the documentation for messages). By default the image will be shown with a height of 40px, use the <code>.navbar-brand img</code> selector to define your custom stylings.

== Standard Table Of Contents ==

If you want to have the usual table of contents at the top of the page, don't use the <code>TOC</code> navigational element in any of the navigational sections. Especially, you'll have to remove it from <code>Mediawiki:Tweeki-sidebar-right</code> as it belongs to this section's default content. On top of that you'll have to make it visible by adding the following line to your custom styles:

#toc {
display:block;
}

Please be aware that you'll have to add your own stylings in order to make it look nice.

How-Tos

2018-05-02T14:07:08Z

Bmulckhu: /* Styling */ correction

How-Tos

2018-05-02T14:04:20Z

Bmulckhu: /* Styling */ Responsive images