Super Blue
Name: Super Blue
Author: tsangk
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: topbar
Supports top bar menu *: yes
Supports side bar menu *: no
* depends on tags: topbar and sidebar
Description:
Based on bcammo's themes - Super and Blue Heaven.
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/super-blue
Code
@import url(http://themes.wikidot.com/super/code/1); /*** Theme based on bcammo's Super and Blue Heaven (http://bmccreative.com/) Altered by tsangk (Kenneth Tsang) ***/ /*------------------------------------------------------------- GLOBAL ---------------------------------------------------------------*/ p {margin: 7px 0;line-height: 1.46em;} a {color: #2191d1;text-decoration: none;} a.newpage {color: #b30000;} a:hover {color: #222;background-color: transparent;} h1, h2, h3, h4, h5, h6 { color: #222; font-weight: normal; font-family: 'Fontin', Helvetica, Arial, sans-serif; line-height: 1.2em; margin: 16px 0; } h1 {font-size: 200%;} h2 {font-size: 180%; color: #444;} h3 {font-size: 170%;} h4 {font-size: 140%;} h5 {font-size: 120%;} h6 {font-size: 115%;} input[type=text], textarea { margin: 0; padding: 7px 5px; background: #fff; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#fff), color-stop(.2,#fff)); background-image: -moz-linear-gradient(top,#f5f5f5, #fff, #fff 60%); border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); } input[type=text]:focus, textarea:focus { border: 1px solid #3198dd; outline: none; } /*------------------------------------------------------------- LAYOUT ---------------------------------------------------------------*/ html { } body { color: #444; font: 13px/1.3em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */ } #container-wrap { margin: 0 auto; width: 960px; } /*------------------------------------------------------------- HEADER ---------------------------------------------------------------*/ #header { height: 120px; position: relative; } #header h1 { position: relative; top: 25px; text-align: center; } #header h1 a { color: #fff; font-size: 40px; padding: 17px 0 0; letter-spacing: -2px; font-weight: bold; text-shadow: 0 1px 1px #111; -webkit-transition: color 140ms linear; -moz-transition: color 140ms linear; transition: color 140ms linear; } #header h1 a:hover {color: #ccc;} #header h2 { color: #ddd; position: relative; text-align: center; top: 36px; left: 0px; background: none; text-transform: uppercase; font: 11px Arial, Helvetica, sans-serif; } /*----- LOGIN STATUS ------------------------------------------*/ #login-status { color: #ddd; position: absolute; top: 6px; font-size: 90%; background-color: #11404a; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a6374), to(#11404a)); background-image: -moz-linear-gradient(top,#1a6374, #11404a); background-image: -o-linear-gradient(top,#1a6374, #11404a); padding: 10px; border: 1px solid #D2D2CC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/common--theme/base/PIE.htc); -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } #login-status .printuser a { display: none; } a#account-topbutton { background: none; border: none; } #login-status a { padding: 0 3px; color: #ddd; text-decoration: none; } #login-status a:hover {color: #eee;} #account-options { width: 140px; margin-top: 4px; text-align: center; border: none; border-top: 1px solid #fff; background-color: #f3f3f3; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#f3f3f3)); background-image: -moz-linear-gradient(top,#f9f9f9, #f3f3f3); background-image: -o-linear-gradient(top,#f9f9f9, #f3f3f3); -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(/common--theme/base/PIE.htc); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6); box-shadow: 0 1px 4px rgba(0,0,0,0.6); } #account-options a { text-shadow: none; color: #11404a; } /*----- SEARCH TOP BOX -----------------------------------------*/ #search-top-box { position: absolute; right: 0px; top: 78px; height: 30px; width: 240px; text-align: right; display: none; } #search-top-box-form { height: 30px; } #search-top-box input.text { width: 170px; margin: 0; padding: 7px 25px 7px 5px; } #search-top-box input.text.empty { color: #666; font-style: italic; } #search-top-box input.button { position: absolute; top: 2px; right: -5px; border: none; display: block; width: 36px; height: 28px; padding: 0; /* background: transparent url(http://themes.wdfiles.com/local--files/pink-flower/flower-searchButton.png) no-repeat left center; */ color: transparent; text-indent: -9999px; font-size: 0; line-height: 0; opacity: 0.7; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #search-top-box input.button:hover { opacity: 1; } /*----- TOPBAR NAVIGATION ------------------------------------*/ #top-bar { height: 43px; display: block; right: 0; position: absolute; width: 600px; z-index: 2; top: 45px; text-align: center; font-family: 'Fontin'; background-color: #1a6374; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a6374), to(#11404a)); background-image: -moz-linear-gradient(top,#1a6374, #11404a); background-image: -o-linear-gradient(top,#1a6374, #11404a); border: 1px solid #D2D2CC; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(/common--theme/base/PIE.htc); -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } #top-bar ul { float: right; padding: 0; height: 43px; margin: 0; border: none; } #top-bar ul li { display: inline; padding: 0; height: 28px; margin: 0 12px; position: relative; } #top-bar ul li a { display: block; color: #eee; height: 25px; padding: 13px 10px 5px; text-shadow:none; /* text-shadow: 0px 1px 1px #fff;*/ font-size: 18px; font-weight: normal; } #top-bar ul li a.current-link { color: #2191d1; } #top-bar ul li a:hover, #top-bar ul li.sfhover a { background: none; text-decoration: none; color: #cbcbcb; } #top-bar ul li ul { color: #fff; visibility: hidden; opacity: 0; font-size: 1em; top: 40px; left: 4px; line-height: 1.8em; padding: 4px 0; position: absolute; z-index: 100; height: auto; width: auto; border: none; border-top: 1px solid #fff; background-color: #f3f3f3; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#f3f3f3)); background-image: -moz-linear-gradient(top,#f9f9f9, #f3f3f3); background-image: -o-linear-gradient(top,#f9f9f9, #f3f3f3); -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(/common--theme/base/PIE.htc); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6); box-shadow: 0 1px 4px rgba(0,0,0,0.6); -webkit-transition: all 400ms ease-out; -moz-transition: all 400ms ease-out; } #top-bar ul li:hover ul { display: inline-block; opacity: 1; } #top-bar ul li ul li { padding: 0 10px; background: none; border: none; display: inline-block; width: auto; height: auto; left: auto; right: 0; } #top-bar ul li ul li a, #top-bar ul li.sfhover ul li a { background: none; padding: 6px 0; text-transform: none; line-height: 1; height: auto; color: #565656; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { background: none; } #top-bar ul li ul li a:hover { color: #2191d1; } #top-bar ul li ul li ul { display: none !important; } #top-bar { float:left; width:100%; position:relative; } #top-bar > ul { clear:left; float:left; margin:0; position:relative; left:50%; text-align:center; } #top-bar > ul > li { display:block; float:left; margin: 0 10px 0; padding:0; position:relative; right:50%; } #top-bar > ul li a { display:block; margin:0 0 0 1px; } /*------------------------------------------------------------- MAIN CONTENT ---------------------------------------------------------------*/ #content-wrap { position: relative; padding: 20px 30px 5px; margin-top: 0; clear: both; overflow: hidden; background: #fff; border: 1px solid #d2d2cc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(/common--theme/base/PIE.htc); -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } #page-title { border: none; font-size: 30px; font-weight: normal; text-decoration: none; margin: 10px 0 !important; color: #323232; letter-spacing: -1px; padding: 0; } #main-content { float: left; padding: 0; width: 600px; margin: 0; overflow: hidden; } #page-content { width: 600px; margin: 0 auto; } /*----- SIDEBAR -------------------------------------------*/ #side-bar{ float: right; padding: 0; width: 240px; margin: 0; overflow: hidden; } #side-bar a {color: #444;} #side-bar a:hover {color: #2191d1;} #side-bar ul { list-style-type: none; padding: 0 5px 0; } /*----- SIDEBAR ON LEFT -----------------------------------* #page-title {margin-left: 10px;} #side-bar {float: left;} #main-content { float: right; border-right: none; } /*----- NO SIDEBAR ---------------------------------------*/ #side-bar {display: none;} #main-content { width: 100%; } #page-content {width: 100%;} /*----- BREADCRUMBS -------------------------------------------*/ #breadcrumbs { color: #666; padding: 5px 10px; width: 95%; margin: 15px 5px; font-size: 11px; background: #f3f3f3; border: 1px solid #d2d2cc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(/common--theme/base/PIE.htc); -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.15) inset; -moz-box-shadow: 0 0 2px rgba(0,0,0,0.15) inset; box-shadow: 0 0 2px rgba(0,0,0,0.15) inset; } #breadcrumbs a {color: #666;} #breadcrumbs a:hover {color: #2191d1;} /*------------------------------------------------------------- FOOTER ---------------------------------------------------------------*/ #page-options-container {padding-bottom: 5px;} #footer { color: #888; padding: 12px 10px 0; font-size: 0.95em; margin-top: 0; } #footer .options {font-size: 100%;} #footer a, #license-area a { color: #888; text-decoration: none; } #footer a:hover, #license-area a:hover {color: #2191d1;} #license-area { padding: 5px 10px 40px; color: #888; font-size: 0.95em; } /*------------------------------------------------------------- WIKI ELEMENTS ---------------------------------------------------------------*/ #action-area {padding: 0 3px;} #action-area h1 {font-size: 200%;} a.action-area-close:hover {background: none;} .code { background: #f9f9f9; display: block; padding: 10px; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); } blockquote { background: url(http://themes.wdfiles.com/local--files/hello/hello-quote.png) no-repeat 0 0; border: none; color: #555; font-family: Georgia, “Times New Roman”, Times, serif; font-style: italic; min-height: 30px; padding: 0 45px; margin: 0 40px 25px 40px; } #toc { border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(/common--theme/base/PIE.htc); } /*----- INBUILT HOVERTIPS -------------------------------------*/ .hovertip { border: none !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); max-width: 300px; background: none; } .hovertip .content { background-color: #333; background-color: rgba(20,20,20,0.83617); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); padding: 4px 8px; color: #fff; } .hovertip .content .footnote .f-content { margin: 2px; } .hovertip .content .footnote .f-heading, .hovertip .content .footnote .f-footer { display: none !important; } /*----- COMMENTS ----------------------------------------------*/ .comments-box { border-top: 2px solid #eee; margin: 10px 0; } .comments-box h1 { color: #444; font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } .change-textarea-size { padding-right: 50px; } .change-textarea-size a { background: #fff; border: 1px solid #d4d4d4; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; behavior: url(/common--theme/base/PIE.htc); } .change-textarea-size a:hover { background: #eee; } .post-container { background: #f1f1f1; padding: 0 10px; position: relative; margin: 15px 0; border: 1px solid #e0e0e0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/common--theme/base/PIE.htc); } .post-container .post { margin: 0; padding: 5px 0 2px; } .post-container .post.folded .short {background: none;} .post-container .head .info, .post-container .head { margin: 0; background: none !important; border: none; text-transform: none; } .post-container .head .info .printuser a { color: #2191d1; text-transform: none; font-weight: bold; font-size: 16px; } .post-container .head .info .printuser a:hover { background: none; color: #444; } .post-container .head .info .odate { float: right; color: #777; font-size: 12px; } .post-container .head .options{display: none;} .post-container .options { margin: 5px 0 0; padding: 5px 0 0; } .post-container .post .options a { color: #444; padding: 4px 0 0; text-decoration: none; font-size: 12px; } .post-container .post .options a:hover {color: #2191d1;} /*----- 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, .pager .current, div.new-post a, .owindow .button-bar a { height: auto; padding: 6px 10px; font: bold 13px Arial, sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); background-color: f3f3f3; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#f3f3f3)); background-image: -moz-linear-gradient(top,#f9f9f9, #f3f3f3); background-image: -o-linear-gradient(top,#f9f9f9, #f3f3f3); border: 1px solid #d4d4d4; color: #616161; margin: 0 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } 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, div.new-post a:hover, .owindow .button-bar a:hover { color: #515151; border: 1px solid #2191d1; text-decoration: none; cursor: pointer; } .page-rate-widget-box .rate-points, .pager .current { color: #555; padding: 4px 6px; font-size: 1.1em; border: 1px solid #d4d4d4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); } .pager a, .pager a:hover, .pager .current, .page-rate-widget-box a { padding: 3px 8px; } .pager .current { border: 1px solid #2191d1; } /* OWINDOWS ------------------------------------------------------------- */ .odialog-shader,.notify-shader { background-color: #222; filter: alpha(opacity=55); opacity: 0.55 !important; } .owindow,.notify{ background-color: #fff; border: none; padding: 0; color: #454545; font: normal 0.9em "Lucida Grande", Lucida, Verdana, sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(/common--theme/base/PIE.htc); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.874); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.874); box-shadow: 0 1px 4px rgba(0,0,0,0.874); -webkit-background-clip: padding-box; } .owindow .title, .notify-title { font: nornal 1em "Lucida Grande", Lucida, Verdana, sans-serif; padding: 10px; color: #ddd; text-shadow: 0px -1px 1px rgba(0,0,0,0.5); height: 16px; background: #313537 url(http://themes.wdfiles.com/local--files/maple/topbar-bg.png) repeat-x 0 0; border-bottom: 1px solid #2d2d2d; -webkit-background-clip: padding-box; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; behavior: url(/common--theme/base/PIE.htc); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.3); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.3); } .owindow h1,.notify h1 { font: 1.2em "Lucida Grande", Lucida, Verdana, sans-serif; margin: 10px 0; } .owindow .content,.notify-content { padding: 10px; } .owindow .button-bar, .notify-button-bar { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; position: absolute; top: 6px; right: 0; padding: 0; } .owindow .button-bar a, .owindow .button-bar a:active, .notify-button-bar a, .notify-button-bar a:active { background: none; border: none; color: #ddd !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.5); padding: 0; margin: 0 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .owindow .button-bar a:hover, .notify-button-bar a:hover { background: none; color: #fff !important; border: none; text-decoration: none; } /* Clouds... from bcammo's Blue Heaven **/ #header-extra-div-1{ position: absolute; z-index: -1; width: 100%; height: 140px; top: 0px; background: url(http://themes.wikidot.com/local--files/blue-heaven/heaven-header-transparent.png) no-repeat center top; _background: none; /* for IE6 - b/c it doesn't support transparent png */ } .ytlist img{ max-width:140px; } .promo iframe{ height:188px !important; width: 500px !important; } td.videobox div div div{ max-width:400px !important; overflow:hidden; } td.blogbox .error-block { background-image: url(http://ktsang.tk/local--files/2011:_start/2011%20-%20tumblrerrorc.png); width:300px; height:150px; padding:0px; margin:0px; color:transparent; border:0px; font-size:0em; } td.blogbox blockquote{ background: url(http://themes.wdfiles.com/local--files/hello/hello-quote.png) no-repeat 0 0; border: none; color: white; font-family: Georgia, “Times New Roman”, Times, serif; font-style: italic; min-height: 30px; padding: 0 45px; margin: 0 40px 25px 40px; } .content, .blogbox, .videobox{ vertical-align:top; background: #f9f9f9; padding: 5px; padding-top: 1px; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); } .content h1, .blogbox h1, .videobox h1{ color: #eee; font-weight:bold; font-size:130%; position: relative; top: -10px; left: 0px; padding: 5px; margin-bottom: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); background-color: #11404a; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a6374), to(#11404a)); background-image: -moz-linear-gradient(top,#1a6374, #11404a); background-image: -o-linear-gradient(top,#1a6374, #11404a); } /* Home Page ONLY */ .blurb h1, .infobox h1{ color: #eee; font-weight:bold; font-size:130%; position: relative; top: -10px; left: 0px; padding: 5px; margin-bottom: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); background-color: #11404a; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a6374), to(#11404a)); background-image: -moz-linear-gradient(top,#1a6374, #11404a); background-image: -o-linear-gradient(top,#1a6374, #11404a); } .blurb, .infobox{ vertical-align:top; background: #f9f9f9; padding: 5px; padding-top: 1px; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(/common--theme/base/PIE.htc); } .infobox { padding: 10px; margin:10px; vertical-align:top; } .blurb{ max-width:400px; float:right; overflow: hidden;} td.infobox div div div{ color:#000 !important; } td.ytlist div div div table tbody tr td:last-child{ display:none; width:0px !important; margin:0px !important; padding:0px !important; } td.blurb{ width: 100%; max-width: 100%; } .ytlist img{ max-width:140px; }
Notes
Similar themes
|
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
Show Comments