Documentation/Interlinking Pictura/Skin

VRE Interlinking Pictura implementation has been realized by extending the TWEEKI skin, one of the most frequently used bootstrap based skin. Documentation for installation and customization can be found here: TWEEKI .

Interlinking Pictura Customization

The cusomization is done at 3 levels:

• MediaWiki level, in LocalSettings.php file
• CSS for GUI
• JavaScript for little small requirements.

The following sections will describe this in details.

MediaWiki level

## skin setting
$wgTweekiSkinUseAwesome = true;
$wgTweekiSkinFooterIcons = true;
$wgTweekiSkinUseBootstrapTheme = true;

$wgTweekiSkinHideLoggedin =array( 'EDIT-EXT'=>false);
$wgTweekiSkinHideNonAdvanced = array( 'EDIT-EXT-special' => false );

$wgTweekiSkinSpecialElements = array(
    'FIRSTHEADING' => 'self::renderFirstHeading',
    'TOC' => 'self::renderTOC',
    'SEARCH' => 'self::renderSearch',
    'LOGO' => 'self::renderLogo',
    'LOGIN-EXT' => 'self::renderLoginExt'
);

$wgTweekiSkinGridRight = array(
    "mainoffset" => 0,
    "mainwidth" => 10,
    "rightoffset" => 0,
    "rightwidth" => 2
);

$wgTweekiSkinHideAnon = array( 'subnav' => true, 'PERSONAL' => true, 'TOOLBOX' => true, "LOGIN-EXT"=>false );

wfLoadSkin( 'Tweeki' );

CSS for GUI

Font for the headings:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.firstHeading{
font-family: 'Source Sans Pro', sans-serif;
}

Customization of font size, colour, font weight and letterspacing for the heading:

.firstHeading{
color: #8A2235; 
font-size: 24px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
letter-spacing: normal;
}

Customization of logo and setting an minimum height for navigation bar:

.navbar{
min-height: 60px;
}

.navbar-brand img {
height: 50px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a {
background-image: none;
background-color:#fff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: #555;
    background-color: #fff;
}

Customization of primary buttons and button’s states:

.btn-primary {
color: #fff;
   background-color: #898989;
background-image: linear-gradient(to bottom,#B2B3B3 0,#898989 100%);
background-repeat: repeat-x;
border-color: #898989;
}
btn-primary:focus, .btn-primary:hover, .btn-primary:active {
background-color: #096c72;
border-color: #898989;
background-position: 0;
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: #28bcc6;
    border-color: #28bcc6;
}

.mw-ui-button {
    background-color: #28bcc6;
    color: #fff;
    border: 1px solid #28bcc6;
    text-shadow: 0 1px rgba(0,0,0,0.1);
}


.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button {
    color: #fff;
    background-color: #28bcc6;
    border-color: #28bcc6;
}

Links formatting:

a {
    color: #28bcc6;
    text-decoration: none;
}

a:focus, a:hover {
    color: 096C8C;
    text-decoration: underline;
}

Font-awesome icons formatting correction:

{
.fa {
margin-right: 10px;
}

}

Panels formatting:

.panel-primary {
    border-color: #28bcc6;
}
.panel-title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
}
.panel-primary > .panel-heading {

   color: #fff;
   background-color: #28bcc6;
   border-color: #28bcc6;
background-image: linear-gradient(to bottom,#16a7b1 0,#28bcc6 100%);
}

Non-breaking text for sidebar buttons caption:

.sidebar-wrapper #ca-edit-ext {
   white-space: normal;
word-wrap: break-word;
}