Wacko CSS

kommentiert



/* basic -------------------------------------------------- */
P, TD, LI, SELECT, TEXTAREA {
  font-family: Verdana;
  font-size: 13px;
  line-height: 1.3em;
} 

label {cursor:pointer; cursor:hand;} 

.TEXTAREA {
 width: 100%; 
 height: 400px
} 

Formatierung des Textfeldes beim Editieren einer Seite. Wird über class=TextArea eingebunden.
BODY {
  font-family: Verdana;
  font-size: 13px;
  line-height: 1.3;
  color: #000000;
  background-color: #F8F8F8;
} 
Formatierung des Body Tags. Hiermit wird das Hauptaussehen der Seite gesteuert. In diesem Fall soll die Schrift in diesem Tag in Verdana dargestellt werden.
A:LINK {
  color: #993333;
} 

Formatierung der Hyperlinks (Code: ((/HomePage Startseite)))

Formatierung der Hyperlinks, die zuvor schon einmal besucht wurden.

A:VISITED {
  color: #993366;
} 


Formatierung der Aufzählungen (Code: * Test)

UL, OL {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
} 


.time{ font-family: Tahoma, Arial, Verdana; color: #cccccc; font-size: 9px;} 

Definition der inneren und äusseren Abstände für alle Überschriften und Formulare. Weiter unten erfolgt für jede einzelne Überschrift noch eine getrennte Definition. Scheinbar handelt es sich hierbei um ein älteres Anhängsel

/* paddings headers */
FORM, H1, H2, H3, H4, H5, H6 {
  margin: 0px;
  padding: 0px;
} 


.main {
  font-size: 22px;
} 

.print {
  font-family: Verdana;
  font-size: 12px;
} 

.error {
  color: #CC3333; font-weight: bold;
} 

Formatierung des oberen Bereiches der Ausgabeseite. Im default Theme ist hier vom Namen des Wikis über die Bookmarks bishin zu den Anmeldefenster alles enthalten.

.header {
  padding: 10px;
  padding-top: 0px;
  line-height: 22px;
} 


.page {
  background-color: #FFFFFF;
  padding: 9px 10px 10px;
  border: 1px inset;
  border-top: none; 
  border-bottom: none; 
} 

.pageBefore { 
  border: 1px inset;
  border-bottom: none; 
 height:1px
} 

.pageedit {
  background-color: #FFFFFF;
  border: 1px inset;
  border-bottom: none; 
} 

.footer {
  background-color: #DDDDDD;
  padding: 5px 10px;
  border: 1px inset;
  border-top: none;
  border-top: 1px solid #CCCCCC;
} 


.filesheader, .commentsheader {
  background-color: #DDDDDD;
  padding: 2px 10px;
  border-left: 1px inset;
  border-right: 1px inset;
  border-top: 1px solid #CCCCCC;
} 

.files, .comment {
  background-color: #EEEEEE;
  padding: 10px;
  border-left: 1px inset;
  border-right: 1px inset;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #EEEEEE;
} 

.commentinfo {
  color: #AAAAAA;
} 

.filesform, .commentform {
  background-color: #EEEEEE;
  padding: 10px;
  border-left: 1px inset;
  border-right: 1px inset;
  border-top: 1px solid #CCCCCC;
} 

.commentform form width:100%;}
.commentform form textarea width:100%; padding:0;} 

.revisioninfo {
  color: #AAAAAA;
  padding-bottom: 20px;
} 

Formatierung des Copyrights am Ende jeder Seite: <#<div class="copyright">Powered by WackoWiki R4.2</div>#>

.copyright {
  font-size: 11px;
  color: #AAAAAA;
  text-align:right;
} 


.copyright A {
  color: #AAAAAA;
} 

.name {
  text-align:right;
  font-size: 11px;
} 

.include {
  background-color: #F5F5F5;
  padding: 8px;
} 

Formatierung des externen Links im Copyright

.outerlink { color: #990000;} 


FIELDSET {
 padding: 10px;
} 

Formatierung eines noch nicht vorhandenen Seitennamens in einem Text.

.missingpage
{
  border-bottom: 1px dashed orange;
} 


.searchbar
{
  background-color: #DDDDDD;
  font-family: Verdana;
  font-size: 13px;
  line-height: 1.3em;
} 

Formatierung der Suche am Ende jeder Seite: <#<span class="searchbar nobr">Suchen:<input type="text" name="phrase" size="15" style="border: none; border-bottom: 1px solid #CCCCAA; padding: 0px; margin: 0px;" /></span>#>
.logBtn {  height: 21px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
 } 

#tooltip{
background:#FFFFFF;
border:1px solid #666666;
color:#333333;
font:menu;
margin:0px;
padding:3px 5px;
position:absolute;
visibility:hidden
} 

