Help: How to's (Tweeki)

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.

Styling

Add custom CSS

One possibility is to create your own extension. Place a CSS file in your extension directory. Then in your extension setup file create a Resource Module and add it to $wgTweekiSkinCustom:

$wgResourceModules['x.MYEXTENSION.styles'] = array(
  'styles' => array(
		'screen.css' => array( 'media' => 'screen' )
	),
  'localBasePath' => __DIR__,
  'remoteExtPath' => 'MYEXTENSION',
);

$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.