Midnight Minimalist

Click to preview

Name: Midnight Minimalist

Author: pieterh
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: blog minimalist sidebar topbar

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

Description:

Midnight Minimalist is a variation of Techno Minimalist. The theme is designed for blogs and news/comment sites, and works on all screen widths from 1024 pixels and up.

Features:

• iPhone compatible
• Fixed to 950px wide so that your layouts are predictable
• Supports hover popups (tooltips)
• Available in multiple color shades

To make hover popups around images or text, use this syntax: Image or linkHover text. See an example and the original HowTo.

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/midnight-minimalist

Code

+ show the code

/*
    Midnight Minimalist fixed-width variation
    Produced by the Wikidot Minimalist Theme Factory
    by Pieter Hintjens
 
    Color chart:
    * Primary: #888888
    * Shade: #363636
*/
 
/*
Minimalist Theme Set by Pieter Hintjens,
based on a design by Pieter Hintjens
using elements by James Kanjo
and with help from many others.
(c) the Authors cc-by-sa
 
Changelog:
 
* 2009-11-11 - added Steven Heynderickx nobreak div style
* 2009-10-31 - added table formatting for PageManager module
* 2009-10-25 - added elegant code block design from Wikidot Community
* 2009-10-25 - added join-text class for Join module
* 2009-10-06 - uses link colors for span popup texts
* 2009-09-12 - hides the error boxes shown to site members on system:join page
* 2009-09-11 - added support for hover popups over images and links
* 2009-09-10 - first version published for techblog-template.wikidot.com
*/
 
html, body {
    min-height: 101%;
}
 
#container-wrap {
    padding-right: 8px;
    overflow: hidden;
}
 
/*  Use 950 pixels width for normal screens, 100% for iPhones */
#container {
    width: 950px;
    margin: 0 auto;
    position: relative;
}
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}
 
a:link {
    text-decoration:none;
}
 
a:active {
    text-decoration:none;
}
 
a:visited {
    text-decoration:none;
}
 
a:hover {
    background: transparent;
    color:#000000;
    text-decoration:underline;
}
 
#header {
    height: 118px;
}
 
#header h1 {
    float: left;
    padding: 35px 0 0 16px;
}
 
#header h1 span {
    padding-right: 7px;
}
 
#header h1 a {
    font-family: Trebuchet MS,Arial,Sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 26px;
}
 
#header h1 a:hover {
    text-decoration: none;
}
 
#header h2 {
    color: #999999;
    font-family: "Verdana", Arial, Helvetica, sans;
    font-size: 16px;
    line-height: 20px;
    padding: 38px 7px 14px;
}
 
#header h2:before {
    content: "|";
}
 
#header h2 span {
    font-size:10px;
    letter-spacing:2px;
    padding-left:7px;
    text-transform:uppercase;
}
 
#top-bar {
    background-color:#FFFFFF;
    border-left:3px outset #000000;
    border-right:3px outset #000000;
    border-top:3px outset #000000;
    height:62px;
    left:0;
    position:relative;
    width:950px;
}
 
#top-bar ul {
    height:29px;
    left:10px;
    padding:0;
    position:relative;
    top:10px;
    width:930px;
}
 
#top-bar li {
    margin: 0;
}
 
#top-bar ul ul {
    margin-right: 0;
}
 
#top-bar li a {
    border-right: 1px solid #ffffff;
    color: #eeeeee;
    font-size: 13px;
    font-weight: bold;
    line-height: 29px;
    padding: 0 15px;
    text-decoration: none;
}
 
#top-bar li a:hover {
    text-decoration: none;
}
 
#top-bar li ul {
    border: none;
    left: 0;
    position: relative;
    top: 0;
    width: 1em;
}
 
#top-bar li ul li a {
    width: 18em;
}
 
#login-status {
    top: 93px;
    right: 16px;
}
 
#search-top-box {
    right: -63px;
    top: 40px;
}
 
#search-top-box .button {
    visibility: hidden;
}
 
#search-top-box .text {
    padding: 2px 2px 2px 5px;
    width: 220px;
}
 
#search-top-box input.empty {
    color:#999999;
}
 
#search-top-box input.text {
    border:1px solid #777777;
    color:#999999;
}
 
#login-status a {
    text-decoration: none;
}
 
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    color: #ffffff;
}
 
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    color: #000;
}
 
#side-bar {
    float:right;
    margin:5px;
    overflow:hidden;
    padding:5px;
    width:350px;
}
 
div.buttons input, input.button, button, a.button {
    background-color: #ffffff;
    font-weight: bold;
    border-radius: 8px 8px;
    -moz-border-radius: 8px 8px;
    -webkit-border-radius: 8px 8px;
}
 
div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    color: #ffffff;
    text-decoration: none;
}
 
#main-content {
    margin: 20px 0 0 0;
    padding: 0 15px;
    min-height: 600px;
    overflow: hidden;
}
 
#content-wrap {
    background-color: #FFFFFF;
    border-bottom: 3px outset #000000;
    border-left: 3px outset #000000;
    border-right: 3px outset #000000;
    min-height: 1px;
    width: 100%;
}
 
#page-content > *:first-child {
    margin-top: 0;
}
 
#page-title {
    border:medium none;
    color:#333333;
    font-family:Arial,Helvetica,Sans-serif;
    font-size:190%;
    font-weight:bold;
    margin-top:0;
    padding-bottom:2px;
}
 
#page-content > h1,
#page-content > h2,
#page-content > h3,
#page-content > h4 {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    letter-spacing: -1px;
    margin: 15px 0;
    padding: 0;
}
 
h1 {
    font-size: 180%;
}
 
#main-content h1 span,
#main-content h2 span,
#main-content h3 span,
#main-content h4 span {
    color:#000000;
}
 
#main-content h1 span a,
#main-content h2 span a,
#main-content h3 span a,
#main-content h4 span a {
    color:#000000;
    text-decoration: none;
}
 
#main-content h1 span a:hover,
#main-content h2 span a:hover,
#main-content h3 span a:hover,
#main-content h4 span a:hover {
    text-decoration: none;
}
 
div.page-calendar-box {
    padding: 0;
}
 
blockquote {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-right.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}
 
blockquote p {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif);
    background-repeat: no-repeat;
    margin-top: 0;
    padding-top: 1em;
    min-height: 37px;
}
 
blockquote p + p {
    padding-top: 0;
    background-image: none;
}
 
#breadcrumbs {
    margin-bottom: 1em;
}
 
.odate, .like-odate {
    font-size: 85%;
    font-weight: bold;
    color: #666;
    background: transparent;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
 
#membership-by-password-box error-block,
#membership-apply-box error-block,
.member .error-block {
    display:none;
}
 
#footer {
    background-color: #999999;
    border: 1px solid #333333;
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 934px;
}
 
#footer a {
    color: #333333;
}
 
#license-area {
    color: #999999;
    padding-bottom: 10px;
    text-align: center;
}
 
#license-area a {
    color: #aaaaaa;
}
 
.image-container {
    padding:0 1em 0 1em;
}
 
/*  These are added for use in the nav:side */
 
.side-box {
    background-color:#F8F8F8;
    border:1px solid #DADADA;
    margin-bottom:10px;
    margin-left:10px;
    padding:8px;
    width:310px;
}
 
.side-box h2 {
    background-color:#EBF3FB;
    font-size:10px;
    margin-left:-8px;
    margin-right:-8px;
    margin-top:-8px;
    padding:5px 10px;
}
 
#side-bar ul {
    padding: 0 0 0 1em;
    margin: 0;
}
 
/*  Pop-up hover text over images or links  */
/*  Use: [[span class="hover"]]Image or link[[span]]Hover text[[/span]][[/span]] */
 
.hover span {
    display: none;
}
.hover:hover span {
    position: absolute;
    display: inline;
    margin: 20px -20px 0 0;
    height: auto;
    width: auto;
    background: #eee;
    border: 1px solid #555;
    color: #555;
    padding: 1em;
    font-size: 12px;
}
.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
.hover:hover {
    background-color: transparent;
    text-decoration: underline;
}
 
/*  Text-only Join link by Ken Tsang */
 
.join-text a {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    text-decoration: none; 
}
 
.join-text a:hover {
    text-decoration: underline; 
}
 
