Underwater

Click to preview

Name: Underwater

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

Tags: blog corporate dark deep modern sidebar topbar under water

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

Description:

Version: 1.0
Not tested and not supported for IE, only Firefox 3.0+

Feel free to make changes and upload as newer versions.

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/underwater

Code

+ show the code

 @import url(/common--theme/base/css/text_highlighter.css);
 @import url(/common--theme/base/css/autocomplete.css);
 @import url(/common--theme/base/css/forum.css);
 @import url(/common--theme/base/css/editor.css);
 @import url(/common--theme/base/css/odialog.css);
 
 body{
     margin: 0px;
 }
 
 #container {
    margin: 0 auto;
     padding: 0;
    width: 960px;
 }
 
 /* header */
 #header {
     position: relative;
     z-index: 30;
    height: 170px;
 }
 
 #header h2{
     margin: 0;
     padding: 0;
    position: absolute;
    left: 50px;
    top: 110px;
 }
 
 #content-wrap {
     _height: 1%;
     min-height: 1px;
    padding: 10px 0px 1px 0px;
 }
 
 /* side-bar */
 
 #side-bar{
    float: left;
    width: 200px;
    padding: 10px;
    margin: 0px 10px;
    clear: left;
}
 
 #page-title{
     margin: 0 0 0.5em 0;
    padding-top: 0em; /* Firefox bug? */
     font-size: 200%;
     border-bottom: 1px solid #666;
 }
 
 #main-content{
    margin: 0px 10px 10px 240px;
    padding: 10px 10px;
 }
 
 /* * html #main-content {height: 1%;} */
 
 #license-area {
     padding: 0.5em 0;
     color: #555;
}
 #account-options li{
     display: block;
     margin: 0; padding: 0;
    width: 100%;
 }
#account-options li a {
     display: block;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding: 2px 5px;
     z-index: 40;
    width: 100%;
 }
 
#account-options li a:hover {
     color: black;
 }
#account-topbutton {
     font-size: 80%;
     font-weight: bold;
     padding: 0 5px;
 }
 #top-bar{
     position: absolute;
    left: 240px;
     bottom: 0px;
     z-index:0;
    width: 720px;
}
 
 #top-bar li {
     list-style: none;
     float:left;
     margin: 0 5px;
    padding:0;    
    height: 22px;
 }
 #top-bar li ul{
     padding: 0;
     text-align: center;
     display: block;
     margin: 0;
    padding: 0.3em 1em;
     text-decoration: none;
 }
 #top-bar a:hover {
     border-bottom-color:#243356; /* different border color */
 }
 
/* Images used on Creative Commons licence: Copyright user: bradm81, opendesigns.org */
 
/* Site background image */
 
body {
    background-image: url(http://themes.wdfiles.com/local--files/underwater/bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #002C2C;
    color: white;
 
}
 
/* Background color of all content of the page below header */
#content-wrap {
    background-color: ;
    background-repeat: repeat-x;
    background-position: top center;
    background-color: ;
    border: 0px solid black;
    padding-top: 0px;
}
 
/* Color of page content */
#main-content {
    background-color: #0A3838;
    background-image: url(http://themes.wdfiles.com/local--files/underwater/mainbg.jpg);
    background-repeat: no-repeat;
    color: white;
    margin-top: 0px;
    margin: 0px 240px 10px -11px;
    border: 1px solid #1A7474; 
}
 
#header {
    width: 940px;
    margin: 0 auto;
    height: 170px;
}
 
#header h1 {
    position: absolute;
    left: 20px;
    top: 53px;
}
 
#header h1 a {
    color: #5eb0db;
    font-size: 40px;
    font-weight: bold;
    font-stretch: expanded;
    text-decoration: none;
}
 
#header h1 a:hover {
    color: #99c0d5;
    background-color: transparent;
    text-decoration: none;
}
 
#header h2 {
    color: #cde7f4;
}
 
/* 1st MENU ELEMENT */
 
/* Background color */
 
#top-bar {
    bottom: 7px;
    left: 0px;
    position: absolute;
    width: 900px;
}
 
#top-bar li {
    background-color: transparent;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
}
 
/* Font color and decoration */
#top-bar li a {
    color: white;
    text-decoration: none;
}
 
/* Background color on hover */
#top-bar a:hover{
    background-color: transparent; 
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
}
 
/* Font color on hover*/
#top-bar li a:hover {
    color: white;
    text-decoration: underline;
}
/* ---------------------------------- */
 
/* 2nd MENU ELEMENT */
#top-bar ul li ul {
    background-color: black;
    opacity: 0.5;
    border: 0px;
}
 
#top-bar ul li ul a {
    background-color: black;
    -moz-border-radius: 0px;
}
 
#top-bar ul li ul a:hover {
    background-color: white; 
    color: black;
    -moz-border-radius: 0px;
}
 
