Blue Heaven

Click to preview

Name: Blue Heaven

Author: bcammo
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: blue bmc clean heaven sidebar topbar

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

Description:

Fresh. Clean. Simple. Flexible. That's what the Blue Heaven Theme is all about.

The theme is a fixed width of 960px, but can be easily adjusted to a fluid width. The sidebar can be positioned on the left, right or not displayed at all. The search bar also needs to be added to the sidebar (see below).

For a live preview customised to show off the best of this theme, I recommend you head over here.

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/blue-heaven

Code

+ show the code

/***
 
****
Blue Heaven Theme. © BMC WebDesign, 2010. http://css3.wikidot.com
****
 
v1.04
 
***/
 
/* GLOBAL ---------------------------------------------------------- */
 
body {
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}
 
a { 
    color: #1668b2; 
    text-decoration: none; 
}
a.newpage {
    color: #b30000;
}
a:hover { 
    color: #0085fe; 
    text-decoration: underline; 
    background-color: transparent; 
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif; 
    color: #252323; 
    font-weight: normal;
}
 
h1 { font-size: 220%; margin: 10px 0 10px 0; padding: 5px 0; }
h2 { font-size: 190%; margin: 10px 0 10px 0; padding: 0; }
h3 { font-size: 160%; margin: 10px 0 5px; padding: 0; }
h4 { font-size: 130%; margin: 5px 0 5px; padding: 0; }
h5 { font-size: 120%; margin: 4px 0 4px; padding: 0; }
h6 { font-size: 110%; margin: 4px 0 4px; padding: 0; }
 
input.text, textarea {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
/* LAYOUT ---------------------------------------------------------- */
 
html {
    background: #dbdbdd url(/local--files/blue-heaven/heaven-bg-blue.png) repeat-x center -120px;
}
body {
    background: transparent url(/local--files/blue-heaven/heaven-footer.png) repeat-x center bottom;
}
 
#container-wrap-wrap {
    /*min-width: 800px; *fluid width if you want it*
    max-width: 1150px;*/
    width: 960px;
    margin: 0 auto;
    position: relative;
}
#container-wrap {
    position: relative;
    z-index: 20;
}
 
/* Header */
 
#header {
    position: relative;
    z-index: 40;
    width: 100%;
    height: 140px;
    background: url(/local--files/blue-heaven/heaven-header-transparent.png) no-repeat center top;
    _background: none; /* for IE6 - b/c it doesn't support transparent png */
}
#header h1 {
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 350%;
}
#header h1 a {
    color: #fff;
    font-family: Georgia;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
#header h2 {
    position: absolute;
    top: 70px;
    left: 10px;
    font-size: 140%;
    color: #032e55;
    font-family: Georgia;
}
 
/* Login Status & Account Options */
 
#login-status {
    position: absolute;
    top: 0;
    right: 20px;
    color: #212121;
    height: 30px;
    line-height: 30px;
    width: 300px;
    font-size: 0.85em;
    text-align: right;
}
#login-status a {
    color: #212121;
}
#login-status a:hover, #login-status a:focus {
    color: #fff;
    text-decoration: none;
} 
#login-status .printuser {
    color: #212121;
    margin-right: 4px;
}
#login-status .printuser a img.small {
    display: none;
}
a#account-topbutton {
    margin-left: 1px;
    padding: 10px;
    border: none;
    background: none;
}
#account-options {
    width: auto;
    background: rgba(0,0,0,0.6);
    text-align: center;
    border: 1px solid white;
    margin-top: -7px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
#account-options ul li a {
    background: rgba(255,255,255,0);
    padding: 0 10px;
    margin: 0;
    height: 15px;
    line-height: 15px;
    border-bottom: none;
    color: #fff;
}
#account-options ul li a:hover, #account-options ul li a:focus {
    color: #3198dd;
    text-decoration: none;
    background: white;
    border-bottom: none;
}
 
/* Search top box */
 
#search-top-box {
    display: none;
}
 
/* Topbar */
 
#top-bar {
    position: absolute;
    right: 10px;
    bottom: 0;
    font-size: 14px;
    height: 30px;
    padding: 0 10px;
    background-color: #edecec;
    background-image: url(/local--files/blue-heaven/heaven-topbar-bg-white.png);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ede8e8));
    background-image: -moz-linear-gradient(top, #fff, #ede8e8);
    background-repeat: repeat-x;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-box-shadow: 1px -1px 3px rgba(0,0,0,0.22);
    -moz-box-shadow:  1px -1px 3px rgba(0,0,0,0.22);
    box-shadow:  1px -1px 3px rgba(0,0,0,0.22);
    font-size: 1.2em;
}
#top-bar ul {
    float: left;
    border-left: 1px solid #fff;
    border-right: 1px solid #edecec;
}
#top-bar ul li {
    float: left;
    border-right: 1px solid #fff;
    border-left: 1px solid #edecec;
    margin: 0;
    height: 20px;
    padding: 5px 2px;
    position: relative;
}
#top-bar ul li a {
    text-shadow: 0 1px 0 #fff;
    color: #323232;
}
#top-bar ul li:hover {
    background-color: #0071cb;
    background-image: url(/local--files/blue-heaven/heaven-topbar-bg-blue.png);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0081e2), to(#0071cb));
    background-image: -moz-linear-gradient(top, #0081e2, #0071cb);
    background-repeat: repeat-x;
}
#top-bar ul li a.current-link, #top-bar ul li a:hover {
    color: #1668b2; 
    background: none;
    text-decoration: none;
}
#top-bar ul li:hover a, #top-bar ul li a:hover {
    color: #fff;
    text-shadow: 0 1px 0 #1463a8;
}
#top-bar ul li a:active {
    position: relative;
    top: 1px;
    left: 1px;
}
 
/* Drop-down menus */
#top-bar ul li ul {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 400ms ease;
}
#top-bar ul li:hover ul {
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    position: absolute;
    display: inline-block;
    width: auto;
    top: 30px;
    right: 0px;
    padding: 0;
    border: none;
    background-color: #edecec;
    background-image: url(/local--files/blue-heaven/heaven-topbar-bg-white.png);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#edecec));
    background-image: -moz-linear-gradient(top, #fff, #edecec);
    background-repeat: repeat-x;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
#top-bar ul li ul li {
    border: none;
    height: 25px;
    background: none;
    padding: 0 0 0 0;
}
#top-bar ul li:hover ul li a {
    margin: 0;
    height: 25px;
    color: #323232;
    display: block;
    background: none;
    text-shadow: none;
    text-align: right;
    line-height: 23px;
}
#top-bar ul li:hover ul li a:hover {
    color: #fff;
    background: none;
    text-shadow: 0 1px 0 #1463a8;
}
#top-bar ul li ul li:last-child, #top-bar ul li.sfhover ul li.sfhover:last-child {
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
 
/* Sidebar */
 
#side-bar {
    margin: 0;
    float: right;
    width: 200px;
    padding: 15px 5px 5px;
    position: relative;
    z-index: 20;
}
#side-bar ul {
    margin: 0;
    padding: 0;
    width: 190px;
    list-style: none;
    background: transparent url(/local--files/blue-heaven/heaven-horizontal-divider.png) repeat-x right bottom;
}
#side-bar ul li {
    margin: 0;
    padding: 6px 0;
    display: block;
    font-size: 1.1em;
    background: transparent url(/local--files/blue-heaven/heaven-horizontal-divider.png) repeat-x right top;
    padding-left: 10px;
}
#side-bar ul li a {
    color: #444;
    -webkit-transition: padding 150ms ease-out;
    -moz-transition: padding 150ms ease-out;
}
#side-bar ul li a:hover {
    color: #0085fe;
    padding-left: 10px;
}
#side-bar hr {
    height: 0;
    width: 230px;
    border-top: 1px solid #d9d7d8;
    border-bottom: 1px solid #fff;
    position: relative;
    left: -41px;
}
#side-bar h5 {
    text-align: center;
    font-size: 110%;
    margin: 0;
}
#side-bar input.text {
    width: 160px;
    margin: 7px 0;
    padding: 3px 30px 3px 5px;
    border: 1px solid;
    border-color: #c1c0c5 #c1c0c5 #d9d7d8 #d9d7d8;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow: -1px 1px 2px rgba(0,0,0,0.2) inset;
}
#side-bar input.text:focus {
    outline: none;
    border-color: #1670c8;
}
#side-bar .search-box {
    position: relative;
}
#side-bar .search-box input.button {
    border: none;
    text-indent: -9999px;
    color: transparent;
    background: transparent url(/local--files/blue-heaven/heaven-search-icon.png) no-repeat;
    display: block;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 11px;
    right: 8px;
}
#side-bar .search-box input.button {
    cursor: pointer;
    background: transparent url(/local--files/blue-heaven/heaven-search-icon.png) no-repeat;
}
 
/* Main Content */
 
#content-wrap {
    margin: 0;
    padding: 0 10px 0 0;
    position: relative;
    overflow: visible;
    z-index: 30;
    background: #f4f6f6;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.4);
    box-shadow: 0 3px 7px rgba(0,0,0,0.4);
    border-top: 1px solid #fff;
}
#main-content {
    z-index: 30;
    margin: 0 220px 0 0;
    padding-bottom: 5px;
    position: relative;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: transparent url(/local--files/blue-heaven/heaven-main-shadow-right2.png) repeat-y right top;
}
#page-title {
    color: #323232;
    padding: 10px 10px 2px 15px;
    margin: 0;
    border: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.9);
    background: transparent url(/local--files/blue-heaven/heaven-horizontal-divider.png) repeat-x right bottom;
}
#breadcrumbs {
    padding: 8px 0 6px 40px;
    background: transparent url(/local--files/blue-heaven/heaven-horizontal-divider.png) repeat-x right bottom;
}
 
#footer {
    clear: both;
    width: 940px;
    margin-top: 25px;
}
#license-area {
    padding-bottom: 10px;
}
#footer, #footer a {
    color: #ddd;
    font-size: 0.9em;
}
#license-area, #license-area a {
    color: #ddd;
    font-size: 0.85em;
}
 
/* WIKIDOT ELEMENTS ---------------------------------------------------------- */
hr {
    height: 0;
    border-top: 1px solid #d9d7d8;
    border-bottom: 1px solid #fff;
}
.code {
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
blockquote {
    padding: 0 5px;
    background: #e2e4e4;
    border: 1px solid #c9cbcb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
/* Buttons */
div.buttons input, input.button, button, file, a.button, .button-bar a, #new-post-button, .rate-points, .rateup a, .ratedown a, .cancel a, .pager a, .new-post a {
    height: auto;
    padding: 4px 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #acacac;
    color: #444;
    font-size: 1.1em;
    margin: 0 5px;
}
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover, .button-bar a:hover, #new-post-button:hover, .rateup a:hover, .ratedown a:hover, .cancel a:hover, .pager a:hover, .new-post a:hover {
    color: #fff;
    background-color: #1d76c5;
    border: 1px solid #0b6194;
    text-decoration: none;
}
.page-rate-widget-box .rate-points, .pager .current {
    padding: 4px 6px;
    font-size: 1.1em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
}
#site-manager {
    margin: 0;
}
 
/* DIFFERENT LAYOUT OPTIONS ---------------------------------------------------- */
 
/* No sidebar *
#side-bar {
    display: none;
}
#content-wrap {
    padding: 0;
}
#main-content {
    margin: 0;
}
*/
 
/* Left sidebar *
#side-bar {
    float: left;
    background-repeat: repeat;
}
#content-wrap {
    padding: 0 0 0 10px;
}
#main-content {
    margin: 0 0 0 220px;
    background: transparent url(/local--files/blue-heaven/heaven-main-shadow-left2.png) repeat-y left top;
}
*/

Notes

Customise it!

You can change the way the theme appears by adding the following code snippets to either individual pages or a live template.

Search box in sidebar

To have a nicely styled search box added the top of your side bar, add the following code to the very top of your nav:side page (or other relevant sidebar page):

+++++ Search this site...
[[module Search mini="true"]]
----

Left sidebar

[[module CSS]]
/* Left sidebar */
#side-bar {
    float: left;
}
#content-wrap {
    padding: 0 0 0 10px;
}
#main-content {
    margin: 0 0 0 220px;
    background: transparent url(http://css3themes.wikidot.com/local--files/blueheaven:start/heaven-main-shadow-left.png) repeat-y left top;
}
[[/module]]

No sidebar

