Released: 13 Aug 2009 05:00
Version: 1.00.090813

This is the first CSS theme I created. Made for the Wikidot platform, it has a simple easy-to-read feel and allows for a custom logo in the top left corner. I have since renovated the theme into The Art in Articles in order to integrate CSS3 features that have been released since then.

At the time, Articles n' More won Wikidot's Theme Competition. Nowadays, I would not recommend using it in light of more modern designs.

Articles n' More

Import

You can use this theme by including the below code:

@import url('http://publicvar.wikidot.com/csstheme:articles-n-more/code_');

Source Code

/** Articles n' More CSS Theme
 *  Author: Timothy Foster
 *  Version: 1.00.090813
 *  Licensed under CC BY 4.0
 * ***********************************************************/
 
/* Outer Border
========================= */
body{    background-color: #DDD; }
#container-wrap{
    margin-top:2em;
    margin-left:2em;
    background-color:#FFF;
    -moz-border-radius-topleft: 3em;
    -webkit-border-top-left-radius: 3em;
    background-repeat:no-repeat;
}
a{
    text-decoration:none;
    color:#00A;
}
a:hover{
    text-decoration:underline;
    color:#0000A5;
    background:transparent;
}
 
/* Top Bar
========================= */
#top-bar{
    background-color:#DDD;
    width:100%;
    margin:auto;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
}
#top-bar a{    color: #222; }
#top-bar ul{    padding: 0 20% 0 20%; }
#top-bar a:hover{
    background:transparent;
    text-decoration:underline;
    color:#252525;
}
#top-bar li ul li a, #top-bar ul li{
    background:#DDD;
    border-top: 1px solid #DDD;
    color:#222;
}
#top-bar ul li ul{    margin-left: 2em; }
#top-bar li ul li a:hover{
    background:#DDD;
    color:#252525;
}
 
/* Header
========================= */
#header h1{
    font-family:'Edwardian Script ITC','Lucida Sans Unicode','Lucida Grande',sans-serif;
    font-size:300%;
    font-weight:bold;
}
#header h1 a, #header h2{
    color:#000;
    margin-left:2em;
}
#header h1 a:hover{
    background:transparent;
    color:#000;
    text-decoration:none;
}
#header h2{
    padding-left:7em;
    font-size:120%;
    font-weight:bold;
    font-style:italic;
}
 
/* Main Content
========================= */
#main-content{
    margin-top:2em;
    border-top:1px solid #777;
    border-left:1px solid #777;
    border-bottom:1px solid #777;
    margin-left:16em;
    background:#FFF;
    font-size:90%;
}
#main-content a.newpage{    color: #900; }
#main-content a.newpage:hover{
    color:#950000;
    background:transparent;
}
#toc{
    border:1px solid #777;
    background:#F8F8F8;
}
#page-info{    border-top: 1px dotted #777; }
#page-options-bottom a, #page-options-bottom-2 a{
    background:#DDD;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    color:#222;
}
#page-options-bottom a:hover, #page-options-bottom-2 a:hover{
    background:#CACACA;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    text-decoration:none;
    color:#252525;
}
#breadcrumbs, .forum-breadcrumbs{    margin-top: 1em; }
 
/* Side Bar
========================= */
#side-bar{
    width: 15em;
    font-size:80%;
}
#side-bar ul{    list-style: none; }
#side-bar li a{
    text-decoration:none;
    border-top:1px solid #DDD;
    border-bottom:1px solid #BBB;
    border-right:1px solid #CCC;
    border-left:1px solid #CCC;
    padding: 2px 0 2px 1em;
    display:block;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    background:#FFF;
}
#side-bar li a:hover{
    text-decoration:none;
    padding: 2px 0 2px 1.2em;
    display:block;
    border-left:none;
}
#side-bar h1{
    font-size:120%;
    background:#DDD;
    padding:5px 0 2px 1em;
    margin-left:-1em;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
}
.side-collapsible .collapsible-block-link{
    text-decoration:none;
    border-top:1px solid #DDD;
    border-bottom:1px solid #BBB;
    border-right:1px solid #CCC;
    border-left:1px solid #CCC;
    margin-left:2em;
    padding: 2px 0 2px 1em;
    display:block;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    background:#FFF;
}
.side-collapsible .collapsible-block-link:hover{
    text-decoration:none;
    margin-left:2em;
    padding: 2px 0 2px 1.2em;
    display:block;
    border-left:none;
}
 
/* Text Headings
========================= */
#page-title{
    background:#DFE5FF;
    border-top:none;
    border-left:1px solid #77797F;
    border-right:2px solid #77797F;
    border-bottom:3px solid #77797F;
    padding: .5em 0 .5em 1em;
    margin:6px 0 0 0;
    -moz-border-radius-topright:2em;
    -webkit-border-top-right-radius:2em;
    -moz-border-radius-bottomright:2em;
    -webkit-border-bottom-right-radius:2em;
    -moz-border-radius-topleft:2em;
    -webkit-border-top-left-radius:2em;
    -moz-border-radius-bottomleft:2em;
    -webkit-border-bottom-left-radius:2em;
}
#main-content h1{    border-bottom: 1px solid #777; }
#main-content h5,
#main-content h6{    font-weight: bold;}
 
/* Footer
========================= */
#footer{
    background:#DDD;
    margin-right:1em;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;}
#footer a{
    text-decoration:none;
    color:#222;
}
#footer a:hover{
    background:transparent;
    color:#252525;
    text-decoration:underline;
}
#license-area a{
    color:#2A2ADD;
    text-decoration:none;
}
#license-area a:hover{
    color:#3030D5;
    text-decoration:underline;
    background:transparent;
}
 
/* Fix IE 6 and 7
========================= */
* html #page-title{
    background:none;
    border-bottom:1px solid #777;
    padding: 1em 0 2px 0;
    margin:0;
    border-left:none;
    border-right:none;
}
* + html #page-title{
    background:none;
    border-bottom:1px solid #777;
    padding: 1em 0 2px 0;
    margin:0;
    border-left:none;
    border-right:none;
}
 
/* Edit Buttons
========================= */
.button a{
    background:#DDD;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    text-decoration:none;
    color:#222;
    margin:0 3px 0 3px;
    padding: 0 3px 0 3px;
}
.button a:hover{
    background:#CACACA;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    text-decoration:none;
    color:#252525;
}
 
/* Forum
========================= */
#side-bar .forum-mini-stat .info{    font-size: 100%; }
blockquote{
    background-image: url(http://themes.wikidot.com/local--files/articles-n-more/quote.jpg);
    background-repeat:no-repeat;
    background-color:#FFF;
    border:1px solid #706D87;
    padding:1em;
    margin: 1em 2em 1em 2em;
}
 
/* Insert Logo Image Here
========================= */
#container-wrap{
    background-image: url(http://themes.wikidot.com/local--files/articles-n-more/logodefault.png);
}

Notes

I no longer support this theme, and I recommend using Art in Articles instead.