Released: 06 May 2013 05:00
Version: 2.00.130506

The Art in Articles is a Wikidot CSS theme designed for informational wikis that contain long articles. Content is accentuated by the large, central body, and the side and top bars augment the readers' navigational experience while creating a scholarly feel.

This theme revamps the first CSS theme I had ever made, Articles n' More, applying CSS3 features and some mobile compatibility.

The Art in Articles

Import

You can use this theme by including the below code:

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

Source Code

/**  CSS Theme
 *  Author: Timothy Foster (publicvar.wikidot.com)
 *  Version: 2.00.130506
 *  Licensed under CC BY 4.0
 * ********************************************************/
 
/* Imports
=============================*/
@import url(http://timothyfoster.wikidot.com/local--files/theme:the-art-in-articles/cssFont_tangerine.css);
@import url(http://snippets.wdfiles.com/local--code/sp-css-import);
@import url(http://checklist-app.wdfiles.com/local--code/checklist-css);
 
/* Logo Image
=============================*/
#container-wrap{
    background-image: url(http://timothyfoster.wikidot.com/local--files/theme:the-art-in-articles/back.png);
    background-repeat: no-repeat;
}
 
/* Global
=============================*/
body{
    font-family: sans-serif;
    min-height: 101%;
}
p{    line-height: 1.4em; }
a{
    color: #4476A7;
    text-decoration: none;
}
a:hover{
    color: #487AAB;
    text-decoration: underline;
    background: none;
}
a.newpage{    color: #AAA; }
a.newpage:hover{    color: #A2A2A2; }
div.buttons input, input.button, button,
a.button, .pager span.target a,
.owindow .button-bar a, div.new-post a{
    border-radius: 10px;
    background: #DDD;
    color: #444;
    border: none;
    text-decoration: none;
    transition: background 150ms;
    -moz-transition: background 150ms;
    -webkit-transition: background 150ms;
    -o-transition: background 150ms;
}
div.buttons input:hover, input.button:hover, button:hover,
a.button:hover, .pager span.target a:hover,
.owindow .button-bar a:hover, .new-post a:hover{
    background: #E4E4E4;
    color: #444;
    text-decoration: none;
}
input.text, input[type=text], textarea{
    border-radius: 5px;
    border: 1px solid #DDD;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25) inset;
    transition: box-shadow 150ms;
    -moz-transition: all 150ms;
    -webkit-transition:all 150ms;
    -o-transition: all 150ms;
}
input.text:focus, input[type=text]:focus, textarea:focus{
    box-shadow: 0 0 2px -1px rgba(0,0,0,.05) inset;
    border-color: #BBB;
}
 
/* ?! */
html *::selection{
    background-color: #5CA2E0;
    color: #F7F7F7;
}
html *::-moz-selection{
    background-color: #5CA2E0;
    color: #F7F7F7;
}
/*  */
 
/* Outer Frame
=============================*/
body{    background-color: #DDD; }
#container-wrap{
    margin: 30px 0 0 30px;
    background-color: #FFF;
    border-top-left-radius: 50px;
    background-repeat: no-repeat;
}
 
/* Header
=============================*/
#header{    height: 105px; }
#header h1{
    font-family: 'TangerineRegular', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 38pt;
    margin: 5px 0 0 62px;
}
#header h1 a{
    color: #4476A7;
    text-shadow: -1px 1px 2px rgba(0,0,0,0.25);
    transition: color 350ms linear;
    -moz-transition: color 350ms linear;
    -webkit-transition: color 350ms linear;
    -o-transition: color 350ms linear;
}
#header h1 a:hover{
    text-decoration: none;
    color: #64A0C8;
}
#header h2{
    font-style: italic;
    font-size: 12pt;
    margin: 0 0 0 142px;
    letter-spacing: 1px;
}
 
/* Top Bar
=============================*/
#top-bar{
    width: 100%;
    right: 10px;
    background: #DDD;
    margin: 0;
    border-radius: 0 10px 10px 0;
}
#top-bar ul{    padding: 0 0 0 227px; }
#top-bar li a{
    color: #444;
    background: #DDD no-repeat right center url(http://timothyfoster.wikidot.com/local--files/theme:the-art-in-articles/topBarArrow.png);
    padding-right: 1.75em;
    padding-left: .5em;
    padding-top: 1px;
    /*font-style: italic;*/
    letter-spacing: 1px;
    transition: all 400ms;
    -moz-transition: all 400ms;
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
}
#top-bar li ul li{
    background: #DDD;
    transition: all 400ms;
    -moz-transition: all 400ms;
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
}
#top-bar li ul li a{
    display: block;
    width: 150px;
    background: #DDD;
    font-size: 90%;
    padding: 0 80px 0 24px;
    text-indent: -10px;
}
#top-bar li ul li:hover{    background: #E5E5E5; }
#top-bar li a:hover, #top-bar li a.current-link{
    background-color: #E5E5E5;
    color: #444;
    text-decoration: none;
}
#top-bar li ul li a:hover{
    background: #E5E5E5;
    text-indent: 0;
}
#top-bar li ul{
    background: #DDD;
    overflow: hidden;
    width: 0px;
    margin-left: 13px;
    transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -webkit-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
}
#top-bar li:hover ul{    width: 200px; }
 
