Deep Blue

Click to preview

Name: Deep Blue

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

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

Description:

Deep Blue is a variation of Green Fresh, in many colors and with several variations. The default variation is for blogs and works on all screen widths from 1024 pixels and up. It's iPhone compatible and fixed to 950px wide so that your layouts are predictable. The wide variation is ideal when you need all the screen space you can get for your project. It grabs 90% of the screen width, up to 1200 pixels wide.

Features:

• iPhone compatible
• Fixed to 950px wide so that your layouts are predictable
• Includes wide variation that uses 90% of screen width
• 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/deep-blue

Code

+ show the code

/*
    Deep Blue fixed-width variation
    Produced by the Wikidot Rainbow Theme Factory
    by Pieter Hintjens
 
    Color chart:
    * Primary: #0018aa
    * Hilite: #0225fa
    * Header: #3344aa
*/
 
/*
Rainbow Theme Set by Pieter Hintjens,
based on a design by Gabrys
using elements by James Kanjo
and by Steven Heynderickx
and with help from many others.
(c) the Authors cc-by-sa
 
Changelog:
 
* 2009-10-31 - added table formatting for PageManager module
* 2009-10-27 - added classes for tab views, by Steven Heynderickx
* 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 - removed underline on links, now appears on a:hover instead
* 2009-09-09 - moved search box out of nav:side to make it less cluttered
* 2009-09-06 - buttons have a more elegant shaded look (from Wikidot www theme)
* 2009-09-01 - rainbow-base CSS is included into each rainbow theme to reduce include levels
* 2009-08-30 - a.newpage no longer shows white-on-dark but hilite-on-white
* 2009-08-21 - use http://snippets.wikidot.com/code:quotes-in-blockquotes
* 2009-08-21 - use primary color for links (instead of blue)
* 2009-08-21 - removed lowercase transform on page title
* 2009-08-21 - created, as base theme for all Rainbow themes
*/
 
html,body {
    min-height: 101%;
}
 
a {
    text-decoration: none;
}
 
a:hover {
    background-color: transparent;
    text-decoration: underline;
}
 
#container-wrap {
    background: url(/local--files/green-fresh/body-bg.png) repeat-x top;
}
 
/*  Use 950 pixels width for normal screens, 100% for iPhones */
#container {
    width: 950px;
    margin: 0 auto;
    padding-left: 8px;
    background: url(/local--files/green-fresh/shadow-left.png) no-repeat 0 89px;
    position: relative;
}
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}
 
#header {
    height: 118px;
    padding-right: 8px;
    background: url(/local--files/green-fresh/shadow-right.png) no-repeat right 89px;
}
 
#header h1 {
    float: left;
    padding: 43px 0 0 16px;
}
 
#header h1 span {
    padding-right: 7px;
}
 
#header h1 a {
    font-family: "Bitstream Charter", "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 26px;
}
 
#header h2 {
    padding: 49px 7px 0;
    font-family: "Verdana", Arial, Helvetica, sans;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
 
#header h2:before {
    content: "|";
}
 
#header h2 span {
    padding-left: 7px;
    font-size: 10px;
    text-transform: uppercase;
    color: #777;
}
 
#top-bar {
    width: 100%;
    height: 29px;
    right: 0;
    left: 0;
}
 
#top-bar li, #top-bar ul {
    margin: 0;
    padding: 0;
}
 
#top-bar ul {
    margin-right: 8px;
    height: 29px;
}
 
#top-bar ul ul {
    margin-right: 0;
}
 
#top-bar li a {
    border-right: 1px solid #fff;
    color: #fff;
    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;
}
 
#top-bar li ul li a {
    width: 18em;
    color: #fff;
}
 
#top-bar li ul li a:hover {
    color: #000;
}
 
#content-wrap {
    padding-right: 8px;
    background: url(/local--files/green-fresh/shadow-right.png) no-repeat right -29px;
    overflow: hidden;
}
 
