Cora Skin implementation: Unterschied zwischen den Versionen

Aus Semantic CorA
Wechseln zu: Navigation, Suche
Zeile 8: Zeile 8:
  
 
* eliminate background (colored in #f6f6f6-Very light gray (mostly white) in mediawiki) conform designer specifications  
 
* eliminate background (colored in #f6f6f6-Very light gray (mostly white) in mediawiki) conform designer specifications  
body{}
+
body{}
  
body {
+
body {
 
background: none;  
 
background: none;  
}
+
}
  
 
*  move down the div #content - see designer link "http://www.designfoerster.de/CorA/1_mainpage.html"
 
*  move down the div #content - see designer link "http://www.designfoerster.de/CorA/1_mainpage.html"
 
and eliminate border line
 
and eliminate border line
  
div#content {
+
div#content {
 
       margin-top: 10px;  
 
       margin-top: 10px;  
 
       border: none;
 
       border: none;
}
+
}
  
 
* setting div #p-logo dimensions and upload the new logo  
 
* setting div #p-logo dimensions and upload the new logo  
  
#p-logo {
+
#p-logo {
 
         background-image: url(upload/CorA_Logo_395x55.png);
 
         background-image: url(upload/CorA_Logo_395x55.png);
 
background-position: center left;
 
background-position: center left;
Zeile 32: Zeile 32:
 
height: 55px;
 
height: 55px;
 
         margin-left: 1.25em;
 
         margin-left: 1.25em;
}
+
}
  
 
*This area (mw-page-base, mw-head-base and mw-head) changed from 80px to 150px height
 
*This area (mw-page-base, mw-head-base and mw-head) changed from 80px to 150px height
Zeile 38: Zeile 38:
 
The reason is: changed logo position from top of the panel column into the "div#mw-head" area
 
The reason is: changed logo position from top of the panel column into the "div#mw-head" area
  
#mw-page-base {
+
#mw-page-base {
 
height: 150px;
 
height: 150px;
 
         background: none;
 
         background: none;
}
+
}
  
 
* this setting is also for horizontal menu (class VectorTabs and Vector Menu) and background color in horizontal menu  
 
* this setting is also for horizontal menu (class VectorTabs and Vector Menu) and background color in horizontal menu  
  
div#mw-head-base {
+
div#mw-head-base {
 
margin-top: -150px;
 
margin-top: -150px;
 
margin-left: 12em;
 
margin-left: 12em;
Zeile 51: Zeile 51:
 
         background-image: url(upload/VectorTabs-background.png);  
 
         background-image: url(upload/VectorTabs-background.png);  
 
         border-bottom: solid 1px #aaa;  
 
         border-bottom: solid 1px #aaa;  
}
+
}
  
div#mw-head {
+
div#mw-head {
 
         height: 150px;
 
         height: 150px;
}
+
}
  
div#mw-panel {
+
div#mw-panel {
 
         top: 150px;
 
         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
 
* 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
Zeile 69: Zeile 69:
  
 
* change border (horizontal line) for mw-panel (left menu)
 
* change border (horizontal line) for mw-panel (left menu)
div#mw-panel div.portal div.body {
+
div#mw-panel div.portal div.body {
 
         background-image: url(upload/Border_mw-panel.png);         
 
         background-image: url(upload/Border_mw-panel.png);         
}
+
}
  
 
* Change the position, height, border of elements under left-navigation (contain horizontal left menu "Message & Discussion")
 
* 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)
 
and elements under right-navigation (contain  horizontal left menu "Read & Edit & View history" and vectorMenu)
#left-navigation {
+
#left-navigation {
 
top: 130px;
 
top: 130px;
 
         left: 191px;
 
         left: 191px;
// font-weight:bold;
+
// font-weight:bold;
}
+
}
  
#right-navigation {
+
#right-navigation {
 
margin-top: 130px;
 
margin-top: 130px;
// font-weight:bold;
+
// font-weight:bold;
}
+
}
  
  
div.vectorTabs {
+
div.vectorTabs {
 
     background-image: none;
 
     background-image: none;
 
     height: 20px;
 
     height: 20px;
 
      
 
      
}
+
}
  
div.vectorTabs span {
+
div.vectorTabs span {
 
     background-image: none;
 
     background-image: none;
}
+
}
  
div.vectorTabs ul {
+
div.vectorTabs ul {
 
         background: none;
 
         background: none;
}
+
}
  
div.vectorTabs ul li {
+
div.vectorTabs ul li {
 
         background: none;
 
         background: none;
 
         border-bottom:solid 1px #aaa
 
         border-bottom:solid 1px #aaa
}
+
}
  