/* Login Status
=============================*/
#login-status{
    color: #444;
    font-size: 90%;
}
#login-status a strong{    text-decoration: none; }
#login-status .printuser a{    display: none; }
#account-topbutton{
    background: #DDD;
    color: #444;
    border: none;
    border-radius: 5px;
}
#account-options{
    background-color: #FFF;
    border: 1px solid #BBB;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
    border-radius: 5px;
    text-align: right;
    max-width: 120px;
}
#account-options li a{
    transition: padding-right 150ms;
    -moz-transition: padding-right 150ms;
    -webkit-transition: padding-right 150ms;
    -o-transition: padding-right 150ms;
}
#account-options li a:hover{
    color: #487AAB;
    text-decoration: none;
    padding-right: 8px;
}
#account-options li:nth-child(1),
#account-options li:nth-child(2),
#account-options li:nth-child(3),
#account-options li:nth-child(5){    display: none; }
 
/* Search Bar
=============================*/
#search-top-box{
    width: 242px;
    top: 60px;
    border: 1px solid #AAA;
    background: #FFF;
    border-radius: 3px;
}
#search-top-box input.text{
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    width: 212px;
    color: #555;
    border-radius: 0;
}
#search-top-box input.text.empty{    color: #AAA; }
#search-top-box input.button{
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    border: none;
    padding: 0;
    background-color: #FFF;
    background-image: url(http://timothyfoster.wikidot.com/local--files/theme:the-art-in-articles/search-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}
 
/* Side Bar
=============================*/
#side-bar{
    width: 200px;
    font-size: 90%;
    color: #444;
}
#side-bar h1, #side-bar h2{
    font-size: 12pt;
    background-color: #DDD;
    padding: 5px 0 5px 1em;
    margin: 0 7px 0 -1em;
    border-radius: 0 10px 10px 0;
}
#side-bar h2{
    font-size: 10pt;
    padding: 3px 0 3px 1em;
}
#side-bar h3, #side-bar h4,
#side-bar h5, #side-bar h6{    font-size: 10pt; }
 
/* Footer
=============================*/
#footer{
    background: #DDD;
    border-radius: 0 10px 10px 0;
    margin-right: 10px;
}
#license-area{    opacity: .75; }
 
/* Main Content
=============================*/
#main-content{
    margin: 15px 0 15px 220px;
    background-color: #FFF;
    border: 1px solid #BBB;
    border-right: none;
    box-shadow: 0 0 4px -1px rgba(0,0,0,0.25);
    border-radius: 5px 0 0 5px;
}
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6{    margin: 12px 0 8px 0; }
#main-content h1{    font-size: 18pt; }
#main-content h2{    font-size: 16pt; }
#main-content h3{    font-size: 14pt; }
#main-content h4{    font-size: 12pt; }
#main-content h5{    font-size: 11pt; }
#main-content h6{    font-size: 10pt; }
#main-content h1{    border-bottom: 1px solid #CCC; }
#main-content p{    margin: 8px 0 12px 0; }
hr{    background-color: #CCC; }
#breadcrumbs{
    margin-left: 2em;
    font-size: 90%;
    color: #444;
}
.page-watch-options{    font-size: 80%; }
.pager .pager-no{    display: none; }
.pager .current{
    background: #DDD;
    padding: 2px 9px;
    color: #444;
    border-radius: 10px;
    border: none;
}
#page-version-info{    display: none; }
.error-block{    text-align: center; }
 