[[module CSS]]
/* No sidebar */
#side-bar {
    display: none;
}
#content-wrap {
    padding: 0;
}
#main-content {
    margin: 0;
}
[[/module]]

Browser Support

The theme has been tested in the following browsers, and appears to render properly:

• Safari 5
• Firefox 3.6
• Chrome 6
• Opera 9.6
• Internet Explorer 8

Known Problems

• IE6 spits the dummy at the sidebar.

Changelog

• October 20, 2010: First release (v1.0).
  • Colour: blue
• October 20, 2010: v1.01
  • slight change to background colour of content-wrap.
• October 20, 2010: v1.02
  • added support for drop-down menus in the topbar.
• October 22, 2010: v1.03
  • fixed top-bar 'current-link'
• October 26, 2010: v1.04
  • adjusted margins around headers
  • added different colour for a.newpage
• January 3, 2011: v1.05
  • fixed side bar search box problem in Chrome 8 on PC.

Feedback

If you've noticed a bug with the theme, or would like to give some suggestions, just head over to http://css3.wikidot.com/contact:themes - we'd love to hear from you.

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

Decent!

(account deleted) 19 Oct 2010 22:40

It's a pretty good theme, but the lack of submenus should be approached! Apart from that, I particularly enjoy the cleanliness of the theme as well as the basic interface (large letters add to the simplicity).

EDIT: Especially like the simple colours and the "no-avatar" username.

Last edited on 19 Oct 2010 22:55 by (account deleted) Show more

bcammo 20 Oct 2010 05:40

Glad you like it. I just added support for drop-down menus in the topbar.

---

BMC Creative | RoaringApps | @brycecammo

Whane The Whip 31 Dec 2010 16:58

I like themes that are easy to customize and your clear comments within the CSS are very helpful (and informative - I've always had a hard time with fluid themes and looking at your optional code helps alot).

I'm planning to use this theme and playing around with a logo concept to see if it will mesh well.

Anyway you do very good work and have an eye for detail and I hope to see more samples of your work here and on your css3 site.

One thing I did observe, is that the mini search box does not display correctly in Chrome.

Last edited on 31 Dec 2010 17:51 by Whane The Whip Show more

bcammo 03 Jan 2011 01:07

Thanks for the kind words. The search box is displaying fine for me in Google Chrome - is there a specific site where it is not working for you?

---

BMC Creative | RoaringApps | @brycecammo

Whane The Whip 03 Jan 2011 01:20

Yes, at http://geekmedia.us near the bottom of the side bar. This site is a WIP and in case I have removed the search box before you get a chance to take a look, here is a screen shot, the top half is from chrome, the bottom half from FF:

ref: http://i51.tinypic.com/2qx0nwn.png

bcammo 03 Jan 2011 01:30

That's weird, here's what I'm seeing in Chrome 8 on Mac.

What version of Chrome are you using?

---

BMC Creative | RoaringApps | @brycecammo

Whane The Whip 03 Jan 2011 01:35

That is weird, maybe it's a mac thing. I'm on a PC and according to chrome I'm "up-to-date" with 8.0.552.224

I only have a few addons for SEO. Maybe one of them is interfering somehow. I'll have to poke around I guess.

bcammo 03 Jan 2011 01:44

I could see it on my PC - it appears to be a problem with -webkit-box-shadow: inset - I'll go fix it now.

---

BMC Creative | RoaringApps | @brycecammo

Whane The Whip 03 Jan 2011 01:51

Ha you sound determined. I just checked on my desktop PC, same thing. Between that and your check I guess that confirms something in the CSS.

bcammo 03 Jan 2011 01:54

…And fixed! In case you're not importing the theme, here's what you'll need to change:

#side-bar input.text {
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

By the way, that nivo slider on your homepage looks great!

---

BMC Creative | RoaringApps | @brycecammo

Whane The Whip 03 Jan 2011 02:02

Yep that was it. Looks perfect, thanks alot for your help.

I really like the Nivo Slider too. I spent the better part of a day looking at options and this seemed like one of the better ones. It also lets you apply a URL to each image

Nivo Slider

RobElliott 03 Jan 2011 09:40

I also use the nivo slider on many sites, often as part of the header, for example at Strathpeffer Golf Club and La Chapelle. It works very well with Wikidot sites.

---

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.