/* ---------------------------------- */
 
/* color of side-bar*/
#side-bar {
    background-image: url(http://themes.wdfiles.com/local--files/underwater/rightbg.jpg);
    background-repeat: no-repeat;
    margin-top: 0px;
    border-bottom:1px solid #234848;
border-right:1px solid #234848;
border-top:1px solid #234848;
    float:right;
    width: 180px;
}
 
/*  FONTS   */
 
/* General font family and color*/
body {
    font-family: Verdana, Arial, Helvetica;
    color: ;
}
 
/* Font family of headers */
h1,h2,h3,h4,h5,h6{
    font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
}
 
/* Sizes, weight and text-decorations of headers */
h1{
    font-size: 190%;
    font-weight: normal;
    text-decoration: none;
}
h2{
    font-weight: normal;
    font-size: 150%;
    text-decoration: none;
}
h3{
    font-weight: normal;
    font-size: 130%;
    text-decoration: none;
}
h4{
    font-weight: bold;
    font-size: 120%;
    text-decoration: none;
}
h5 {
    font-weight: bold;
    font-size: 100%;
    text-decoration: none;
}
h6 {
    font-weight: bold;
    font-size: 90%;
    text-decoration: none;
}
 
a {
    color:  #5eb0db;
}
 
a:hover {
    color: #cde7f4;
}
 
a:visited {
    color:  #5eb0db;
}
 
a.newpage {
    color:  #5eb0db;
}
 
a.newpage:hover {
    color: #cde7f4;
    text-decoration: underline;
}
 
/* Font, size, color and border of page title */
#page-title {
    font-family: Verdana, Arial, Helvetica;
    border-bottom: 1px solid #666666;
    font-size: 200%;
    margin: 0pt 0pt 0.5em;
    padding-top: 0em;
}
 
#footer {
    color: gray;
    opacity: 0.8;
    border-bottom:1px solid #888;
    border-top:1px solid #888;
}
 
#footer a {
    color: gray;
    text-decoration: none;
}
 
#license-area {
    color: gray;
}
 
#license-area a {
    color: gray;
    text-decoration: none;
}
 
#license-area a:hover {
    color: gray;
    text-decoration: underline;
    background-color: transparent;
}
 
#login-status {
    color: white;
}
 
blockquote {
background-color: transparent;
}

Notes

Similar themes Basalt Theme Author: Iopk123451 Rating: 1, Comments: 0 Tags: css3 sidebar topbar Sigma9(Only Search Bottom) Author: Iopk123451 Rating: 0, Comments: 0 Tags: modern 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

a:hover color error

RobElliott 07 Aug 2009 07:10

The sidebar and page options links (and possibly others) are a very light colour on a white background and it's impossible to see the text when you hover over a link. a:hover { color: darkblue; } would fix that.

Rob

---

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

(account deleted) 27 Nov 2010 19:53

I'm helping another user set up a couple of sites and she wants to use this theme. I found a few other foreground/background colors that were difficult or impossible to read. Along with Rob's suggestion, here's the changes I made if anyone else is interested:

a:hover {
    color: #002C2C;
}
#top-bar ul li ul {
    background-color: black;
    filter: alpha(opacity=85);
    opacity: 0.85;
    border: 0px;
}
tbody tr, tbody td{
    color: #002C2C;
}
.hovertip{
    background-color: #002C2C;
}

If I find anything else, I'll post updates here.

BTW, I find it easiest to modify this theme by copying Squark's original code to css code block on a page on my site (like css:underwater-theme) and then use this for my external link: /css:underwater-theme/code/1

-Ed

---

Community Admin

More color errors

Vorziblix 18 Jan 2012 04:43

Other problems are the background colors of tables of content, tabbed content, forum description tables, and code blocks, which also appear unreadable, but can similarly be fixed:

.yui-navset .yui-content {
    background-color: #002C2C;
}
 
.code { 
    border: 1px dashed #DDD;
    background-color: #002C2C;
    font-family: 'Andale Mono', 'Courier New', Courier, monospace;
    padding: 0 1em;
    margin: 0.4em 0;
    overflow: auto;
}
 
#toc{
    margin: 1em auto 1em 0;
    padding: 0em 0.5em;
    border: 1px dashed gray;
    background-color: #002C2C;
    display: table;
}
 
.forum-category-box  .description-block{
        background-color: #002C2C; 
}

Image captions and some forum text also prove problematic, as they are dark text on dark, but I haven't yet found the relevant sections.

Re: More color errors

Vorziblix 18 Jan 2012 05:39

To fix image captions, use the following:

.image-box-heading{
    color: #FFFFFF;
}
 
.image-box-caption{
    color: #FFFFFF;
}
 
.image-box-alt{
    color: #FFFFFF;
}

[[/code]]