Cora Skin implementation

Cora skin implementation has been realized by extended the vector skin which is one of classical skins packed with any of MediaWiki distribution. There is two different ways in which it was realized:

• Change CSS and sometimes, add jQuery functions;
• Modify inside an installed extension

CSS Modifications

• eliminate background (colored in #f6f6f6-Very light gray (mostly white) in mediawiki) conform designer specifications

 body{}

 body {
	background: none; 
 }

• move down the div #content - see designer link http://www.designfoerster.de/CorA/1_mainpage.html

and eliminate border line

 div#content {
       margin-top: 10px; 
       border: none;
 }

• setting div #p-logo dimensions and upload the new logo

 #p-logo {
        background-image: url(upload/CorA_Logo_395x55.png);
	background-position: center left;
	background-repeat: no-repeat;
	top: -115px;
	width: 395px;
	height: 55px;
        margin-left: 1.25em;
 }

• This area (mw-page-base, mw-head-base and mw-head) changed from 80px to 150px height

and mw-panel up from 160px from top to 150px from top. The reason is: changed logo position from top of the panel column into the "div#mw-head" area

 #mw-page-base {
	height: 150px;
        background: none;
 }

• this setting is also for horizontal menu (class VectorTabs and Vector Menu) and background color in horizontal menu

 div#mw-head-base {
	margin-top: -150px;
	margin-left: 12em;
	height: 150px;
        background-image: url(upload/VectorTabs-background.png); 
        border-bottom: solid 1px #aaa; 
 }

 div#mw-head {
        height: 150px;
 }

 div#mw-panel {
        top: 150px;
 }

• Change the position of search-field (space to the top) - So the search-field now is not an element of the navigation (next the VectorTabs and VectorMenu) - its position is singled out in the "div#mw-head" area

#p-search {
	margin-top: -70px;
        margin-left: -226px;
}

• change border (horizontal line) for mw-panel (left menu)

 div#mw-panel div.portal div.body {
        background-image: url(upload/Border_mw-panel.png);         
 }

• Change the position, height, border of elements under left-navigation (contain horizontal left menu "Message & Discussion")

and elements under right-navigation (contain horizontal left menu "Read & Edit & View history" and vectorMenu)

 #left-navigation {
	top: 130px;
        left: 191px;
 //	font-weight:bold;
 }

 #right-navigation {
	margin-top: 130px;
 //	font-weight:bold;
 }


 div.vectorTabs {
     background-image: none;
     height: 20px;
     
 }

 div.vectorTabs span {
     background-image: none;
 }

 div.vectorTabs ul {
        background: none;
 }

 div.vectorTabs ul li {
        background: none;
        border-bottom:solid 1px #aaa
 }

 div.vectorTabs li.selected {
        border-top: solid 1px #aaa;
        border-left: solid 1px #aaa;
        border-right: solid 1px #aaa;
        border-bottom: none;
 }


 div.vectorTabs span a {
        padding-top: 0;
 }

 div.vectorMenu h3 {
    border-bottom:none;
 }


 div.vectorMenu h3 a {
   height: 20px;
   background-image: none;
 }

• move the vertical menu (#VectorMenu) with 30px to the left otherwise is out to the html page

 
 .menu {
     left:-30px; 
 }

• move p-personal class to the top (with same height). Background has full "width" (100%) of the screen. Background-color: #666 (Very dark gray) and border with #ccc(Light gray)and color for menu in white (#fff)

 
 #p-personal {
	position: inherit;
	top: 0;
	right: 0;
	width: 100%;   
        background-color: #666;
        border-bottom: 1px solid #ccc; 
 }

 #p-personal ul {
        float: right;
        margin-right: 1em
 }

 #p-personal a,
 #p-personal a.new,
 #p-personal a.new:visited {
        color: #fff ;
 }

• Footer-Background has full "width" (100%) of the screen and same as div#p-personal

 div#footer {
	margin-left: 0;
        padding-left: 13em;
        background-color: #666;
        border-bottom: 1px solid #ccc; 
 }

 div#footer ul li,
 div#footer ul a {
        color: #fff ;
 }

• change icon for external link

 div#content a.external {
        background: url(upload/External_link.png) center right no-repeat;
 }

• For all links in general (colored blue in wiki) change color in #005500 (Very dark lime green)

and for links visited/active change color in #669966 (Mostly desaturated dark lime green) and for link:hover set the text-decoration to underline */

 a:link,
 a.external:link,
 #preftoc a:link
 {
	color: #005500 ; 
        text-decoration: none;
 }


 a:visited,
 a.new:visited,
 #preftoc a:visited {
        color: #669966 ;
 }

 a:hover {
        text-decoration: underline;
 }
 a:active {
	color: #669966;
 }

 div.vectorTabs li a {
        color: #005500 ;
 }