div.vectorTabs li.selected {
+
div.vectorTabs li.selected {
 
         border-top: solid 1px #aaa;
 
         border-top: solid 1px #aaa;
 
         border-left: solid 1px #aaa;
 
         border-left: solid 1px #aaa;
 
         border-right: solid 1px #aaa;
 
         border-right: solid 1px #aaa;
 
         border-bottom: none;
 
         border-bottom: none;
}
+
}
  
  
div.vectorTabs span a {
+
div.vectorTabs span a {
 
         padding-top: 0;
 
         padding-top: 0;
}
+
}
  
div.vectorMenu h3 {
+
div.vectorMenu h3 {
 
     border-bottom:none;
 
     border-bottom:none;
}
+
}
  
  
div.vectorMenu h3 a {
+
div.vectorMenu h3 a {
 
   height: 20px;
 
   height: 20px;
 
   background-image: none;
 
   background-image: none;
}
+
}
 
* move the vertical menu (#VectorMenu) with 30px to the left otherwise is out to the html page   
 
* move the vertical menu (#VectorMenu) with 30px to the left otherwise is out to the html page   
.menu {
+
.menu {
 
     left:-30px;  
 
     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)  
 
* 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 {
+
#p-personal {
 
position: inherit;
 
position: inherit;
 
top: 0;
 
top: 0;
Zeile 140: Zeile 140:
 
         background-color: #666;
 
         background-color: #666;
 
         border-bottom: 1px solid #ccc;  
 
         border-bottom: 1px solid #ccc;  
}
+
}
  
#p-personal ul {
+
#p-personal ul {
 
         float: right;
 
         float: right;
 
         margin-right: 1em
 
         margin-right: 1em
}
+
}
  
#p-personal a,
+
#p-personal a,
#p-personal a.new,
+
#p-personal a.new,
#p-personal a.new:visited {
+
#p-personal a.new:visited {
 
         color: #fff ;
 
         color: #fff ;
}
+
}
  
 
* Footer-Background has full "width" (100%) of the screen and same as div#p-personal
 
* Footer-Background has full "width" (100%) of the screen and same as div#p-personal
div#footer {
+
div#footer {
 
margin-left: 0;
 
margin-left: 0;
 
         padding-left: 13em;
 
         padding-left: 13em;
 
         background-color: #666;
 
         background-color: #666;
 
         border-bottom: 1px solid #ccc;  
 
         border-bottom: 1px solid #ccc;  
}
+
}
  
div#footer ul li,
+
div#footer ul li,
div#footer ul a {
+
div#footer ul a {
 
         color: #fff ;
 
         color: #fff ;
}
+
}
  
 
* change icon for external link*/
 
* change icon for external link*/
div#content a.external {
+
div#content a.external {
 
         background: url(upload/External_link.png) center right no-repeat;
 
         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)  
 
* For all links in general (colored blue in wiki) change color in #005500 (Very dark lime green)  
Zeile 175: Zeile 175:
 
and for link:hover set the text-decoration to underline */
 
and for link:hover set the text-decoration to underline */
  
a:link,
+
a:link,
a.external:link,
+
a.external:link,
#preftoc a:link
+
#preftoc a:link
 
  {
 
  {
 
color: #005500 ;  
 
color: #005500 ;  
 
         text-decoration: none;
 
         text-decoration: none;
}
+
}
  
  
a:visited,
+
a:visited,
a.new:visited,
+
a.new:visited,
#preftoc a:visited {
+
#preftoc a:visited {
 
         color: #669966 ;
 
         color: #669966 ;
}
+
}
  
a:hover {
+
a:hover {
 
         text-decoration: underline;
 
         text-decoration: underline;
}
+
}
a:active {
+
a:active {
 
color: #669966;
 
color: #669966;
}
+
}
  
div.vectorTabs li a {
+
div.vectorTabs li a {
 
         color: #005500 ;
 
         color: #005500 ;
}
+
}
  
 
div.vectorTabs li.new a {
 
div.vectorTabs li.new a {
Zeile 210: Zeile 210:
  
  
div.vectorMenu li a {
+
div.vectorMenu li a {
 
         color: #005500 ;
 
         color: #005500 ;
}
+
}
  
  
div.vectorMenu li.new a {
+
div.vectorMenu li.new a {
 
         color: #005500 ;
 
         color: #005500 ;
}
+
}
  
 
div.vectorMenu li.new a:visited {
 
div.vectorMenu li.new a:visited {
Zeile 223: Zeile 223:
 
}
 
}
  
div#mw-panel div.portal div.body ul li a {
+
div#mw-panel div.portal div.body ul li a {
 
         color: #005500 ;
 
         color: #005500 ;
}
+
}
  
div#mw-panel div.portal div.body ul li a:visited {
+
div#mw-panel div.portal div.body ul li a:visited {
 
         color: #669966;
 
         color: #669966;
}
+
}
  
 
* For links who need attention (for example there is no page existing - colored red in wiki)  
 
* 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)  
 
and for graphic elements like icons - change color in #cc6600 (Strong orange)  
  
a.new:link {color: #cc6600;}
+
a.new:link {color: #cc6600;}
  
 
* For all tables change the color of border in #ccc (Light gray)  
 
* For all tables change the color of border in #ccc (Light gray)  
  
 
+
<pre>
 
table.wikitable,    table.wikitable > tr > th,    table.wikitable > tr > td,  
 
table.wikitable,    table.wikitable > tr > th,    table.wikitable > tr > td,  
 
table.wikitable > * > tr > th,    table.wikitable > * > tr > td {
 
table.wikitable > * > tr > th,    table.wikitable > * > tr > td {
Zeile 263: Zeile 263:
 
   background: #fff;
 
   background: #fff;
 
}
 
}
 
+
</pre>
 
* HEADLINES (except h1 first heading) - change color from black in #333 (Very dark gray)  
 
* 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)  
 
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 {}
h1, h2, h3, h4, h5, h6 {color: #333; border-bottom: 1px solid #ccc;}
+
h1, h2, h3, h4, h5, h6 {color: #333; border-bottom: 1px solid #ccc;}
  
 
* id or class="first heading" - no border-bottom  
 
* id or class="first heading" - no border-bottom  
  
h1#firstHeading {border-bottom: none;}  
+
h1#firstHeading {border-bottom: none;}  
  
  
div.inhalt h2 {
+
div.inhalt h2 {
 
     font-size: 18px;
 
     font-size: 18px;
 
     line-height: 21px;
 
     line-height: 21px;
}
+
}
  
 
* Change --> list items are marked with NEW bullets  
 
* Change --> list items are marked with NEW bullets  
ul {}
+
ul {}
ul {
+
ul {
 
list-style-type: disc;
 
list-style-type: disc;
 
/* @embed */
 
/* @embed */
 
list-style-image: url(upload/List_style_image.png);
 
list-style-image: url(upload/List_style_image.png);
}
+
}
  
 
* Chage icon for user on top-right of the page in #p-personal div
 
* Chage icon for user on top-right of the page in #p-personal div
#pt-userpage,
+
#pt-userpage,
#pt-anonuserpage,
+
#pt-anonuserpage,
#pt-login {
+
#pt-login {
 
/* @embed */
 
/* @embed */
 
background: url(upload/User.png) left top no-repeat;
 
background: url(upload/User.png) left top no-repeat;
}
+
}
  
 
* Setting - The list-style should be vertical aligned with the text
 
* Setting - The list-style should be vertical aligned with the text
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
+
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
margin: 0.3em 0 0 0;
+
margin: 0.3em 0 0 0;
padding-left: 12px;
+
padding-left: 12px;
}
+
}
  
 
* Change all icon from any table with new icon (from black into orange)  
 
* Change all icon from any table with new icon (from black into orange)  
table.jquery-tablesorter th.headerSort {
+
table.jquery-tablesorter th.headerSort {
 
           background-image: url(upload/Arrow_table.png) !important;
 
           background-image: url(upload/Arrow_table.png) !important;
}
+
}
  
table.jquery-tablesorter th.headerSortDown {
+
table.jquery-tablesorter th.headerSortDown {
 
           background-image: url(upload/Arrow_table_up.png) !important;
 
           background-image: url(upload/Arrow_table_up.png) !important;
}
+
}
  
table.jquery-tablesorter th.headerSortUp {
+
table.jquery-tablesorter th.headerSortUp {
 
           background-image: url(upload/Arrow_table_down.png) !important;
 
           background-image: url(upload/Arrow_table_down.png) !important;
}
+
}
  
 
* changed in CORA LEMMATA FORM  
 
* changed in CORA LEMMATA FORM  
form.createbox > fieldset {
+
form.createbox > fieldset {
 
         border: none;
 
         border: none;
}
+
}
  
.multipleTemplateInstance {
+
.multipleTemplateInstance {
 
         background-color: #fff;
 
         background-color: #fff;
 
         border: none;
 
         border: none;
Zeile 326: Zeile 326:
 
         margin: 0;
 
         margin: 0;
 
         border-spacing: 0;
 
         border-spacing: 0;
}
+
}
  