#side-bar {
    border-left:1px dashed #DDDDDD;
    float:right;
    margin-top:10px;
    overflow:hidden;
    padding:0 15px 0;
    width:200px;
}
 
#main-content {
    margin: 20px 0 20px 0;
    padding: 0 15px;
    min-height: 150px;
    overflow: hidden;
}
 
h1, h2, h3, #page-title {
    padding: 0;
    margin: 15px 0;
}
 
#page-content > *:first-child {
    margin-top: 0;
}
 
#page-title {
    padding-bottom: 2px;
    border-bottom: 1px solid #eee;
    margin-top: 0;
    font-size: 180%;
}
 
#login-status {
    right: 8px;
    top: 8px;
}
 
#top-bar li a:hover {
    background: white;
}
 
#search-top-box {
    right:-53px;
    top:50px;
}
 
#search-top-box .button {
    visibility: hidden;
}
 
#search-top-box input.empty {
    background-color:#EEEEEE;
    color:#999999;
}
#search-top-box .text {
    padding:2px 2px 2px 5px;
    width:220px;
}
 
#login-status a {
    text-decoration: none;
}
 
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    color: #fff;
}
 
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    color: #000;
}
 
div.buttons input, input.button, button, file, a.button {
    background: #F4F4F4 url(http://themes.wikidot.com/local--files/rainbow-base/button_2.png) repeat-x;
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
}
 
div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    background-color: #DDD;
    background-position: 0 -26px;
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #000;
    height: 26px;
}
 
div.page-calendar-box {
    padding: 0;
}
 
/* Quotes in Blockquotes by James Kanjo */
/* http://snippets.wikidot.com/code:quotes-in-blockquotes */
 
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: 1em 60px 0;
    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;
}
 