div.vectorTabs li.new a {
        color: #005500 ;
}

div.vectorTabs li.new a:visited {
        color: #669966;
}


 div.vectorMenu li a {
        color: #005500 ;
 }


 div.vectorMenu li.new a {
        color: #005500 ;
 }

div.vectorMenu li.new a:visited {
        color: #669966;
}

 div#mw-panel div.portal div.body ul li a {
        color: #005500 ;
 }

 div#mw-panel div.portal div.body ul li a:visited {
        color: #669966;
 }

• For links who need attention (for example there is no page existing - colored red in wiki)

and for graphic elements like icons - change color in #cc6600 (Strong orange)

 a.new:link {color: #cc6600;}

• For all tables change the color of border in #ccc (Light gray)

table.wikitable,    table.wikitable > tr > th,    table.wikitable > tr > td, 
table.wikitable > * > tr > th,    table.wikitable > * > tr > td {
        border: 1px solid #ccc;
}


table.wikitable > tr > th, 
table.wikitable > * > tr > th,
table.wikitable > * > tr > td.sortbottom {
        background-color: #f7f7f7;
        text-align:left;
}

tbody {
        background-color: #fff;
   vertical-align: top !important;
   text-align: left !important;
}

tbody td {
   vertical-align: top !important;
   text-align: left !important;
   background: #fff;
}

• HEADLINES (except h1 first heading) - change color from black in #333 (Very dark gray)

and line of the border bottom from #aaa (Gray) into #ccc (Light gray)

h1, h2, h3, h4, h5, h6 {}
h1, h2, h3, h4, h5, h6 {color: #333; border-bottom: 1px solid #ccc;}

• id or class="first heading" - no border-bottom

 h1#firstHeading {border-bottom: none;} 


 div.inhalt h2 {
     font-size: 18px;
     line-height: 21px;
 }

• Change --> list items are marked with NEW bullets

 ul {}
 ul {
	list-style-type: disc;
	/* @embed */
	list-style-image: url(upload/List_style_image.png);
 }

• Chage icon for user on top-right of the page in #p-personal div

 #pt-userpage,
 #pt-anonuserpage,
 #pt-login {
	/* @embed */
	background: url(upload/User.png) left top no-repeat;
 }

• Setting - The list-style should be vertical aligned with the text

 .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
 margin: 0.3em 0 0 0;
 padding-left: 12px;
 }

• Change all icon from any table with new icon (from black into orange)

 table.jquery-tablesorter th.headerSort {
           background-image: url(upload/Arrow_table.png) !important;
 }

 table.jquery-tablesorter th.headerSortDown {
           background-image: url(upload/Arrow_table_up.png) !important;
 }

 table.jquery-tablesorter th.headerSortUp {
           background-image: url(upload/Arrow_table_down.png) !important;
 }

• changed in CORA LEMMATA FORM

 form.createbox > fieldset {
         border: none;
 }

 .multipleTemplateInstance {
        background-color: #fff;
        border: none;
        padding: 0;
        margin: 0;
        border-spacing: 0;
 }

 input.autocompleteInput {
        border: 1px solid #ccc;
 }

 input.autocompleteInput:focus {
    border: 1px solid #005500;
    outline-style:none;
 }

 .ui-menu-item .ui-state-hover {
    background: #005500;
 }

select.createboxInput {
     width: 245px;
}

 select.createboxInput:focus {
    border: 1px solid #005500;
    outline-style:none;
 }


 a.addAboveButton {
       vertical-align: center;
       width: 20px;
       height: 20px;
       background-image: url(upload/SF_add_above.png);
 }

 a.addAboveButton:hover {
       width: 20px;
       height: 20px;
       background-image: url(upload/SF_add_above_hover.png);
 }

a.removeButton {
       width: 20px;
       height: 20px;
       background-image: url(upload/SF_remove.png);
}

a.removeButton:hover {
       width: 20px;
       height: 20px;
       background-image: url(upload/SF_remove_hover.png);
}

 a.instanceRearranger {
       width: 20px;
       height: 20px;
       background-image: url(upload/Rearranger.png);
 }

 a.instanceRearranger:hover {
       width: 20px;
       height: 20px;
       background-image: url(upload/Rearranger_hover.png);
 }

 div.multipleTemplateInstance > table > tbody > tr > td:nth-child(2),
 div.multipleTemplateInstance > table > tbody > tr > td:nth-child(3),
 div.multipleTemplateInstance > table > tbody > tr > td:nth-child(4)
 {
        width: 20px;        
        padding: 0px;
        vertical-align: middle !important;
 }

 textarea.createboxInput {
        border: 1px solid #ccc;
 }

 textarea.createboxInput:focus {
    border: 1px solid #005500;
    outline-style:none;
 }

input#wpSummary {
        border: 1px solid #ccc;
}

 input#wpSummary:focus {
    border: 1px solid #005500;
    outline-style:none;
 }

 input#wpMinoredit {
   // background-color: #ffffff;
   //  -webkit-appearance: none;
 }

Edit action

• change buttons appearance

input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], button {
    border: 1px solid #aaa;
    background: #f6f6f6;
    color: #005500;

}
#wpSave, #wpPreview,#wpDiff{
    border: 1px solid #aaa;
    background: #f6f6f6;
    color: #005500;
}

• fix the scrollbar

#editform textarea  {
	position: absolute;
	top: 0;
        left: 0;
	bottom: 0;
	right: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
}

#wpTextbox1::-webkit-scrollbar {
    width: 10px;
    height: 6px;
}

#wpTextbox1::-webkit-scrollbar-button:start:decrement,
#wpTextbox1::-webkit-scrollbar-button:end:increment {
    height: 30px;
    display: block;
    background-color: transparent;
}

#wpTextbox1::-webkit-scrollbar-track-piece {
    background-color: #f6f6f6;
    -webkit-border-radius: 6px;
}

#wpTextbox1::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #aaa;
    -webkit-border-radius: 6px;
}

#wpTextbox1::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #aaa;
    -webkit-border-radius: 3px;
}

#wpTextbox1::-webkit-scrollbar-button:start {
    display: none;
}

#wpTextbox1::-webkit-scrollbar-button:end {
    display: block;
}

• • fix mozilla scrollbar

@-moz-document url-prefix(http://),url-prefix(https://) {

scrollbar {
   -moz-appearance: none !important;
   background: rgb(0,255,0) !important;
}
thumb,scrollbarbutton {
   -moz-appearance: none !important;
   background-color: rgb(0,0,255) !important;
}

thumb:hover,scrollbarbutton:hover {
   -moz-appearance: none !important;
   background-color: rgb(255,0,0) !important;
}

scrollbarbutton {
   display: none !important;
}

scrollbar[orient="vertical"] {

  min-width: 15px !important;
}
}

SMW Semantic Browse css modifications

• change submit button

input[type="submit"]{
    border: 1px solid #aaa;
    background: #f6f6f6;
    color: #005500;
}

• remove by default formatting

table.smwb-factbox {
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
	width: 100%
}

• change browse table

 
tr.smwb-title {
	font-size: 100%;
        font-weight: bold;
	background-color: #ccc;
	line-height: 1.5;
}
 
tr.smwb-title td {
	padding: 10px 5px 10px 5px;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 1px;
	background-color: #f7f7f7;
}
 
tr.smwb-propvalue {
	width: 100%;
	background-color: #f7f7f7;
}
 
tr.smwb-propvalue th {}
 
tr.smwb-propvalue th {
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	font-size: 100%;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-right-color: #ccc;
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 0px;
	background-color: #f7f7f7;
	padding: 10px 5px 10px 5px;
}
 
tr.smwb-propvalue td {
	padding: 10px 5px 10px 5px;
	background-color: white;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 0px;
	width: 90%;
}
 
tr.smwb-center {
	background-color: #f7f7f7;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 0px;
        text-align: center;
}
 
tr.smwb-center td{
	background-color: #f7f7f7;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 0px;
        padding: 10px 5px 10px 5px;
}
 
span.smwb-value {
}

• change Inverse factbox

 
table.smwb-ifactbox {
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
	width: 100%
}
 
tr.smwb-ititle {
	font-size: 100%;
        font-weight: bold;
	background-color: #ccc;
	line-height: 1.5;
}
 
tr.smwb-ititle td {
	padding: 10px 5px 10px 5px;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 1px;
	background-color: #f7f7f7;
}
 
tr.smwb-ipropvalue {
	width: 100%;
	background-color: #f7f7f7;
        text-align: right;
}
 
tr.smwb-ipropvalue th {}
 
tr.smwb-ipropvalue th {
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	font-size: 100%;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-color: #ccc;
        border-left-style: solid;
        border-left-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 0px;
	background-color: #f7f7f7;
	padding: 10px 5px 10px 5px;
}
 
tr.smwb-ipropvalue td {
	padding: 10px 5px 10px 5px;
	background-color: white;
        border-bottom-color: #ccc;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-top-color: #ccc;
        border-top-style: solid;
        border-top-width: 0px;
	width: 90%;
}
 
span.smwb-ivalue {
}

