Documentation/Interlinking Pictura/Skin
Aus Semantic CorA
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
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
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
In file: MediaWiki:Tweeki-navbar-right.
SEARCH
In file: MediaWiki:Tweeki-navbar-right.
SEARCH
In file: [1].
Logo was previously uploaded into wiki.
Datei:logo-pictura.png
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);
}
});
