View source for 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: [https://tweeki.thai-land.at/wiki/Installation 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 ===
<pre>
## 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' );
</pre>

=== Create wiki pages in MediaWiki namespace ===

==== Fix the type of navbars ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-navbar-class MediaWiki:Tweeki-navbar-class]

<pre>
navbar navbar-default navbar-fixed-top
</pre>

==== Main Menu ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Sidebar MediaWiki:Sidebar].

<pre>
* 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
</pre>

==== Sidebar right ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-sidebar-right MediaWiki:Tweeki-sidebar-right].

Contains only the wiki page actions extended and TOC.

<pre>
EDIT-EXT,TOC
</pre>



==== Navigation bar left ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-navbar-left MediaWiki:Tweeki-navbar-left]

<pre>
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
</pre>

==== Navigation bar right ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-navbar-right MediaWiki:Tweeki-navbar-right].

SEARCH

==== Navigation bar right ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-navbar-right MediaWiki:Tweeki-navbar-right].
<pre>
SEARCH
</pre>

==== Navigation bar for logo ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-navbar-brand].

Logo was previously uploaded into wiki.

<pre>
Datei:logo-pictura.png
</pre>

==== Fix the sub-menu ====

In file: [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Tweeki-subnav MediaWiki:Tweeki-subnav]

<pre>
TOOLBOX,PERSONAL, Special:RecentChanges|recentchanges
</pre>

=== CSS for GUI ===

CSS file was created in MediaWiki:Common.css file. See [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Common.css Common.css].

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

Customization of font size, colour, font weight and letterspacing for the heading:
<pre>
.firstHeading{
color: #8A2235; 
font-size: 24px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
letter-spacing: normal;
}
</pre>

Customization of logo and setting an minimum height for navigation bar:
<pre>
.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;
}

</pre>

Customization of primary buttons and button’s states:
<pre>
.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;
}

</pre>

Links formatting:

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

a:focus, a:hover {
    color: 096C8C;
    text-decoration: underline;
}
</pre>

Font-awesome icons formatting correction:
<pre>
{
.fa {
margin-right: 10px;
}

}
</pre>

Panels formatting:

<pre>
.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%);
}
</pre>

Non-breaking text for sidebar buttons caption:

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

</pre>

=== JavaScript level ===

JavaScript file was created in MediaWiki:Common.js file. See [http://interlinking-pictura.semantic-cora.org/index.php/MediaWiki:Common.js Common.js].

<pre>
// 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);
    }
 
});
</pre>

[[Category:Documentation]]