As seen in the Sandbox Designs Competition.
Chocolate Vanilla is a theme predominantly coloured in brown shades. Its features include:
- careful use of fonts to blend serif stylised titles with simple sans serif content, with extra line-height for attractiveness and greater readability;
- medium contrast between text and background to ensure comfort while reading whilst also providing enough contrast to remain clear and readable;
- a menu bar near the top indicating which page is currently being browsed.
/*
THEME NAME: Chocolate Vanilla
THEME URI: http://geoffbrady.net/sandbox/chocolate-vanilla/
DESCRIPTION: A theme that concentrates on simple typography
VERSION: 0.4
AUTHOR: Stephen Broughton
AUTHOR URI: http://geoffbrady.net
TEMPLATE: sandbox-10
*/
#container {
clear: right;
float: right;
width: 450px;
}
#footer {
clear: both;
padding: 10px 0;
}
#header {
height: 100px;
float: left;
width: 350px;
}
#menu {
height: 100px;
width: 400px;
}
#primary, #secondary {
clear: left;
float: left;
width: 250px;
}
#wrapper {
width:760px;
}
a.more-link, #archives-page ul, #comments a, .entry-content a,
.entry-meta a, .entry-title, .entry-title a, #footer a, input,
#link-page ul, #menu li a,.navigation a, .page-link a,
.sidebar li a, .navigation a:hover, .page-link a:hover textarea {
color:#530;
}
body {
color:#000;
}
a.more-link:hover, h1#blog-title, h1#blog-title a,
h1#blog-title a:hover, #menu li.current_page_item > a {
color:#fff;
}
.tags a {
color:#530;
}
a.more-link, #container, .navigation a, .page-link a, #wrapper {
background-color:#edb;
}
a.more-link:hover, #comments a:hover, .entry-meta a:hover,
.entry-content a:hover, #footer, .formcontainer a:hover, #header,
#menu, #menu li a, .sidebar li a:hover, #comments-list li.alt,
#trackbacks-list li.alt, .navigation a:hover, .page-link a:hover {
background-color:#dca;
}
body, input, textarea {
background-color:#fbedda;
}
#footer a:hover, #menu li a:hover,
#menu li.current_page_item > a:hover {
background-color:#a97;
}
#menu li.current_page_item > a {
background-color:#753;
}
.sidebar {
background:url(http://geoffbrady.net/wp-content/themes/chocolate-vanilla/bg.png);
}
a.more-link, .navigation a, .page-link a {
border-bottom:1px solid #edb;
}
a.more-link:hover, .navigation a:hover, .page-link a:hover {
border-bottom:1px solid #a97;
}
blockquote {
border-left:4px solid #a97;
}
#footer {
border-top:4px solid #a97;
}
.entry-title a {
border-bottom:none !important;
}
#comments h3, .entry-title, .entry-title a, .entry-title a:hover,
#header, #menu, #primary, #respond h3, #trackbacks-list h3 {
border-bottom:4px solid #a97;
}
#comments a, dt, .entry-meta a, .entry-content a, #footer a,
.formcontainer a, .sidebar li a {
border-bottom:1px solid #a97;
}
.byuser {
border:1px solid #a97;
}
input, .bypostauthor, textarea {
border:1px solid #530;
}
#footer a:hover {
border-bottom: 1px solid #530;
}
#archives-page ul, #links-page ul {
margin: 10px 20px;
padding: 0;
}
blockquote {
margin-left: 20px;
padding-left: 20px;
}
#blog-description {
margin: 0 20px;
}
body, #menu ul {
padding: 0;
margin: 0;
}
#comments {
margin: 50px 0 20px 10px;
}
#container {
padding: 0 0 0 20px;
}
dt {
margin: 10px 0 5px;
}
.entry-content h3, .entry-content h4, .entry-content h5,
.entry-content h6 {
margin: 25px 0 0;
padding: 0 0;
}
.entry-content p {
margin: 10px 0;
padding: 0 0;
}
.entry-meta {
margin: 10px 10px;
}
.entry-title {
margin: 40px 0 0;
}
#footer {
padding: 10px 0;
}
h1#blog-title {
margin: 10px 5px;
}
#header {
margin: 0;
padding: 5px 0;
}
.hentry {
clear: left;
width: 400px;
margin: 10px;
}
img {
max-width: 400px;
}
input#s {
width: 150px;
}
li.widget, li#pages, li#categories, li#search, li#archives,
li.linkcat, li#rss-links, li#meta {
margin: 40px 0;
}
#menu {
padding: 5px 0 5px 10px;
margin-left: 350px;
}
#menu li {
margin: 2px 0;
width: 100%;
}
#menu li a {
display: block;
padding: 0 20px;
}
.nav-next {
float: right;
margin: 10px 20px 10px 0;
}
.nav-previous {
float: left;
margin: 10px 0 10px 20px;
}
.page-link a {
padding: 0 2px;
margin: 0 2px;
}
.sidebar {
margin: 0;
padding: 0 20px;
}
#comments h3, .sidebar h3 {
padding: 0;
margin: 0 0 5px;
}
.sidebar li li {
margin: 1px 0;
}
.sidebar ul {
margin: 0;
padding: 0;
}
#trackbacks-list li, #comments-list li {
margin: 40px 0;
width: 350px;
padding: 10px 10px;
}
ul#archives-page, ul#links-page {
padding: 0;
margin: 10px 0;
}
ul.children {
margin: 2px 10px;
padding: 0;
}
ul.xoxo {
padding: 10px 10px;
margin: 10px 10px;
}
#wrapper {
margin: 0 auto;
}
#archives-page ul, .entry-content ul, #links-page ul {
list-style-type:square;
}
.skip-link {
display:none;
}
#comments-list li, #menu ul, #trackbacks-list li, .sidebar ul,
ul#archives-page, ul#links-page {
list-style-type:none;
}
ins {
text-decoration:none;
}
del, ins {
color:#753;
background: url('http://geoffbrady.net/wp-content/themes/chocolate-vanilla/bg.png');
}
#archives-page h3, #comments h3, .entry-content h3,
.entry-content h4, .entry-content h5,.entry-content h6,
.entry-title, h2.page-title, #links-page h3, #respond h3,
.sidebar h3, #trackbacks-list h3 {
font-family:'Bookman Old Style', 'Times New Roman', serif;
font-style:italic;
font-weight:normal;
}
#archives-page ul, #links-page ul {
color:#530;
}
body {
font-family:'Lucida Sans Unicode', Tahoma, Verdana, sans-serif;
font-size:0.7em;
}
code, pre {
font-family:'Courier New', consolas, monospace;
}
.entry-date {
text-align:right;
}
#footer {
text-align:center;
}
.entry-content {
line-height:180%;
}
.entry-meta {
line-height:160%;
}
.tags {
line-height:220%;
}
h2.page-title {
font-size:220%;
}
.entry-title, .sidebar h3 {
font-size:200%;
}
#comments h3, h1#blog-title, h1#blog-title a, .entry-content h3 {
font-size:140%;
}
.entry-content h4 {
font-size:135%;
}
.entry-content h5 {
font-size:130%;
}
.entry-content h6 {
font-size:125%;
}
code, pre {
font-size:110%;
}
.entry-meta {
font-size:90%;
}
a, .entry-title, .entry-title a, .entry-title a:hover,
h1#blog-title, h1#blog-title a, #menu li a {
text-decoration:none;
}