input.autocompleteInput {
+
input.autocompleteInput {
 
         border: 1px solid #ccc;
 
         border: 1px solid #ccc;
}
+
}
  
input.autocompleteInput:focus {
+
input.autocompleteInput:focus {
 
     border: 1px solid #005500;
 
     border: 1px solid #005500;
 
     outline-style:none;
 
     outline-style:none;
}
+
}
  
.ui-menu-item .ui-state-hover {
+
.ui-menu-item .ui-state-hover {
 
     background: #005500;
 
     background: #005500;
}
+
}
  
 
select.createboxInput {
 
select.createboxInput {
Zeile 345: Zeile 345:
 
}
 
}
  
select.createboxInput:focus {
+
select.createboxInput:focus {
 
     border: 1px solid #005500;
 
     border: 1px solid #005500;
 
     outline-style:none;
 
     outline-style:none;
}
+
}
  
  
a.addAboveButton {
+
a.addAboveButton {
 
       vertical-align: center;
 
       vertical-align: center;
 
       width: 20px;
 
       width: 20px;
 
       height: 20px;
 
       height: 20px;
 
       background-image: url(upload/SF_add_above.png);
 
       background-image: url(upload/SF_add_above.png);
}
+
}
  
a.addAboveButton:hover {
+
a.addAboveButton:hover {
 
       width: 20px;
 
       width: 20px;
 
       height: 20px;
 
       height: 20px;
 
       background-image: url(upload/SF_add_above_hover.png);
 
       background-image: url(upload/SF_add_above_hover.png);
}
+
}
  
 
a.removeButton {
 
a.removeButton {
Zeile 376: Zeile 376:
 
}
 
}
  
a.instanceRearranger {
+
a.instanceRearranger {
 
       width: 20px;
 
       width: 20px;
 
       height: 20px;
 
       height: 20px;
 
       background-image: url(upload/Rearranger.png);
 
       background-image: url(upload/Rearranger.png);
}
+
}
  
a.instanceRearranger:hover {
+
a.instanceRearranger:hover {
 
       width: 20px;
 
       width: 20px;
 
       height: 20px;
 
       height: 20px;
 
       background-image: url(upload/Rearranger_hover.png);
 
       background-image: url(upload/Rearranger_hover.png);
}
+
}
  
div.multipleTemplateInstance > table > tbody > tr > td:nth-child(2),
+
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(3),
div.multipleTemplateInstance > table > tbody > tr > td:nth-child(4)
+
div.multipleTemplateInstance > table > tbody > tr > td:nth-child(4)
 
  {
 
  {
 
         width: 20px;         
 
         width: 20px;         
 
         padding: 0px;
 
         padding: 0px;
 
         vertical-align: middle !important;
 
         vertical-align: middle !important;
}
+
}
  
textarea.createboxInput {
+
textarea.createboxInput {
 
         border: 1px solid #ccc;
 
         border: 1px solid #ccc;
}
+
}
  
textarea.createboxInput:focus {
+
textarea.createboxInput:focus {
 
     border: 1px solid #005500;
 
     border: 1px solid #005500;
 
     outline-style:none;
 
     outline-style:none;
}
+
}
  
 
input#wpSummary {
 
input#wpSummary {
Zeile 410: Zeile 410:
 
}
 
}
  
input#wpSummary:focus {
+
input#wpSummary:focus {
 
     border: 1px solid #005500;
 
     border: 1px solid #005500;
 
     outline-style:none;
 
     outline-style:none;
}
+
}
  
input#wpMinoredit {
+
input#wpMinoredit {
 
   // background-color: #ffffff;
 
   // background-color: #ffffff;
 
   //  -webkit-appearance: none;
 
   //  -webkit-appearance: none;
}
+
}
  
 
=== Edit action ===
 
=== Edit action ===

Version vom 24. März 2014, 15:31 Uhr

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;

}

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
  1. 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;

}

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

}

  • fix the scrollbar
  1. editform textarea {

position: absolute; top: 0;

       left: 0;

bottom: 0; right: 10px; overflow-y: scroll; overflow-x: hidden; }

  1. wpTextbox1::-webkit-scrollbar {
   width: 10px;
   height: 6px;

}

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

}

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

}

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

}

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

}

  1. wpTextbox1::-webkit-scrollbar-button:start {
   display: none;

}

  1. wpTextbox1::-webkit-scrollbar-button:end {
   display: block;

}

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

  1. bodyContent span.smwsearch a {

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

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

  1. bodyContent span.swmfactboxheadbrowse a {

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

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

  1. bodyContent span.smwbrowse a {

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

  1. 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

Modify inside an installed extension

Modify forms and templates

Installation

The first step is to upload new icons into wiki.