/* Toc
=============================*/
#toc{
    background-color: #FFF;
    border: 1px solid #BBB;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
    border-radius: 5px;
    min-width: 210px;
}
#toc #toc-action-bar{
    padding: 0;
    position: relative;
    left: 146px;
    top: 4px;
    font-size: 80%;
    height: 0;
}
#toc-action-bar::before{
    color: #444;
    content: '(';
}
#toc-action-bar::after{
    color: #444;
    content: ')';
}
#toc .title{
    padding-left: 2em;
    color: #444;
    text-align: left;
}
 
/* Code Blocks
=============================*/
.code{
    background: none;
    background-image: url(http://timothyfoster.wikidot.com/local--files/theme:the-art-in-articles/code.png);
    background-repeat: no-repeat;
    background-position: top right;
    border: none;
    border-left: 2px solid #DDD;
    border-right: 1px dashed #EEE;
    margin: 6px 1em 6px 1em;
    padding: 0 1em;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
}
.code pre{
    font-family: monospace;
    font-size: 13px;
    line-height: 1.25em;
}
 
/* Wikidot's Tables
=============================*/
table.wiki-content-table{
    border-radius: 5px;
}
table.wiki-content-table th{
    background: #DDD;
    color: #444;
    font-weight: bold;
    letter-spacing: 1px;
    border: none;
    padding: 1px 1em;
}
table.wiki-content-table td{
    border: none;
    background: none;
    padding: 2px 1em;
    color: #222;
}
table.wiki-content-table tr:nth-child(odd){
    background-color: #F7F7F7;
}
 
/* Timothy Foster's Image Box
=============================*/
.image-box{
    border: 1px solid #BBB;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
.image-box-heading{
    background-color: #DDD;
    border-radius: 5px 5px 0 0;
    color: #444;
    letter-spacing: 1px;
}
.image-box-caption{
    color: #777;
    font-style: normal !important;
}
 
/* Generic Hovertips
=============================*/
.hovertip{
    border: 1px solid #BBB !important;
    background: #FFF;
    opacity: .95 !important;
    border-radius: 5px;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
.hovertip .content{    font-size: 90%; }
 
/* James Kanjo's Hovertips
=============================*/
.hover{
    text-decoration: underline;
    border-bottom: 1px solid;
    color: #4476A7;
}
.hover:hover{
    text-decoration: none;
    border-bottom: none;
}
.hover span{    
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -webkit-transition: opacity 500ms;
    -o-transition: opacity 500ms;
}
.hover:hover span{
    visibility: visible;
    position: absolute;
    display: inline;
    opacity: 1;
    color: #444;
    font-size: 90%;
    margin: 15px -20px;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #BBB;
    width: 300px;
    padding: 1em;
    border-radius: 5px;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
.hover:hover span span{
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
 
/* Tabview
=============================*/
.yui-navset .yui-nav a{
    border-radius: 5px 5px 0 0;
    border: none;
    background: none;
    color: #777;
    font-size: 90%;
}
.yui-navset .yui-nav .selected a{
    background: #DDD;
    border-radius: 5px 5px 0 0;
    border: none;
    color: #444;
    letter-spacing: 1px;
    font-size: 100%;
}
.yui-navset .yui-nav{    border-bottom: 3px solid #DDD; }
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus{
    background: none;
    color: #444;
}
.yui-navset .yui-nav .selected a:hover,
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus{
    background: #DDD;
    color: #444;
}
.yui-navset .yui-nav a em{    border: none; }
.yui-navset .yui-content{
    border-radius: 0 0 5px 5px;
    border: 1px solid #BBB;
    background: #FFF;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
}
 
/* Rate Widget
=============================*/
.page-rate-widget-box{    margin: 5px 0; }
.page-rate-widget-box .rate-points{
    border: 1px solid #BBB;
    background: #FFF;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
    border-radius: 5px;
    padding: 2px 10px;
    margin-right: 6px;
    text-transform: capitalize;
    color: #444;
    font-weight: normal;
}
.page-rate-widget-box .rate-points .number{    font-weight: bold; }
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a{
    color: #444;
    background: #DDD;
    font-weight: bold;
    transition: all 150ms;
   -moz-transition: all 150ms;
   -webkit-transition: all 150ms;
   -o-transition: all 150ms;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover{
    background: #E4E4E4;
    text-decoration: none;
}
.page-rate-widget-box .rateup a{    border-radius: 10px 0 0 10px; }
.page-rate-widget-box .cancel a{    border-radius: 0 10px 10px 0; }
 
/* Owindow
=============================*/
.odialog-shader{    opacity: .5; }
.owindow{
    border: 1px solid #BBB;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 8px 4px rgba(0,0,0,.1);
}
.owindow .button-bar a{    text-transform: capitalize; }
.owindow h1{    font-size: 14pt; }
.owindow h2{    font-size: 12pt; }
.owindow .content img:first-child{
    border-radius: 5px;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25);
    padding: 0 !important;
    margin: 2px 8px;
 }
 
/* Action Area
=============================*/
/* Editor Panel thanks to leiger */
#np-editor-panel,
#wd-editor-toolbar-panel,
#post-edit-panel{
    height: 30px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 450ms ease-in-out;
    -moz-transition: height 450ms ease-in-out;
    -o-transition: height 450ms ease-in-out;
    -ms-transition: height 450ms ease-in-out;
    transition: height 450ms ease-in-out;
}
#np-editor-panel:hover,
#wd-editor-toolbar-panel:hover,
#post-edit-panel:hover{    height: 90px; }
div.change-textarea-size{    visibility: hidden; }
.edit-page-bottomtable{    width: 100%; }
 
/* New Wikidot Editor Buttons
By Matt Gentile at Icondeposit.com */
.wd-editor-toolbar-panel a{
    margin: 0;
    /*padding: 0.1em 0.2em;*/
    border: none;
    /*float: left;*/
    background-color: transparent !important;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -webkit-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -moz-shadow: 0px 1px 3px rgba(0,0,0,0.18);
        -o-shadow: 0px 1px 3px rgba(0,0,0,0.18);
}
.wd-editor-toolbar-panel a:hover{
    /*background-color: transparent;*/
    border: none;
}
.wd-editor-toolbar-panel a:active {
        box-shadow: none;
        -webkit-shadow: none;
        -moz-shadow: none;
        -o-shadow: none;
}
.wd-editor-toolbar-panel a {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdb.png);
}
.wd-editor-toolbar-panel a:hover {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbhover.png);
}
.wd-editor-toolbar-panel a:active {
    background-image: url(http://icondeposit.wdfiles.com/local--files/design%3A4/wdbactive.png);
}
 
/* Navi-Bar
=============================*/
#navi-bar{
    border-color: #888;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#navi-bar .new-site input.text{
    text-align: right;
    opacity: .5;
    transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -webkit-transition: opacity 500ms;
    -o-transition: opacity 500ms;
}
#navi-bar .new-site input.text:focus{    opacity: 1; }
 
/* Kenneth's simpleCal
=============================*/
.cal-main-table{
    border-radius: 5px;
    box-shadow: 0 0 4px -2px rgba(0,0,0,.25);
}
.cal-wrap-table a{    color: #4476A7; }
.cal-wrap-table a:hover{    color: #487AAB; }
.cal-wrap-table .cal-main-table .cal-hover-box{    margin-top: 3px; }
.cal-wrap-table .cal-main-table div.hover-mini-event,
.cal-event-list div.mini-event{
    border: none;
    background: #DDD;
    border-radius: 10px;
    padding: 1px 8px;
}
.cal-wrap-table .cal-main-table .hover-mini-event a{    color: #444; }
.cal-wrap-table .cal-main-table .dh-content{    background: #FFF; }
.cal-wrap-table .new-page-box{
    border: none !important;
    background: none !important;
    padding: 0 !important;
}
.cal-wrap-table .new-page-box input.text{
    border-radius: 5px;
    border: none;
    border: 1px solid #DDD !important;
    box-shadow: 0 0 2px -1px rgba(0,0,0,.25) inset;
    background: #FFF !important;
    padding: 2px !important;
    transition: box-shadow 150ms;
    -moz-transition: all 150ms;
    -webkit-transition:all 150ms;
    -o-transition: all 150ms;
}
.cal-wrap-table .cal-hover-box .new-page-box input.text{
    width: 95%;
}
.cal-wrap-table .cal-modal-content{
    border: 1px solid #BBB;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 8px 4px rgba(0,0,0,.1);
}
.cal-wrap-table .cal-hover .collapsible-block-unfolded-link{
    right: 47%;
    top: 17%;
}
 
/* Timothy's Checklist
=============================*/
.checklist-status-head,
.checklist-item-head,
.checklist-priority-head,
.checklist-date-head,
.checklist-options-head{
    background-color: #DDD;
    padding: 0 5px 0 5px;
    color: #444;
    letter-spacing: 1px;
    font-weight: bold;
}
.checklist-table tr:nth-child(odd){    background-color: #F7F7F7; }
 
/* Quick Comments
=============================*/
#np-editor-title, #np-title,
#np-editor-panel,
#np-cancel, #np-preview,
#new-post-form br{    display: none; }
#np-text{
    width: 85% !important;
    height: 200px !important;
}
.signature{    display: none; }
span.printuser.avatarhover a:first-child{    display: none; }
#thread-container .head .options{    display: none; }
#thread-container .post{
    border: 1px solid #BBB;
    border-radius: 5px;
    background: #FFF;
    margin: 14px 0;
    padding: 5px 10px;
    color: #777;
}
#thread-container .post .content{    padding-left: 8px; }
#thread-container .head .odate{    float: right; }
#thread-container .head{    background: none; }
div.comments-box #thread-container .post{
    font-size: 90%;
    color: #444;
}
 
/* Forum
=============================*/
blockquote{
    background: none;
    background-image: url(http://timothyfoster.wikidot.com/local--files/theme:the-art-in-articles/quotes.png);
    background-repeat: no-repeat;
    background-position: top right;
    border: none;
    border-left: 2px solid #DDD;
    border-right: 1px solid #EEE;
    margin: 6px 2em;
    padding: 3px 1em;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
}
blockquote p{
    font-style: italic;
    color: #555;
}
.forum-start-box .forum-group div.head{
    background: #DDD;
    color: #444;
    border: none;
}
.forum-start-box .head .title{
    color: #444;
    letter-spacing: 1px;
}
 
/* Site Manager
=============================*/
#site-manager .head{    border-bottom: 1px solid #CCC; }
 
/* Printing
=============================*/
body.print-body{
    background-image: none !important;
    background-color: #FFF !important;
}
.print-body #content-wrap,
.print-body #main-content{
    border: none !important;
    box-shadow: none !important;
    margin: 0;
}
.print-body .quickCom{    display: none !important; }
 
// Special class for omitting things from print
.print-body .noprint{    display: none; }

Notes

Customizing the Logo Image:
The Art in Articles allows you to install a custom logo image, located generally in the top left corner of the page. It is recommended that this image have significant transparency.

To add your own logo, add the following to the end of the code, making sure that URL is the location of your image online:

#container-wrap{
    background-image: url(URL) !important;
}

Some History
The Art in Articles is actually a modernized version of the very first theme I had ever made: Articles n' More. The old theme was too extreme on color differences, and it did not utilize any CSS3. In light of this new innovation, I set out to recreate the theme with the purpose of making it smoother while retaining the original mood.