/*  Use elegant code brackets from Wikidot Community */
.code {
     -moz-box-shadow: 10px -5px 15px #ddd;
     background-color:#E1E8E8;
     background-image:url(http://community.wikidot.com/local--files/admin:css/brackets.png);
     background-repeat:no-repeat;
     border:2px dotted darkgrey;
     font-family:monospace;
     font-size:12px;
     margin:0.4em 0 0.4em 40px;
     min-height:65px;
     overflow:auto;
     padding: 0 1em 0 40px;
     width:85%;
}
 
/*  For PageManager module (http://modules.wikidot.com) */
/*  Table style is layout, header/footer are top & bottom rows */
.layout {
    border-collapse:collapse;
    color:#3B485F;
    width: 100%;
    table-layout:fixed;
}
.layout tr {
    background: #FCFFDF;
    border-bottom:1px solid #EFEFEF;
}
.layout td {
    padding-left: 1em;
}
.layout .truncate {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.layout .header {
    height: 2em;
    background: #AFCCFF;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
    font-size: 13px;
}
.layout .footer {
    background: #FCFFDF;
    border-top: 1px solid #9F9F9F;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
}
 
/*  Div style that makes paragraphs join together (Steven Heynderickx) */
.nobreak p {
    display: inline;
    margin: 0px;
    padding: 0px
}
 
#header h1 a {
    color: #888888;
}
#top-bar ul {
    background-color: #363636;
    border-bottom:4px solid #888888;
}
#top-bar li a:hover {
    background-color: #888888;
}
div.buttons input, input.button, button, a.button {
    border: solid 1px #888888;
}
div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    background-color: #888888;
}
a:link {
    color: #888888;
}
a:active {
    color: #888888;
}
a:visited {
    color: #888888;
}
#main-content h1 span a:hover,
#main-content h2 span a:hover,
#main-content h3 span a:hover,
#main-content h4 span a:hover {
    color: #363636;
}
#container-wrap {
    background-color: #363636;
}
#header {
    background-color: #363636;
}
#top-bar li ul li a {
    background-color: #363636;
}
#search-top-box input.empty {
    background-color: #363636;
}
#search-top-box input.text {
    background-color: #363636;
}
div.buttons input, input.button, button, a.button {
    color: #363636;
}
.hover {
    color: #0a9200;
}
 
.hover:hover{
    color: #0a9200;
}
/*  Classes for tab views, by Steven Heynderickx  */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border:solid #888888; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#363636 url(http://hackedforum.wikidot.com/local--files/tabpage/tabcolor.png) repeat-x -3px; /* tab background */
    border-top:solid #888888 1px;
    border-left:solid #888888 1px;
    border-right:solid #888888 1px;
    font-weight:600;
    font-size:80%;
    color:#000;/*tab text color*/
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#888888
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #f00 0px;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#888888 url(http://hackedforum.wikidot.com/local--files/tabpage/tabcolor.png) repeat-x -3px; /* selected tab background */
    color:#fff;border:1px solid #888888;
}

Notes

You can create your own customizations of this theme quite easily in your site manager. Create a custom theme and use the wide variation below code as a starting point. Then, add your customizations. You can change the color set simply by changing the @import line.

Customization

To move the side bar to the left of the page, add this to your custom CSS:

#side-bar {
    border-left: none;
    border-right:1px dashed #DDDDDD;
    float:left;
}

Get news and discuss

Please use the Wikidot projects forum to discuss this theme and get news about updates. You can also Watch this page to get an email when it changes.

Variations on this theme

• Techno Minimalist - View - Edit
• Sunrise Minimalist - View - Edit
• Ginger Minimalist - View - Edit
• Fresh Minimalist - View - Edit
• Eco Minimalist - View - Edit
• Tropical Minimalist - View - Edit
• Precious Minimalist - View - Edit
• Summer Minimalist - View - Edit
• Classic Minimalist - View - Edit
• Lonely Minimalist - View - Edit
• Pretty Minimalist - View - Edit
• Queen Minimalist - View - Edit
• Radical Minimalist - View - Edit
• Bloody Minimalist - View - Edit
• Discrete Minimalist - View - Edit
• Golden Minimalist - View - Edit
• Silent Minimalist - View - Edit
• Midnight Minimalist - View - Edit

Similar themes Super Dr Green 1 Author: Super Dr Green Rating: 0, Comments: 0 Tags: sidebar topbar Matalex Orange Black Author: alexandra bond Rating: 1, Comments: 1 Tags: black responsive sidebar smartphone topbar

Browse themes by tag ardeol black blog blue bmc brown business clean colorful company corperate corporate css3 curved dark dashed developer education educational flexible floral flower freshly-squeezed glass green grey grunge hello minimalist modern nature navy no-sidebar no-topbar orange outline professional purple rainbow red responsive series sidebar simple smartphone super topbar white wiki yellow

Comments

Perfect.

Akalabeth 18 Jul 2010 23:21

I'm using this for my wiki and it's awesome. Simple, clean yet completely different and not boring.
It's dark so it doesn't hurt the eyes and the layout is completely different from all the others: title and tag line looks perfect, a perfect top menu and side bar and perfect color scheme throughout the theme.
There isn't a thing I'd like to change about it. There's also the hover feature that I'm not using yet but it seems great. The default hover color of green isn't very pretty though, but it can easily be changed by adding style="color:x" where x is any color you want.
This place doesn't seem to have a lot of themes, but even if it did I doubt I'd find any better than this.

Also what's up with fixed length and iPhone compatibility? Perfect for an iPhone related wiki.

Last edited on 18 Jul 2010 23:22 by Akalabeth Show more