How-Tos

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 {{#tweekihide:}} parser function. See the 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 {{#tweekihide:sidebar-right}} to the page's content.

Show navigation or parts of it only for logged in users

Just add the navigational sections and elements you want to hide for anonymous users to the $wgTweekiSkinHideAnon array in LocalSettings.php, e.g.

$wgTweekiSkinHideAnon = array( 'navbar' );

Add links to the footer

You can either use Mediawiki's default mechanisms or you can add your own link or any 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 MediaWiki:Tooltip-MY-ID and MediaWiki:Accesskey-MY-ID. If would like to have a tooltip and/or an accesskey for the toolbox dropdown you would just have to change the content of MediaWiki:Tooltip-p-toolbox and MediaWiki:Accesskey-p-toolbox.

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

If you define your own navigational element in your extension or in LocalSettings.php, you can apply whatever logic you want. Your custom function should return a string that can be interpreted as a button.

Definition in LocalSettings.php (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 MYNAV in any navigational section (e.g. the sidebar) and the link/button will only be shown on pages that belong to category 'MyCategory'.

Styling

Add custom CSS

The easiest way to add custom CSS is via the MediaWiki:Common.css system message. However, it has the drawback that it doesn't get loaded on the login page.

Another possibility is to create your own extension. Place a CSS file in your extension directory. Then in your extension.json 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 LocalSettings.php:

$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 getbootstrap.com or get a free bootstrap theme from bootswatch.com. To replace the default styles and scripts create your own extension, put the files in the extension folder and use the $wgTweekiSkinCustomizedBootstrap 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 #catlinks {display:block;} to your custom CSS.

Layout

Widths

If you want to use the full screen width, set the MediaWiki:Tweeki-container-class message to container-fluid (see Messages/Appearance).

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

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

Visual Editor

In principle, it should be possible to use Tweeki with 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 LocalSettings.php 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. File:MyLogo.png (see also the navbar section in the documentation for messages). By default the image will be shown with a height of 40px, use the .navbar-brand img 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 TOC navigational element in any of the navigational sections. Especially, you'll have to remove it from Mediawiki:Tweeki-sidebar-right 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.