Documentation/Interlinking Pictura/Skin: Unterschied zwischen den Versionen

Aus Semantic CorA
Wechseln zu: Navigation, Suche
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 4: Zeile 4:
 
== Interlinking Pictura Customization ==
 
== Interlinking Pictura Customization ==
  
The cusomization is done at 3 levels:
+
The cusomization is done at 4 levels:
  
 
* MediaWiki level, in LocalSettings.php file
 
* MediaWiki level, in LocalSettings.php file
 +
* Wiki by create certain wiki pages in MediaWiki namespace
 
* CSS for GUI
 
* CSS for GUI
 
* JavaScript for little small requirements.
 
* JavaScript for little small requirements.
Zeile 42: Zeile 43:
 
</pre>
 
</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]]
 
[[Category:Documentation]]

Aktuelle Version vom 23. Januar 2018, 13:33 Uhr

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

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