table.upload td { padding: 2px 5px 2px 5px; vertical-align\bottom }
table.upload td.dt-,   
table.upload td.file- { white-space:nowrap; font-size: 80%; font-weight:bold; color:#000000 }
table.upload td.dt-   { padding-right:0 }
table.upload td.remove-   { padding-right:0 }
table.upload tdsize- { padding-right:0; text-align\right }
table.upload td.desc- { font-size: 80%; color:#444444;width:100% }
table.upload td.dt- .dt2-,
table.upload td.remove- .remove2-,
table.upload tdsize- size2- { font: 11px Tahoma; color:#666666;  }
table.upload td.remove- A.remove2-:HOVER,
table.upload td.remove- A.remove2-:ACTIVE { color:#ff0000 } 

Formatierung der Vorschau eines editierten Textes (hier: Rahmen und Legendentext)

.preview {margin:2px;border:red 2px solid;}
 .preview legend {color:red;font-weight:bold;} 


.buttonsspacerwidth:10pxheight:1px;} 

/* WikiEdit Toolbar -------------------------------------- */
 .toolbar tr { background: ButtonFace; }
 .toolbar .btn-, .toolbar  .btn-hover,  .toolbar .btn-active,  .toolbar .btn-pressed {
  background: ButtonFace;
  color: ButtonText;
  border: 1px solid ButtonFace;
  padding: 1px;  margin: 0px;
  cursor: pointer; cursor: hand; 
 } 

Größe der Icons vom WikiEdit, während man eine Seite editiert.

.toolbar img{
 width: 20px;
 height: 20px;
 } 


.toolbar .btn-hover {
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
 } 

.toolbar .btn-active,  .toolbar .btn-pressed {
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
 } 

.toolbar .btn-pressed {
  background: ButtonHighlight;
 } 

.edname-w, .edname-r, .edname-s  
            { font: bold 14px Arial; border: 3px solid #D4D0C8; padding: 0 7px; color:#ffffff; vertical-align: middle;}
 .edname-w  { background: #1E9905; }
 .edname-r  { background: #2A45D0; } 
 .edname-s  { background: #D08C2A; } 

.autocomplete-inplace 
 {
   background: ButtonFace;
   border: 1px solid ButtonShadow;
   padding: 2px;
   font: 12px Arial;
 } 

.autocomplete-inplace div { padding: 2px 5px; cursor: pointer; cursor: hand; }
 .autocomplete-inplace div.ac-over- { color:#ffffff; background: #1E9905; } 

Formatierung des Textes, die eine Definition beinhalten (Code: Bla)

/* Wiki Formatting ---------------------------------------- */
dfn { font-variant: small-caps; letter-spacing: 0.1em; font-style: normal; cursor: help; border-bottom: 1px dotted #000; }
* html dfn { \background: url(javascript:DOTS) repeat-xbottomleft; } 


Formatierung durchgestrichener Texte (Code: streich mich)

STRIKE, S { color:#999999 }    
STRIKE A:VISITED, S A:LINK { color:#999999 }
STRIKE A:VISITED, S A:VISITED { color:#999999 }
STRIKE IMG, S IMG { filter:Gray } 


Formatierung von wichtigem Text (Code: Wichtig)

cite {color:#888800;font-style:normal;} 


.add { font-weight: bold; color:#c00; text-decoration: underline; } 

.del { font-style: italic; color:#c00; text-decoration: line-through; } 

Diese Klasse besteht nur, um an gewünschten Stellen keinen Seitenumbruch zu erzeugen.

.nobr {white-space: nowrap} 


Formatierung der einzelnen Überschriften

H1 { font-family: Verdana; font-size: 23px; padding-top:2px; padding-bottom:7px; line-height: 110% }
H2 { font-family: Verdana; font-size: 20px; margin-top:20px; margin-bottom:5px; border-bottom:3px #444444 solid }
H3 { font-family: Verdana; font-size: 17px; margin-top:15px; margin-bottom:5px; border-bottom:2px #666666 solid }
H4 { font-family: Arial;   font-size: 16px; margin-top:15px; margin-bottom:5px; border-bottom:1px #999999 solid }
H5 { font-family: Arial;   font-size: 14px; margin-top:10px; margin-bottom:5px; border-bottom:1px #bbbbbb solid }
H6 { font-family: Arial;   font-size: 12px; } 


Formatierung von zentriertem Text

.center{  text-align: center;} 


Formatierung von eingerücktem Text, etwa am Zeilenanfang zwei Leerzeichen.

.indent {  margin-left: 40px;} 


Formatierung von Text, der bei einer Revision hinzugefügt wurde.

.additions { color: #008800; } 


Formatierung von Text, der bei einer Revision entfernt wurde.

.deletions { color: #880000; } 


Darstellung von Quelltexten, jeder Buchstabe ist gleich lang.

.code {
  background: #FFFFFF;
  border: solid #888888 2px;
  font-family: "Courier New";
  color: black;
  font-size: 10pt;
 width: 80%;
  padding: 3px;
} 


.notes {  color: #888800; } 

Darstellung von Tabellen, die in Form von #| || Text1 | Text2 || |# erstellt wurden.

table.usertable {
  border: 1px none;
  border-collapse: collapse;
} 


table.usertable tr td
{
  border-width: 1px;
  border-color: black;
  border-style: solid;
  padding: 4px;
  vertical-align:top;
} 

Formatierung der Tabellen, die in der Form #|| || Text1 | Text2 || ||# erstellt wurden.

table.dtable {width:100%; border: 0px none; border-collapse: collapse; } 


table.dtable tr td { vertical-align\top; border-width: 0px;  border-color: #999999;  border-style: none;  padding: 4px; } 

Formatierung der einzelnen Zeilen des Inhaltsverzeichnisses.

.toc1 { margin-left:0px; padding-left:0px; font-weight:bold; list-style-type:none;  } 
.toc2 { margin-left:0px; padding-left:15px; list-style-type:none;  } 
.toc3 { margin-left:0px; padding-left:30px; list-style-type:none;  } 
.toc4 { margin-left:0px; padding-left:45px; list-style-type:none;  } 
.toc5 { margin-left:0px; padding-left:60px; list-style-type:none;  } 
.toc6 { margin-left:0px; padding-left:75px; list-style-type:none;  } 


.micq1 { padding:2px; vertical-align\top; font-weight: bold; }
.micq2 { padding:2px; vertical-align\top; font:10px tahoma, arial }
.micq3 { padding:2px; vertical-align\top;width:100% } 

.email1 {color:#800000}
.email2 {color:#808000}
.email-odd {color:#800000}
.email-even {color:#808000} 

blockquote {  border-left:#cccccc 3px solid; padding:5px; color: #999999; }
blockquote p {  padding:0px;  margin: 5px 0px; } 

p.auto { margin:0px; padding:0px; font-size:100%; }
.pmark { color:#cccccc;font:10px Arial }
.pmark A:LINK,
.pmark A:VISITED { color:#cccccc }
.pmark A:HOVER,
.pmark A:ACTIVE  { color:#cc3300 }
.right {}
.right .p- { float\right; padding: 0 0 0 15px;  }
.right .pbody- { } 

.left { padding:0 }
.left .p- { float\left; padding: 0 15px 0 0;  }
.left .pbody- { padding:0 } 

/* Text_Highlighter  */
.hl-main {font-family: monospace; font-size:13px;} 

.hl-gutter { background-color: #CCCCCC; padding-right: 10px; 
             font-family: monospace; font-size:13px;} 

.hl-table {border: solid 1px #000000; } 

.hl-default { color: #000000; } 

.hl-code { color: #7f7f33; } 

.hl-brackets { color: #009966; } 

.hl-comment { color: #7F7F7F; } 

.hl-quotes { color: #00007F; } 

.hl-string { color: #7F0000; } 

.hl-identifier { color: #000000; } 

.hl-reserved { color: #7F007F; } 

.hl-inlinedoc { color: #0000FF; } 

.hl-var { color: #0066FF; } 

.hl-url { color: #FF0000; } 

.hl-special { color: #0000FF; } 

.hl-number { color: #007F00; } 

.hl-inlinetags { color: #FF0000; } 

.hl-builtin    { color:#996633; } 
Text Highlighter Box
/* /Text_Highlighter */

div.action           { margin:2px; background: #eeeeee } 
Text Highlighter Box
div.action-content   { padding:10px 10px 25px 10px; } 

.cl-red   {color: #CC0000;}
.cl-green {color: #008000;}
.cl-blue  {color: #0000CC;} 

Formatierung von ##Text##

tt { color:#666600; background:#ffffcc; padding: 0 2px } 


.cite {color:#ff0000;font-style:normal;} 

/* .mark  { color: #008800;font-style:normal; } */
.mark { color: #00000; background:#ffaaaa; } 

Diskusionen

  • TheBone /14.03.2006 17:53/ Hey Skip, entspricht die Angabe bei body dem, was du dir hier vorgestellt hattest?
    PS: Denke die Deutsche Sprache wird jetzt die am besten dokumentierte... zumindest liefert mir die Suche keine vergleichbaren Seiten in english... :-)
    • SkipPer /14.03.2006 19:37/ dachte eher darunter kommentieren, und die zusätlichen Linien sind meiner Meinung nicht wirklich nötig, oder – ja genau, ist gar nicht so einfach herauszufinden was was ist, ohne alles ausprobieren zu wollen, fangen wir also damit mal an -> mit dem technischen Teil
    • RobertVaeth /14.03.2006 23:24/Habe mal ein bischen dokumentiert, aber sehr unvollständig. Wie wäre die Idee, wenn man ein Codebeispiel gibt und das Ergebnis darstellt? Manche Dinge sind jedoch fester Bestandteil des default-Themes (z.B. copyright, searchbar(?)) – wie soll man da vorgehen?
      • SkipPer /15.03.2006 17:11/ das mit den Beispielen ist eine prima Idee, ... hart als HTML einbetten (?)