span.smwsearchicon { /*FIXME: this was only used for Factbox docu, should be removed from code*/
	padding-right: 16px;
	margin-right: 2px;
	color: #888888;
	/* @embed */ background: url(upload/Magnifier.png) center right no-repeat;
}

#bodyContent span.smwsearch a {
	padding-right: 16px;
	margin-right: 2px;
	color: #888888;
	/* @embed */ background: url(upload/Magnifier.png) center right no-repeat;
}

#bodyContent span.smwsearch a:hover {
	text-decoration: none;
	color: #0000FF;
	padding-right: 18px;
	margin-right: 0px;
	/* @embed */ background: url(upload/Magnifier_over.png) center right no-repeat;
}

#bodyContent span.swmfactboxheadbrowse a {
	padding-right: 16px;
	margin-right: 2px;
	color: #000000;
	/* @embed */ background: url(upload/Eye.png) center right no-repeat;
}

#bodyContent span.swmfactboxheadbrowse a:hover {
	text-decoration: none;
	color: #0000FF;
	padding-right: 18px;
	margin-right: 0px;
	/* @embed */ background: url(upload/Eye_over.png) center right no-repeat;
}

#bodyContent span.smwbrowse a {
	padding-right: 16px;
	margin-right: 2px;
	color: #888888;
	/* @embed */ background: url(upload/Eye.png) center right no-repeat;
}

#bodyContent span.smwbrowse a:hover {
	text-decoration: none;
	color: #0000FF;
	padding-right: 18px;
	margin-right: 0px;
	/* @embed */ background: url(upload/Eye_over.png) center right no-repeat;
}

jQuery functions

General actions on each page

• add Cora credit to bottom of every page

  var aa= jQuery('<a/>')
    .attr("href", "http://testwiki.smw-cora.org/index.php/Main_Page").attr("id","poweredbyCora");
  jQuery("#footer-poweredbyico").append(aa);
  var img = jQuery('<img />').attr({ 'id': 'poc', 'src': 'http://testwiki.smw-cora.org/upload/SC_Credit.png', 'alt':'Powered by CorA Project' }).appendTo(jQuery('#poweredbyCora'));

Individual pages actions

• Insert onload function for rearranger image and change inside timeline extension. Also changed dull-blue-circle.png (from blue to orange)
• changed the slim bottom lines (in fact it is border color left) from blue to orange
• changed icon for resize image and eliminated <---Resize---> from images

jQuery(window).load(function() {

    jQuery('img.rearrangerImage').attr('src','http://testwiki.smw-cora.org/upload/Rearranger.png');

    jQuery('img.timeline-copyright').attr('src','http://testwiki.smw-cora.org/upload/Copyright-vertical.png');

    jQuery('div.timeline-band-layer-inner > div > img').each(function(){jQuery(this).attr('src','http://testwiki.smw-cora.org/upload/Dull-blue-circle.png');});

    jQuery('div.timeline-band-layer-inner > div').each(function(){
        if(jQuery(this).css('border-left-color') == 'rgb(88, 160, 220)') {
             jQuery(this).css('border-left-color','rgb(247,102,0)');
        }        
});

});

Arrange footer for every page

• setting min-height of div.content - for push down #footer

     jQuery('#content').css('min-height', Math.max(jQuery('#content').height(), jQuery('#mw-panel').height()));

Edit icons

• edit tools update
• upload new icons for tools

if(wgAction == "edit"){
   jQuery('#mw-editbutton-bold').attr('src','http://testwiki.smw-cora.org/upload/Button_bold.png');
   jQuery('#mw-editbutton-italic').attr('src','http://testwiki.smw-cora.org/upload/Button_italic.png');
   jQuery('#mw-editbutton-link').attr('src','http://testwiki.smw-cora.org/upload/Button_link.png');
   jQuery('#mw-editbutton-extlink').attr('src','http://testwiki.smw-cora.org/upload/Button_extlink.png');
   jQuery('#mw-editbutton-headline').attr('src','http://testwiki.smw-cora.org/upload/Button_headline.png');
   jQuery('#mw-editbutton-image').attr('src','http://testwiki.smw-cora.org/upload/Button_image.png');
   jQuery('#mw-editbutton-media').attr('src','http://testwiki.smw-cora.org/upload/Button_media.png');
   jQuery('#mw-editbutton-nowiki').attr('src','http://testwiki.smw-cora.org/upload/Button_nowiki.png');
   jQuery('#mw-editbutton-signature').attr('src','http://testwiki.smw-cora.org/upload/Button_sig.png');
   jQuery('#mw-editbutton-hr').attr('src','http://testwiki.smw-cora.org/upload/Button_hr.png');
   
}

Installation

The first step is to upload new icons into wiki.