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  
 +
<pre>
 
  body{}
 
  body{}
  
Zeile 13: Zeile 14:
 
background: none;  
 
background: none;  
 
  }
 
  }
 
+
</pre>
 
*  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
 
+
<pre>
 
  div#content {
 
  div#content {
 
       margin-top: 10px;  
 
       margin-top: 10px;  
 
       border: none;
 
       border: none;
 
  }
 
  }
 
+
</pre>
 
* setting div #p-logo dimensions and upload the new logo  
 
* setting div #p-logo dimensions and upload the new logo  
 
+
<pre>
 
  #p-logo {
 
  #p-logo {
 
         background-image: url(upload/CorA_Logo_395x55.png);
 
         background-image: url(upload/CorA_Logo_395x55.png);
Zeile 33: Zeile 34:
 
         margin-left: 1.25em;
 
         margin-left: 1.25em;
 
  }
 
  }
 
+
</pre>
 
*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
 
and mw-panel up from 160px from top to 150px from top.
 
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
 
The reason is: changed logo position from top of the panel column into the "div#mw-head" area
 
+
<pre>
 
  #mw-page-base {
 
  #mw-page-base {
 
height: 150px;
 
height: 150px;
 
         background: none;
 
         background: none;
 
  }
 
  }
 
+
</pre>
 
* 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  
 
+
<pre>
 
  div#mw-head-base {
 
  div#mw-head-base {
 
margin-top: -150px;
 
margin-top: -150px;
Zeile 60: Zeile 61:
 
         top: 150px;
 
         top: 150px;
 
  }
 
  }
 
+
</pre>
 
* 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
 
+
<pre>
 
#p-search {
 
#p-search {
 
margin-top: -70px;
 
margin-top: -70px;
 
         margin-left: -226px;
 
         margin-left: -226px;
 
}
 
}
 
+
</pre>
 
* change border (horizontal line) for mw-panel (left menu)
 
* change border (horizontal line) for mw-panel (left menu)
 +
<pre>
 
  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);         
 
  }
 
  }
 
+
</pre>
 
* 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)
 +
<pre>
 
  #left-navigation {
 
  #left-navigation {
 
top: 130px;
 
top: 130px;
Zeile 127: Zeile 130:
 
   background-image: none;
 
   background-image: none;
 
  }
 
  }
* move the vertical menu (#VectorMenu) with 30px to the left otherwise is out to the html page
+
</pre>
 +
* move the vertical menu (#VectorMenu) with 30px to the left otherwise is out to the html page  
 +
<pre>
 
  .menu {
 
  .menu {
 
     left:-30px;  
 
     left:-30px;  
 
  }
 
  }
 
+
</pre>
* 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)
 +
<pre>
 
  #p-personal {
 
  #p-personal {
 
position: inherit;
 
position: inherit;
Zeile 152: Zeile 158:
 
         color: #fff ;
 
         color: #fff ;
 
  }
 
  }
 
+
</pre>
 
* 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
 +
<pre>
 
  div#footer {
 
  div#footer {
 
margin-left: 0;
 
margin-left: 0;
Zeile 165: Zeile 172:
 
         color: #fff ;
 
         color: #fff ;
 
  }
 
  }
 
+
</pre>
* change icon for external link*/
+
* change icon for external link
 +
<pre>
 
  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;
 
  }
 
  }
 
+
</pre>
 
* 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)  
 
and for links visited/active change color in #669966 (Mostly desaturated 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 */
 
and for link:hover set the text-decoration to underline */
 
+
<pre>
 
  a:link,
 
  a:link,
 
  a.external:link,
 
  a.external:link,
Zeile 230: Zeile 238:
 
         color: #669966;
 
         color: #669966;
 
  }
 
  }
 
+
</pre>
 
* 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)  
 
+
<pre>
 
  a.new:link {color: #cc6600;}
 
  a.new:link {color: #cc6600;}
 
+
</pre>
 
* For all tables change the color of border in #ccc (Light gray)  
 
* For all tables change the color of border in #ccc (Light gray)  
  
Zeile 271: Zeile 279:
  
 
* id or class="first heading" - no border-bottom  
 
* id or class="first heading" - no border-bottom  
 
+
<pre>
 
  h1#firstHeading {border-bottom: none;}  
 
  h1#firstHeading {border-bottom: none;}  
  
Zeile 279: Zeile 287:
 
     line-height: 21px;
 
     line-height: 21px;
 
  }
 
  }
 
+
</pre>
 
* Change --> list items are marked with NEW bullets  
 
* Change --> list items are marked with NEW bullets  
 +
<pre>
 
  ul {}
 
  ul {}
 
  ul {
 
  ul {
Zeile 287: Zeile 296:
 
list-style-image: url(upload/List_style_image.png);
 
list-style-image: url(upload/List_style_image.png);
 
  }
 
  }
 
+
</pre>
 
* 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
 +
<pre>
 
  #pt-userpage,
 
  #pt-userpage,
 
  #pt-anonuserpage,
 
  #pt-anonuserpage,
Zeile 295: Zeile 305:
 
background: url(upload/User.png) left top no-repeat;
 
background: url(upload/User.png) left top no-repeat;
 
  }
 
  }
 
+
</pre>
 
* Setting - The list-style should be vertical aligned with the text
 
* Setting - The list-style should be vertical aligned with the text
 +
<pre>
 
  .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;
 
  }
 
  }
 
+
</pre>
 
* 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)  
 +
<pre>
 
  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;
Zeile 314: Zeile 326:
 
           background-image: url(upload/Arrow_table_down.png) !important;
 
           background-image: url(upload/Arrow_table_down.png) !important;
 
  }
 
  }
 
+
</pre>
 
* changed in CORA LEMMATA FORM  
 
* changed in CORA LEMMATA FORM  
 +
<pre>
 
  form.createbox > fieldset {
 
  form.createbox > fieldset {
 
         border: none;
 
         border: none;
Zeile 419: Zeile 432:
 
   //  -webkit-appearance: none;
 
   //  -webkit-appearance: none;
 
  }
 
  }
 +
</pre>
  
 
=== Edit action ===
 
=== Edit action ===
Zeile 745: Zeile 759:
 
/* @embed */ background: url(upload/Eye_over.png) center right no-repeat;
 
/* @embed */ background: url(upload/Eye_over.png) center right no-repeat;
 
}
 
}
 
  
 
== jQuery functions ==
 
== jQuery functions ==

Version vom 24. März 2014, 15:38 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
#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; }

  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.