/*  Pop-up hover text over images or links, based on James Kanjo's design, improved & simplified by Pieter Hintjens */
/*  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;
}
body {
    background: #fff url(http://themes.wdfiles.com/local--files/deep-blue/footer-bg.png) repeat-x bottom;
}
 
a {
    color: #0018aa;
}
 
a:hover {
    color: #0018aa;
}
 
a.newpage {
    color: #0225fa;
}
 
h1, h2, h3, #page-title {
    color: #0018aa;
}
 
#header h1 a {
    color: #3344aa;
}
 
#top-bar ul {
    background: url(http://themes.wdfiles.com/local--files/deep-blue/menu-bg.png) repeat-x top;
}
 
#top-bar li a:hover {
    background: url(http://themes.wdfiles.com/local--files/deep-blue/menu-hover.png);
}
 
#top-bar li ul li a {
    background: #0018aa;
}
 
#top-bar li ul li a:hover {
    background: #0225fa;
}
 
#login-status a {
    color: #0018aa;
}
 
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    background: #0018aa;
}
 
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    background: #0225fa;
}
 
input.text, textarea {
    border-color: #0018aa;
}
 
.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 #0018aa; /* 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:#3344aa url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    border-top:solid #0018aa 1px;
    border-left:solid #0018aa 1px;
    border-right:solid #0018aa 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:#0225fa
}
/* 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:#0018aa url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    color:#fff;border:1px solid #0018aa;
}

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.

Get news and discuss

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

Wide variation

• 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/deep-blue/3

Click to preview

+ show wide variation code

@import url(http://themes.wdfiles.com/local--code/deep-blue);
 
#container {
    width: 90%;
    max-width: 1200px;
}

Variations on this theme

• Late Harvest - View - Edit
• Orange Juice - View - Edit
• Cherry Red - View - Edit
• Pretty Pink - View - Edit
• Royal Purple - View - Edit
• Deep Blue - View - Edit
• Sky Blue - View - Edit
• Tropical Seas - View - Edit
• Green Grass - View - Edit
• Midnight Coal - View - Edit
• Silent Silver - View - Edit
• Pale Snow - View - Edit

Similar themes neon Author: minako Rating: 2, Comments: 2 Tags: sidebar topbar CAS 2 Author: rhombus p Rating: 3, Comments: 3 Tags: and blog blue clean sidebar simple topbar

Browse themes by tag artimonier beige 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 light minimalist modern monobook nature no-sidebar no-topbar orange outline paper pink professional rainbow red series sidebar simple topbar white wide wiki yellow

Comments

why make life difficult?

meagain 21 Aug 2009 18:24

body
{ background: #fff url(http://themes.wdfiles.com/local--files/silent-silver/footer-bg.png) repeat-x bottom;}

#top-bar ul
 {background: url(http://themes.wdfiles.com/local--files/silent-silver/menu-bg.png) repeat-x top;}

#top-bar li a:hover 
{    background: url(http://themes.wdfiles.com/local--files/silent-silver/menu-hover.png);}

#header h1 a ,#top-bar li ul li a,h1, h2, h3, #page-title,#login-status a,
div.buttons input, input.button, #login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a ,input.text, textarea
 {color: #7a7a7a;}

#top-bar li ul li a:hover,div.buttons input:hover, input.button:hover, #login-status #account-topbutton:hover, .change-textarea-size a:hover
 { background: #b4b4b4;}

Re: why make life difficult?

pieterh 23 Aug 2009 10:47

A cryptic title followed by a dump of a bunch of CSS without explanation does not transmit sufficient information to be of use.

Is this spam?

---

Portfolio

could be....

Phil Chett 23 Aug 2009 18:31

or it could be a way of showing you that instead of making 12 color change edits,you can use 2.

---

.Goal NHGC

how to extend an external theme?

scottplan 08 Nov 2009 06:28

I'd like to tweak this theme a little, but from the changelog I see it's a work in progress. I'd like my pages to benefit from future updates, so there's value in pulling from deep blue's URL, instead of simply grabbing its static CSS and updating it.

Can we customize starting from external themes, the same way we extend base themes?

pieterh 08 Nov 2009 10:45

Yes, you can easily customize from an external theme. Check the source of http://projects.wikidot.com/admin:themes for an example.

---

Portfolio

scottplan 09 Nov 2009 14:24

I love easy. Thanks Pieter!

iPhone view, without the iPhone?

scottplan 22 Dec 2009 13:59

• iPhone compatible

It takes me awhile to realize this stuff, but our neighborhood has a growing population of mobile web users. Thing is, I'm decidedly not one of them.

Is there a way to see what iPhone and other mobile web users are seeing, without getting or borrowing more gadgets? Something like a CSS portal into someone else's operating system.

I suppose this question could be further generalized — an Opera view from within a Firefox browser, etc. Sounds like a web-designer's holy grail.

Ed Johnson 24 Jan 2010 03:38

Sorry I haven't poked around here lately. There's a few sites that you can use to see how your site looks in various browsers, but not many for mobile browsers. Check these out.

https://browserlab.adobe.com/index.html#
http://browsershots.org/
http://ready.mobi

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

suggested rainbow update -- cleaner, softer top-bar drop-down

scottplan 25 Apr 2010 12:49

I've tweaked rainbow in a variety of ways — mostly via a method that allows for consistent updates to any rainbow theme I apply. But this one requires a unique update to each theme. I think it looks and works better. Would you consider applying it to this theme, and its corollary to each of the other rainbows?

For the other themes, we'd simply need to detect the color of the bottom pixels of each menu-hover.png

#top-bar a:hover {
    background:url("http://themes.wdfiles.com/local--files/deep-blue/menu-hover.png") repeat scroll 0 0 transparent;
}
 
#top-bar li {
    background:url("http://themes.wdfiles.com/local--files/deep-blue/menu-bg.png") repeat-x scroll center top transparent;
}
 
#top-bar li:hover {
    background:url("http://themes.wdfiles.com/local--files/deep-blue/menu-hover.png") repeat scroll 0 0 transparent;
}
 
#top-bar li ul li a {
    background-color: #2739A9;
}