The Art in Articles

Click to preview

Name: The Art in Articles

Author: Timothy Foster
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: ardeol corporate css3 education sidebar topbar

Supports top bar menu *: yes
Supports side bar menu *: yes
* depends on tags: topbar and sidebar

Description:

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.

See the demo here!

Many of Wikidot's applications have been included in the design so that you may create the perfect community, including:

• The Image Box, by Timothy Foster
• Inline Hovertips, by James Kanjo
• simpleCal, by tsangk
• The Checklist, by Timothy Foster

Finally, don't forget to cater to your site's purpose by customizing the logo image! Notes on how that can be done are found below.

How to install

• go to: your wiki admin panel » appearance » themes
• choose External CSS theme
• supply the following URL as the CSS location

http://themes.wdfiles.com/local--code/the-art-in-articles

Code

+ show the code

/******************************
    The Art in Articles
    By Timothy Foster
    Copyright 2013
******************************/
 
/* Imports
=============================*/
@import url(http://themes.wdfiles.com/local--files/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://themes.wdfiles.com/local--files/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://themes.wdfiles.com/local--files/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://themes.wdfiles.com/local--files/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://themes.wdfiles.com/local--files/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://themes.wdfiles.com/local--files/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;
}

Similar themes fake-wikidot-standard Author: Liurd Rating: 1, Comments: 0 Tags: sidebar topbar Gnl 109557431160 Author: Mukapogx Rating: 0, Comments: 0 Tags: sidebar topbar

Browse themes by tag 2.0 3d 3d-buttons 610nm and and/or ardeol articles band base beige black blog bloo blue bmc border boring brown business camo cat chocholate christian christmas city clan claret claus clay clean coffe coke colorful company contest contest-win corperate corporate corporation creative crimson cross css3 css3-buttons curved d14 dark dashed deep

Comments

Awesome!

Chase Hamilton 07 May 2013 00:34

Love this theme - elegant, yet fierce.

---

Chase Hamilton