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 4 levels:

• MediaWiki level, in LocalSettings.php file
• Wiki by create certain wiki pages in MediaWiki namespace
• 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' );

Create wiki pages in MediaWiki namespace

Fix the type of navbars

In file: MediaWiki:Tweeki-navbar-class

navbar navbar-default navbar-fixed-top

Main Menu

In file: MediaWiki:Sidebar.

* navigation
** mainpage|mainpage-description
** Bände|Bände
** Tafeln|Tafeln
** Abbildungen|Abbildungen
** Kartendarstellung|Kartendarstellung
** recentchanges-url|recentchanges
** randompage-url|randompage
** helppage|help
* SEARCH
* TOOLBOX
* LANGUAGES

Sidebar right

In file: MediaWiki:Tweeki-sidebar-right.

Contains only the wiki page actions extended and TOC.

EDIT-EXT,TOC

Navigation bar left

In file: MediaWiki:Tweeki-navbar-left

mainpage,Einstieg

Bände
Tafeln
Abbildungen
Kartendarstellung
http://interlinking-pictura.semantic-cora.org/index.php/Spezial:Daten_durchsuchen/Abbildung%7CAbbildungen gestuft
Externe Quellen
Klassifikation von Bertuch
Mitmachen

Verknüpfung von Daten
Überprüfung von Übersetzungen
Externe Quellen
Interlinking_Pictura:Über_Interlinking_Pictura|Über

Navigation bar right

In file: MediaWiki:Tweeki-navbar-right.

SEARCH

Navigation bar right

In file: MediaWiki:Tweeki-navbar-right.

SEARCH

Navigation bar for logo

In file: [1].

Logo was previously uploaded into wiki.

Datei:logo-pictura.png

Fix the sub-menu

In file: MediaWiki:Tweeki-subnav

TOOLBOX,PERSONAL, Special:RecentChanges|recentchanges

CSS for GUI

CSS file was created in MediaWiki:Common.css file. See Common.css.

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;
}

.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;
}

JavaScript level

JavaScript file was created in MediaWiki:Common.js file. See Common.js.

// Alias $j to jQuery for backwards compatibility
window.$ = jQuery;
// Attach to window and globally alias
window.mw = window.mediaWiki = mw;

jQuery.fn.ignore = function(sel){
  return this.clone().find(sel||">*").remove().end();
};

$(window).load(function() {

 jQuery('#firstHeading > span').html();
  var myDiv =  jQuery('.col-lg-5 >.panel-primary > .panel-heading>.panel-title');

   if ( myDiv.length){
       var val =  jQuery('.col-lg-5 >.panel-primary > .panel-heading>.panel-title ').ignore("span").html().trim();
       jQuery('#firstHeading > span').html(val);
    }
});
jQuery(document).ready(function() {
  var $ = jQuery.noConflict;
 var myDiv =  jQuery('.col-lg-5 >.panel-primary > .panel-heading>.panel-title');

   if ( myDiv.length){
       var val =  jQuery('.col-lg-5 >.panel-primary > .panel-heading>.panel-title ').ignore("span").html().trim();
       jQuery('#firstHeading > span').html(val);
    }
 
});