View source for Wacko CSS

kommentiert


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

----%%(css)
label {cursor:pointer; cursor:hand;}
%%

----
%%(css)
.TEXTAREA {
  width: 100%;
  height: 400px
}
%%
Formatierung des (?Textfeldes HTML: <textarea>?) beim Editieren einer Seite. Wird über ##class=~TextArea## eingebunden.
---- %%(css)
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.
----
%%(css)
A:LINK {
  color: #993333;
}
%%
Formatierung der Hyperlinks (Code: ""((/HomePage Startseite))"")
----
Formatierung der Hyperlinks, die zuvor schon einmal besucht wurden.
%%(css)
A:VISITED {
  color: #993366;
}
%%

----
Formatierung der Aufzählungen (Code: "" * Test"")
%%(css)
UL, OL {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
%%

----%%(css)
.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++
%%(css)
/* paddings headers */
FORM, H1, H2, H3, H4, H5, H6 {
  margin: 0px;
  padding: 0px;
}
%%

----%%(css)
.main {
  font-size: 22px;
}
%%

----%%(css)
.print {
  font-family: Verdana;
  font-size: 12px;
}
%%

----%%(css)
.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.
%%(css)
.header {
  padding: 10px;
  padding-top: 0px;
  line-height: 22px;
}
%%

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

----%%(css)
.pageBefore {
  border: 1px inset;
  border-bottom: none;
  height:1px
}
%%

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

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

----%%(css)

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

----%%(css)

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

----%%(css)

.commentinfo {
  color: #AAAAAA;
}
%%

----%%(css)

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

----%%(css)
.commentform form {width:100%;}
.commentform form textarea {width:100%; padding:0;}
%%

----%%(css)

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

----
Formatierung des (?Copyrights Powered by ~WackoWiki R4.2?) am Ende jeder Seite: <#<div class="copyright">Powered by WackoWiki R4.2</div>#>
%%(css)
.copyright {
  font-size: 11px;
  color: #AAAAAA;
  text-align: right;
}
%%

----%%(css)

.copyright A {
  color: #AAAAAA;
}
%%

----%%(css)

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

----%%(css)

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

----
Formatierung des externen Links im (?Copyright ~WackoWikiR4.2?)
%%(css)
.outerlink { color: #990000;}
%%

----%%(css)

FIELDSET {
 padding: 10px;
}
%%

----
Formatierung eines noch nicht vorhandenen Seitennamens in einem Text.
%%(css)
.missingpage
{
  border-bottom: 1px dashed orange;
}
%%

----
%%(css)
.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>#>
----%%(css)
.logBtn { height: 21px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
 }
%%

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

----%%(css)
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 td.size- { 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 td.size- .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)
%%(css)
 .preview {margin:2px;border:red 2px solid;}
 .preview legend {color:red;font-weight:bold;}
%%

----%%(css)
.buttonsspacer{width:10px;height:1px;}
%%

----%%(css)
/* 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.
%%(css)
 .toolbar img{
  width: 20px;
  height: 20px;
 }
%%

----%%(css)
 .toolbar .btn-hover {
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
 }
%%

----%%(css)
 .toolbar .btn-active, .toolbar .btn-pressed {
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
 }
%%

----%%(css)
 .toolbar .btn-pressed {
  background: ButtonHighlight;
 }
%%

----%%(css)
 .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; }
%%

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

----%%(css)
 .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 Blablalba?))
%%(css)
/* 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-x bottom left; }
%%

----
Formatierung durchgestrichener Texte (Code: --streich mich--)
%%(css)
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!!)
%%(css)
cite {color:#888800;font-style:normal;}
%%

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

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

----
Diese Klasse besteht nur, um an gewünschten Stellen keinen Seitenumbruch zu erzeugen.
%%(css)
.nobr {white-space: nowrap}
%%

----
Formatierung der einzelnen Überschriften
%%(css)
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
%%(css)
.center{ text-align: center;}
%%

----
Formatierung von eingerücktem Text, etwa am Zeilenanfang zwei Leerzeichen.
%%(css)
.indent { margin-left: 40px;}
%%

----
Formatierung von Text, der bei einer Revision hinzugefügt wurde.
%%(css)
.additions { color: #008800; }
%%

----
Formatierung von Text, der bei einer Revision entfernt wurde.
%%(css)
.deletions { color: #880000; }
%%

----
Darstellung von Quelltexten, jeder Buchstabe ist gleich lang.
%%(css)
.code {
  background: #FFFFFF;
  border: solid #888888 2px;
  font-family: "Courier New";
  color: black;
  font-size: 10pt;
  width: 80%;
  padding: 3px;
}
%%

----%%(css)
.notes { color: #888800; }
%%

----
Darstellung von Tabellen, die in Form von ##""#| || Text1 | Text2 || |#""## erstellt wurden.
%%(css)
table.usertable {
  border: 1px none;
  border-collapse: collapse;
}
%%

----%%(css)
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.
%%(css)
table.dtable { width:100%; border: 0px none; border-collapse: collapse; }
%%

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

----
Formatierung der einzelnen Zeilen des Inhaltsverzeichnisses.
%%(css)

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

----%%(css)
.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% }
%%

----%%(css)
.email1 {color:#800000}
.email2 {color:#808000}
.email-odd {color:#800000}
.email-even {color:#808000}
%%

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

----%%(css)

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 }
.pright {}
.pright .p- { float:right; padding: 0 0 0 15px; }
.pright .pbody- { }
%%

----%%(css)
.pleft { padding:0 }
.pleft .p- { float:left; padding: 0 15px 0 0; }
.pleft .pbody- { padding:0 }
%%

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

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

----%%(css)
.hl-table {border: solid 1px #000000; }
%%

----%%(css)
.hl-default { color: #000000; }
%%

----%%(css)
.hl-code { color: #7f7f33; }
%%

----%%(css)
.hl-brackets { color: #009966; }
%%

----%%(css)
.hl-comment { color: #7F7F7F; }
%%

----%%(css)
.hl-quotes { color: #00007F; }
%%

----%%(css)
.hl-string { color: #7F0000; }
%%

----%%(css)
.hl-identifier { color: #000000; }
%%

----%%(css)
.hl-reserved { color: #7F007F; }
%%

----%%(css)
.hl-inlinedoc { color: #0000FF; }
%%

----%%(css)
.hl-var { color: #0066FF; }
%%

----%%(css)
.hl-url { color: #FF0000; }
%%

----%%(css)
.hl-special { color: #0000FF; }
%%

----%%(css)
.hl-number { color: #007F00; }
%%

----%%(css)
.hl-inlinetags { color: #FF0000; }
%%

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

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

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

----
Formatierung von ##""##Text##""##
%%(css)
tt { color:#666600; background:#ffffcc; padding: 0 2px }
%%

----%%(css)
.cite {color:#ff0000;font-style:normal;}
%%

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

===Diskusionen==
  * ((user:TheBone 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... :-)
    * ((user:SkipPer 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
    * ((user:RobertVaeth 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?
      * ((user:SkipPer SkipPer)) /15.03.2006 17:11/ das mit den Beispielen ist eine prima Idee, ... hart als HTML einbetten (?)

----
original is located at: ((/Doc/Deutsch/Layouts/CSS/WackoCss))