Difference between revisions of "How-Tos"

From Tweeki
Jump to: navigation, search
Line 38: Line 38:
  
 
'''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).
 
'''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 ==
 
== 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.
 
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.

Revision as of 11:32, 8 November 2016

Complete example configurations

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

Navigation

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.

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.