My Wikka CSS Style

Here is my IMHO improved wikka.css file located in the ./css/ directory of your wikka installation;

Improvements include;

Feel free to try & make suggestions..

p, td, li, input, select, textarea {
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 13px;
}

body {
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-seriffont-size: 13px;
    text-align: justify;
    line-height: 20px;
    color: #000000;
    background-color: #F8F8F8;
}

a { color: #333399; text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { color: #993333; }
a:active { text-decoration: none; }


form {
    margin: 0px;
    padding: 0px;
}

img {border: 0px;}
img.centre {display: block; text-align: center; margin: 5px auto;}
img.center {display: block; text-align: center; margin: 5px auto;}
img.left {margin: 5px 5px 5px -5px; float: left;}
img.right {margin: 5px -5px 5px 5px; float: right;}

.indent {
    margin-left: 40px;
}

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

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

.header a:hover {
    color: #993333;
    background: transparent;
    border-bottom: 0px;
}

.page {
    color: #000;
    font-size: 13px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    background-color: white;
    padding: 15px;
    border: 1px inset;
    border-bottom: none;
    height: 100%;
}

.page a {
    text-decoration: none;
}

.page a:hover {
    color: #993333;
    text-decoration: underline;
}

.missingpage {
    /* background: #ccffff; */
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-color: #933;
    border-bottom-style: dashed;
}

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

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

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

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

.code {
    color: black;
    background: #ffffee;
    border: 1px solid #888;
    font-size: 11px;
    font-family: "Lucida Console", Monaco, monospace;
    width: 95%;
    margin: auto;
    padding: 6px 3px 13px 3px/* padding-bottom solves hor. scrollbar hiding single line of code in IE6 but causes vert. scrollbar... */
    text-align: left;       /* override justify on body */
    overflow: auto;         /* allow scroll bar in case of long lines - goes together with white-space: nowrap! */
    white-space: nowrap;        /* prevent line wrapping */
}
.code pre {
    margin-top: 6px;
    margin-bottom: 6px;     /* prevent vertical scroll bar in case of overflow */
    font-size: 11px;
    font-family: "Lucida Console", Monaco, monospace;
}

.notes {
    color: #888800;
}

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

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

.copyright a {
    color: #AAAAAA;
}

.lastedit {
    border:dotted 1px;
    padding:3pt;
    color: #999;
    font-size:7pt;
    min-width: 200px;
    max-width: 300px;
    float: right;
    margin: 0px 0px 0px 15px;
}


/* general headline setup */
h1, h2, h3, h4, h5 {
    color: Black;
    background-color: transparent;
    font-family: "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-weight: normal;
    margin-left:    0;
    margin-right:   0;
    margin-top:     0;
    margin-bottom:  0em;
    padding-left:   0;
    padding-right:  0;
    padding-top:    0em;
    padding-bottom: 0;
    border-bottom: 1px solid #8cacbb;
    clear: left;
}

/* special headlines */
h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
h2 {font-size: 150%; margin-left: 0px;}
h3 {font-size: 120%; margin-left: 0px; border-bottom: none; font-weight: bold;}
h4 {font-size: 100%; margin-left: 0px; border-bottom: none; font-weight: bold;}
h5 {font-size: 90%;  margin-left: 0px; border-bottom: none; font-weight: bold;}


hr {
  border: 0px;
  border-top: 1px solid #8cacbb;
  text-align:center;
  height: 0px;
}


/* unordered lists */
ul {
  line-height: 1.5em;
  list-style-type: square;
  margin: 0.5em 0 0.5em 1.5em;
  padding: 0;
  list-style-image: url(images/bullet.gif);
}

/* ordered lists */
ol {
  line-height: 1.5em;
  margin: 0.5em 0 0.5em 1.5em;
  padding: 0;
  color: #638c9c;
  font-weight: bold;
  list-style-image: none;
}

a.ext { color: #333399; }
a.ext:hover { color: #993333; }

.exttail {
    color: #999;
    position: relative;
    bottom: 0.5ex;
}

.searchbox {
    /* border: none; */
    border: 1px solid #CCCCAA;
    padding: 0px;
    margin: 0px;
}

.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;
}
.toolbar .btn- 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; }
.editornamecss { background-color:#CCCCFF; font-size: 18px; padding: 0 10px; }

ul.thread {
        list-style-type: none;
        border-left: 2px #666 solid;
        padding-left: 10px;
        margin: 5px 0px;
}

ul.thread li {
        color: #333;
        font-size: 11px;
}

/*---Specific Styles ---*/

.floatl {float: left;
    width: 30%;
    margin: 0.5%;
    border: 1px solid #8cacbb;
    padding: .5em;
    background: #EEE;
    min-width: 100px;
    max-width: 300px;}

.floatr {float: right;
    width: 30%;
    margin: 0.5%;
    border: 1px solid #8cacbb;
    padding: .5em;
    background: #EEE;
    min-width: 100px;
    max-width: 300px;}

.previewhead {
    margin: auto;
    z-index:20;
    position:fixed;
    top: 40px;
    left: 10px;
    color: red;
    font-size: xx-large;
    font-weight: bold;
    padding: 5px;}

.clear {clear:both;}
.comments {display: none;}
.highlight {color: red; background: #FFFFD0;}
.strikethrough {color: #888; text-decoration: line-through;}
.additions {background-color: #ccffcc;}
.deletions {color: #876; background-color: #FFCC99;}
.underline {text-decoration: underline;}
.recentchanges {font-size: 0.9em;}
.pagenote {color: #888;}
.centre {text-align: center;}
.center, .center p {text-align: center;}


.keys {
    color: #333;
    background-color: #EFEFEF;
    font: normal 80% "Verdana", sans-serif;
    text-align: center;
    border-top: 2px double #CFCFCF;
    border-left: 3px solid #BABABA;
    border-right: 4px solid #AAA;
    border-bottom: 6px solid #909090;
    padding-left: 0.2em;
    padding-top: 0em;
    padding-right: 0.2em;
    padding-bottom: 0em;
    line-height: 1.6em;
    vertical-align: top;
}

.smallprint {font-size: 0.8em; color: #777; padding-right: 0.5%; text-align: right;}

.smallprint a {
    color: #987;
}

/* syntax highlighting code - GeSHi */
.code ol {
    margin-top: 6px;
    margin-bottom: 6px;         /* prevent vertical scroll bar in case of overflow */
}
.code li {
    font-size: 11px;
    font-family: "Lucida Console", Monaco, monospace;
}
.code .br0  { color: #66cc66; }
.code .co1  { color: #808080; font-style: italic; }
.code .co2  { color: #808080; font-style: italic; }
.code .coMULTI  { color: #808080; font-style: italic; }
.code .es0  { color: #000099; font-weight: bold; }
.code .kw1  { color: #b1b100; }
.code .kw2  { color: #000000; font-weight: bold; }
.code .kw3  { color: #000066; }
.code .kw4  { color: #993333; }
.code .kw5  { color: #0000ff; }
.code .me0  { color: #006600; }
.code .nu0  { color: #cc66cc; }
.code .re0  { color: #0000ff; }
.code .re1  { color: #0000ff; }
.code .re2  { color: #0000ff; }
.code .re4  { color: #009999; }
.code .sc0  { color: #00bbdd; }
.code .sc1  { color: #ddbb00; }
.code .sc2  { color: #009900; }
.code .st0  { color: #ff0000; }

/* Calendar styling - 2004-12-01 */
/* general styling */
table.calendar {
    color: #000000;
    background-color: #CCCCCC;              /* comment out to have space between cells same color as page background */
    /*border-collapse: collapse;*/          /* would make single-width borders, ignoring cell-spacing */
}
table.calendar caption {
    background-color: #CCCCCC;
    font-weight: bold;
    line-height: 1.6em;
}
table.calendar thead {
    background-color: #CCCCCC;
}
table.calendar tbody.face {
    background-color: #CCCCCC;
}
table.calendar tbody.calnav {
    background-color: #CCCCCC;
}
/* styling for some specific elements */
table.calendar thead th {
    /*border: 1px solid #000000;*/          /* uncomment to have border around day name headers (will be page background if table background is undefined) */
    padding: 1px;
    text-align: center;
    font-size: 85%;
    width: 26px;
}
table.calendar tbody.face td {
    border: 1px solid #000000;
    text-align: right;
}
table.calendar td.currentday {
    color: #993333;
    background-color: #AAAAAA;
    font-weight: bold;
}
/* styling of calendar navigation */
table.calendar tbody.calnav {
    font-weight: bold;
}
table.calendar td.prevmonth {
    text-align: left;
    font-size: 85%;
}
table.calendar td.curmonth {
    text-align: center;
}
table.calendar td.nextmonth {
    text-align: right;
    font-size: 85%;
}
table.calendar a:link {
    color: #993333;
    text-decoration: none;
}
table.calendar a:visited {
    color: #993333;
    text-decoration: none;
}
table.calendar a:hover {
    color: #993333;
}
table.calendar a:active {
    color: #993333;
    text-decoration: none;
}



CategoryUsers
There is one comment on this page. [Display comment]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki