Setup for skriptenforum.net

This page documents the configuration for the heavily costumized skriptenforum.net project. This is how the front page looks like:

In the next paragraphs we show you how we achieved this look and feel. We've put all the settings and code in our own extension (called “Skrifo“) and you can find all the details in it's repository on github.

Customized Bootstrap Files

We use a customized build of Bootstrap that we created with Bootstrap's customization tool. See our config.json to see the exact values we used.

To replace the default bootstrap style and script files we used the $wgTweekiSkinCustomizedBootstrap configuration option (see Skrifo.settings.php).

// Custom Bootstrap Styles
$wgTweekiSkinCustomizedBootstrap = array(
	'localBasePath' => __DIR__,
	'remoteExtPath' => 'Skrifo'
	);

Custom Page Renderer

The custom page renderer is defined in Skrifo.hooks.php:

/**
 * Page Renderer
 *
 * @param $skin
 */
static function PageRenderer( $skin ) {
    // page renderer code
}

The SkrifoHooks class is autoloaded in Skrifo.php:

$wgAutoloadClasses['SkrifoHooks'] = __DIR__ . '/Skrifo.hooks.php';

… and the page renderer is registered in Skrifo.settings.php:

$wgTweekiSkinPageRenderer = 'SkrifoHooks::PageRenderer';

Custom Styles

All the custom styles are defined as a resource module in Skrifo.php:

$wgResourceModules['x.skrifo.styles'] = array(
	'styles' => array(
		'css/skrifo.less' => array( 'media' => 'screen' ),
		'css/icons.less' => array( 'media' => 'screen' ),
		'css/fonts.less' => array( 'media' => 'screen' )
	),
	'localBasePath' => __DIR__,
	'remoteExtPath' => 'Skrifo',
);

They're loaded using the $wgTweekiSkinCustomCSS configuration option:

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

Custom Scripts

Again, they're defined as a resource module in Skrifo.php:

$wgResourceModules['ext.skrifo.scripts'] = array(
	'scripts' => array( '/js/skrifo.js' ),
	'localBasePath' => __DIR__,
	'remoteExtPath' => 'Skrifo',
	'dependencies' => array( 'ext.semanticforms.select2' )
);

This time, we use a hook to load the module. The hook is registered in Skrifo.php:

$wgHooks['BeforePageDisplay'][] = 'SkrifoHooks::LoadScripts';

… and defined in Skrifo.hooks.php:

/**
 * Resource modules für Skrifo hinzufügen
 *
 * @param $out OutputPage
 * @param $skin Skin
 */
static function LoadScripts( OutputPage &$out, Skin &$skin ) {
	$out->addModules( array( 'ext.skrifo.scripts' ) );
}

Other Configuration Settings

Here are some other settings that have been used in Skrifo.settings.php. (If you don't create your own extension for customization, you would normally put these in LocalSettings.php).

The following setting makes it possible to hide the specified navigational sections on particular pages using the {{#tweekihide}} parser function.

$wgTweekiSkinHideable = array( 'firstHeading', 'sidebar-left', 'sidebar-right' ); 

Use Bootstrap's tooltips functionality.

$wgTweekiSkinUseTooltips = true;

Do not use Bootstrap theme:

$wgTweekiSkinUseBootstrapTheme = false;