Documentation/Interlinking Pictura/Skin: Unterschied zwischen den Versionen

Aus Semantic CorA
Wechseln zu: Navigation, Suche
Zeile 43: Zeile 43:
  
  
 +
=== CSS for GUI ===
  
 +
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;
 +
}
 +
 +
</pre>
  
 
[[Category:Documentation]]
 
[[Category:Documentation]]

Version vom 23. Januar 2018, 12:58 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 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;
}