Glass

Click to preview

Name: Glass

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

Tags: black blog blue corporate glass modern topbar

Supports top bar menu *: yes
Supports side bar menu *: no
* 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/glass

Code

+ show the code

/* GLOBAL WIDTH */
 
#header, #top-bar {
    width: 950px;
    margin: 0 auto;
}
 
body {
    background-color: #4fccec;
    font-size: 0.80em;
    color: #000;
}
 
div#container-wrap {
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/bg.png);
    background-repeat: repeat-x;
}
 
/* HEADER */
 
#header {
    height: 170px;
    position: relative;
    width: 950px;
    top: 0px;
    padding-bottom: 30px; /* FOR MENU */
    background: url(http://squark.wdfiles.com/local--files/dev:theme/background.png) no-repeat;
    background-position: bottom;
}
 
#search-top-box {
    position: absolute;
    top: 20px;
    right: 9px;
    width: 250px;
    text-align: right;
    z-index: 9;
}
 
#login-status {
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/login_bg.png);
    position: absolute;
    top: 20px;
    height: 20px;
    width: 935px;
    color: #aaa;
    font-size: 90%;
    z-index: 6;
    margin: 0;
    right: 0;
    top: 10px;
    overflow: visible;
    padding: 5px 0 0 15px;
}
 
#login-status a {
    background: transparent;
    color: #ddd;
}
 
#login-status ul a {
    color: #700;
    background: transparent;
}
 
#account-topbutton {
background-color:#FFFFFF;
border:1px solid #888888;
font-size:80%;
font-weight:bold;
margin-left:5px;
padding:0 5px;
text-decoration:none;
}
 
#account-topbutton {
    background: #ccc;
    color: #700;
}
 
#account-options {
    background-color: black;
    opacity: 0.5;
    color: white;
    opacity: 0.5;
    border:0px;
    display: none;
    padding:0;
    position:absolute;
    text-align: center;
    right:700px;
    width:135px;
    z-index:7;
}
#account-options ul {
    display:block;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin: 0;
    padding:0;
    color: white;
}
 
#account-options li {
    display:block;
    margin:0;
    padding:0;
    width:100%;
    color: white;
 
}
 
#account-options li a {
    -moz-box-sizing:border-box;
    display:block;
    padding:2px 5px;
    width:100%;
    z-index:8;
    color: white;
}
 
#account-options li a:hover {
    color: black;
    background-color: white;
    opacity: 0.5;
}
 
.printuser img.small {
    margin-right: 0.4em;
}
 
#search-top-box form {
    position: absolute;
    top: -5px;
    height: 25px;
    margin: 0;
    background-color: transparent;
    z-index: 9;
    padding: 0;
    left: 120px;
}
 
#search-top-box input.button {
    display: none;
}
 
div.buttons input, input.button, button, file, a.button {
    background-color:#F4F4F4;
    border:1px solid #AAAAAA;
    color:#000000;
    margin:0 2px;
    padding:0 0.5em;
    text-decoration:none;
}
 
input.empty {
    font-size:80%;
    background-color: transparent;
}
 
input.text {
    background-color: transparent;
    border: 1px solid #777777;
    color: black;
}
 
input {
    font-size:80%;
}
 
#header h1 {
    position: absolute;
    padding: 0;
    max-height: 105px;
    opacity: 0.6;
        color: white;
   top: 100px;
    left: 50px;
}
 
#header h2 {
    position: absolute;
    top: 130px;
    left: 50px;
    margin: 0;
    padding: 0;
    clear: left;
    float: left;
    font-size: 105%;
    max-height: 38px;
    opacity: 0.5;
    color: white;
}
 
#header h1 a {
   top: 100px;
    left: 50px;
    line-height: 0px;
    max-height: 0px;
    color: white;
    background: transparent;
    font-size: 180%;
    text-decoration: none;
}
 
#header h2 span {
    color: white;;
    font-weight: bold;
}
 
/* TOP MENU */
 
/*  */
#top-bar {
    position: absolute;
    z-index: 10;
    top: 175px;
    left: 0px;
    height: 25px;
    line-height: 25px;
    font-size: 90%;
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/login_bg.png);
}
 
#top-bar li ul li a {
    background-color: transparent;
    border: 0;
    text-align:left;
    width:10em;
}
 
/*    */
#top-bar ul {
    float: left;
    margin-left: 15px;
    border: 0;
}
 
/*     */
#top-bar a {
    color: #fff;
    background: transparent;
    border: 0;
}
 
/*    */
#top-bar ul li, {
    border: 0;
}
 
/*      */
#top-bar ul li ul {
    vertical-align: bottom;
    border: 0;
}
 
/*        */
#top-bar ul li a {
    text-decoration: none;
    line-height: 23px;
    max-height: 23px;
    overflow: hidden;
    border: 0;
}
 
/*         */
#top-bar ul li.sfhover a {
    border: 0;
}
 
/*            */
#top-bar ul li:hover a {
    background: transparent;
    border: 0;
}
 
/*        */
#top-bar ul li.sfhover ul li a {
    border: 0;
}
 
/*         */
#top-bar ul li:hover ul li a {
    width: 150px;
    line-height: 160%;
    height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}
 
/*              */
#top-bar ul li.sfhover a:hover {
    border: 0;
}
 
#top-bar ul li:hover a:hover {
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/menu_hover.png);
    text-decoration: none;
    border: 0;
}
 
#top-bar ul ul li:hover a:hover  {
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/list_hover.png);
    color: white;
 
}
 
/*                    */
#top-bar ul li ul {
    width: auto;
    background-color: #333333;
    color: white;
 
}
 
/*                  */
#top-bar ul li ul li {
    background-image: none;
 
}
 
/*                */
#top-bar ul li ul li.sfhover {
    background-image: none;
 
}
 
/*                */
#top-bar ul li ul li {
    background-image: none;
 
}
 
/*                */
#top-bar ul li ul li:hover {
    background-image: none;
 
}
 
/*    */
#top-bar ul li ul li a {
 
}
 
/*          */
#top-bar ul li ul a {
 
}
 
/*          */
#top-bar a:hover {
 
}
 
/*             */
 
/* IE7 HACK */ 
#top-bar ul > li > ul {  
    *margin-top: -4px; 
}
 
/* SIDE MENU */
 
#side-bar {
    clear: both;
    padding: 10px;
    margin: 0 0 0 2em;
    width: 15em;
    border: 1px solid #dedede;
}
 
/* CONTENT */
 
#main-content {
    width: 910px;
    background-color: #e4e8ff;
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/content_bg.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    position: relative;
 
}
 
.page-options-bottom {
    height:1%;
    margin: 0px 0;
    text-align:right;
    position: relative;
    z-index:20;
    top: 20px;
}
 
/* FOOTER */
 
/* footer */ 
 
#footer{
    position: relative;
    bottom: 0px;
    z-index: 1;
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/bar_bottom.png);
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    width: 930px;
    height: 75px;
    margin: auto;
}
 
#footer .options {
    float: right;
    font-size: 90%;
    padding: 53px 0;
    margin-right: 10px;
    z-index:1;
    color: white;
 
}
 
#license-area {
    padding: 0 0;
    color: #555;
    text-align: center;
    font-size: 80%;
}
 
/*
#footer {
    font-size: 77%;
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme/bar_bottom.png);
    width: 950px;
    margin-top: 0px;
    background: red;
    color: #bbb;
    margin-top: 15px;
    padding: 3px 10px;
    clear: none;
}
 
#footer .options {
    visibility: visible;
    display: block;
    float: right;
    width: 50%;
    font-size: 100%;
    text-align: right;
 
}
 
#footer a {
    color: #fff;
    background: transparent;
}
*/
 
/* COMMON */
 
#content-wrap {
    margin-top: 0px;
}
 
h1, #page-title {
    color: #000;
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-weight: normal;
}
 
h1 {
    margin-top: 0.7em;
    padding: 0;
    font-weight: bold;
}
 
h2, h3, h4, h5, h6, h7 {
    margin: 0.5em 0 0.4em;
    padding: 0;
    letter-spacing: 1px;
}
 
#page-title {
    border-color: #000;
}
 
ul {
    /*list-style-image: url(/common--theme/shiny/images/bullet.gif);*/
    list-style: square;
}
 
#top-bar ul {
/*    list-style-image: none; /* IE ONLY! IF list-style-image IS SET */
}
 
li, p {
    line-height: 141%;
}
 
a {
    color: #0c88ab;
    text-decoration: none;
}
 
a.newpage {
    color: #0c88ab;
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}
 
/* SOME NICE BOXES */
 
div.sexy-box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 0 10px 12px;
    margin: 7px 4px 12px;
    overflow: hidden;
}
 
div.sexy-box div.image-container img {
    margin: 5px;
    padding: 2px;
    border: 1px solid #999;
}
 
/* YUI TABS */
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
    margin:0 0.5em 0 0; /* horizontal tabs */
}
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
    margin:0 0 0.5em; /* vertical tabs */
}
 
/* default width for side tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav { width:6em; }
 
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
    width:auto;
}
.yui-navset .yui-navset-left,
.yui-navset-left { padding:0 0 0 6em; } /* map to nav width */
.yui-navset-right { padding:0 6em 0 0; } /* ditto */
 
.yui-navset-top,
.yui-navset-bottom {
    padding:auto;
}
/* core */
 
.yui-nav,
.yui-nav li {
    margin:0;
    padding:0;
    list-style:none;
}
.yui-navset li em { font-style:normal; }
 
.yui-navset {
    position:relative; /* contain absolute positioned tabs (left/right) */
    zoom:1;
}
 
.yui-navset .yui-content { zoom:1; }
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li, /* in case nested */
.yui-navset .yui-navset-bottom .yui-nav li {
    display:inline-block;
    display:-moz-inline-stack;
    *display:inline; /* IE */
    vertical-align:bottom; /* safari: for overlap */
    cursor:pointer; /* gecko: due to -moz-inline-stack on anchor */
    zoom:1; /* IE: kill space between horizontal tabs */
}
 
.yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
    display:block;
}
 
.yui-navset .yui-nav a { position:relative; } /* IE: to allow overlap */
 
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
    display:block;
    display:inline-block;
    vertical-align:bottom; /* safari: for overlap */
    zoom:1;
}
 
.yui-navset-left .yui-nav li a,
.yui-navset-right .yui-nav li a {
    display:block;
}
 
.yui-navset-bottom .yui-nav li a {
    vertical-align:text-top; /* for inline overlap (reverse for Opera border bug) */
}
 
.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em { display:block; }
 
/* position left and right oriented tabs */
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-left .yui-nav,
.yui-navset-right .yui-nav {
   position:absolute;
   z-index: 21; 
}
 
.yui-navset-top .yui-nav,
.yui-navset-bottom .yui-nav {
    position:static;
}
.yui-navset .yui-navset-left .yui-nav,
.yui-navset-left .yui-nav { left:0; right:auto; }
 
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav { right:0; left:auto; }
 
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
/* .yui-navset defaults to .yui-navset-top */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */
    border:solid #464646; /* color between tab list and content */
    border-width:0 0 5px;
    Xposition:relative;
    zoom:1;
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 0.16em 0 0; /* space between tabs */
    padding:1px 0 0; /* gecko: make room for overflow */
    zoom:1;
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected { 
    margin:0 0.16em -1px 0; /* for overlap */
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#d8d8d8 url(http://static.wikidot.com/common--javascript/yahooui/assets/sprite.png) repeat-x; /* tab background */
    border:solid #a3a3a3;
    border-width:0 1px;
    color:#000;
    position:relative;
    text-decoration:none;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #a3a3a3;
    border-width:1px 0 0;
    cursor:hand;
    padding:0.25em .75em;
    left:0; right: 0; bottom: 0; /* protect from other orientations */
    top:-1px; /* for 1px rounded corners */
    position:relative;
}
 
.yui-navset .yui-nav .selected a:hover
{
    background: url(http://squark.wdfiles.com/local--files/dev:theme/tab2.png);
}
 
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a
 { /* no hover effect for selected */
    background:#2647a0 url(http://squark.wdfiles.com/local--files/dev:theme/tab.png) repeat-x; /* selected tab background */
    color:#fff;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#bfdaff url(http://static.wikidot.com/common--javascript/yahooui/assets/sprite.png) repeat-x left -1300px; /* selected tab background */
    outline:0;
}
 
.yui-navset .yui-nav .selected a em {
    padding:0.35em 0.75em; /* raise selected tab */
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    border-color:#243356; /* selected tab border color */
}
 
.yui-navset .yui-content {
    background:#f4f5ff; /* content background color */
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    border:1px solid #808080; /* content border */
    border-top-color:#243356; /* different border color */
    padding:0.25em 0.5em; /* content padding */
}
 
/* left and right orientations */
.yui-navset-left .yui-nav,
.yui-navset .yui-navset-left .yui-nav,
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav {
    border-width:0 5px 0 0;
    Xposition:absolute; /* from tabview-core; have to reiterate for skin-sam due to pos:rel on skin-sam yui-nav */
    top:0; bottom:0; /* stretch to fill content height */
}
 
.yui-navset .yui-navset-right .yui-nav,
.yui-navset-right .yui-nav {
    border-width:0 0 0 5px;
}
 
.yui-navset-left .yui-nav li,
.yui-navset .yui-navset-left .yui-nav li,
.yui-navset-right .yui-nav li {
    margin:0 0 0.16em; /* space between tabs */
    padding:0 0 0 1px; /* gecko: make room for overflow */
}
 
.yui-navset-right .yui-nav li {
    padding:0 1px 0 0; /* gecko: make room for overflow */
}
 
.yui-navset-left .yui-nav .selected,
.yui-navset .yui-navset-left .yui-nav .selected { 
    margin:0 -1px 0.16em 0;
}
 
.yui-navset-right .yui-nav .selected { 
    margin:0 0 0.16em -1px;
}
 
.yui-navset-left .yui-nav a,
.yui-navset-right .yui-nav a {
    border-width:1px 0;
}
 
.yui-navset-left .yui-nav a em,
.yui-navset .yui-navset-left .yui-nav a em,
.yui-navset-right .yui-nav a em {
    border-width:0 0 0 1px;
    padding:0.2em .75em;
    top:auto;
    left:-1px; /* for 1px rounded corners */
}
 
.yui-navset-right .yui-nav a em {
    border-width:0 1px 0 0;
    left:auto;
    right:-1px; /* for 1px rounded corners */
}
 
.yui-navset-left .yui-nav a,
.yui-navset-left .yui-nav .selected a,
.yui-navset-left .yui-nav a:hover,
.yui-navset-right .yui-nav a,
.yui-navset-right .yui-nav .selected a,
.yui-navset-right .yui-nav a:hover,
.yui-navset-bottom .yui-nav a,
.yui-navset-bottom .yui-nav .selected a,
.yui-navset-bottom .yui-nav a:hover {
    background-image:none; /* no left-right or bottom-top gradient */
}
 
.yui-navset-left .yui-content {
    border:1px solid #808080; /* content border */
    border-left-color:#243356; /* different border color */
}
 
/* bottom orientation */
.yui-navset-bottom .yui-nav,
.yui-navset .yui-navset-bottom .yui-nav {
    border-width:5px 0 0; /* color between tab list and content */
}
 
.yui-navset .yui-navset-bottom .yui-nav .selected,
.yui-navset-bottom .yui-nav .selected { 
    margin:-1px 0.16em 0 0; /* for overlap */
}
 
.yui-navset .yui-navset-bottom .yui-nav li,
.yui-navset-bottom .yui-nav li { 
    padding:0 0 1px 0; /* gecko: make room for overflow */
    vertical-align:top;
}
 
.yui-navset .yui-navset-bottom .yui-nav li a,
.yui-navset-bottom .yui-nav li a { 
}
 
.yui-navset .yui-navset-bottom .yui-nav a em,
.yui-navset-bottom .yui-nav a em {
    border-width:0 0 1px;
    top:auto;
    bottom:-1px; /* for 1px rounded corners */
}
 
.yui-navset-bottom .yui-content,
.yui-navset .yui-navset-bottom .yui-content {
    border:1px solid #808080; /* content border */
    border-bottom-color:#243356; /* different border color */
}
}

Notes

I'm still working on it. It needs some improvements. Header was created with Fyre, pimped in GIMP. All layout made in GIMP.

Similar themes organic Author: Grego1888 Rating: 0, Comments: 0 Tags: sidebar topbar Semi-Trans v. 1.0 Author: Chaotic1 Rating: 0, Comments: 0 Tags: sidebar topbar transparency

Browse themes by tag articles beige black blog blue brown christmas claus clean colorful company corporate dark dashed edu education f1 floral games glass green grey grunge minimalist modern monobook music nature navy no-sidebar notepad no-topbar orange outline rainbow red reflection santa shiny sidebar simple topbar transparency water white wiki wikipedia windows woodcut yellow

Comments

Suggestion...

James Kanjo 1227666534|%e %b %Y, %H:%M %Z|agohover

Hey Squark, may I make a suggestion?

Change this:

#header h1 {
position: absolute;
    top: 100px;
    left: 50px;
    padding: 0;
    max-height: 105px;
    opacity: 0.6;
        color: white;
}

To this:

#header h1 {
    position: absolute;
    padding: 0;
    max-height: 105px;
    opacity: 0.6;
        color: white;
}
 
#header h1, #header h1 a {
    top: 100px;
    left: 50px;
}

To make the heading display properly in IE6

---

λ James Kanjo | blog | photos | contact

Re: Suggestion...

Squark 1227689211|%e %b %Y, %H:%M %Z|agohover

Thanks for reporting. I changed it as you stated. I didn't even tested this theme on IE.

---

my blog
squarkDesign - grafika komputerowa
rTechnologies - strony www

Problem with top menu?

BlueZero 1234933559|%e %b %Y, %H:%M %Z|agohover

When I use your Glass CSS code with the blank template, the top navigation has gaps where menu items should be. When I scroll over them, they are correctly displayed. I'm not sure if the problem is on my end or with the top menu CSS code since I am very new to CSS.

Re: Problem with top menu?

Oliver Bertram 1237279447|%e %b %Y, %H:%M %Z|agohover

I also have problems with the top-bar. Seems like the transparency doesnt work.
Any help?

Me too

Teh_Crimson_King 1240716292|%e %b %Y, %H:%M %Z|agohover

see title. the only modification I have made is changing the text in the drop-down menu to maroon

Re: Problem with top menu?

sealedscrolls 1242009873|%e %b %Y, %H:%M %Z|agohover

same here, changing the theme to extend it from seems to fix the top bar.. but it mucks up the rest.

—

I take it back, I set the theme to extend it from as 'base' at the bottom of the list and it now displays properly. Sucks being a newbie!

last edited on 1242010021|%e %b %Y, %H:%M %Z|agohover by sealedscrolls + show more

Problem with edit links...

michl 1237741362|%e %b %Y, %H:%M %Z|agohover

The edit (edit, tags, history, etc.) links are not showing up in IE 6.0 but they are in Firefox… big problem, any tips? http://eventidemush.wikidot.com

Side bar

BlueZero 1239209994|%e %b %Y, %H:%M %Z|agohover

Will there be support for the sidebar in the future? I am using the theme with the sidebar (even though I know it is unsupported) and it is hiding behind the webpage if the resolution is too small.

Is there some simple code to lock the sidebar on the left at a certain position that looks good with this theme?

Re: Side bar

BlueZero 1241340581|%e %b %Y, %H:%M %Z|agohover

I found that you can bypass the sidebar formatting in the browser manually by holding control and moving the mouse wheel. This has to be done by users individually so it is by no means a permanent fix. It does make the side bar readable for resolutions less than 1280.

Just passing this information along for other people.

Top Menu

g33kcub 1244555202|%e %b %Y, %H:%M %Z|agohover

When I use the CSS code the top bar menu buttons do not show up in fire fox 3. I can hover over them, but they don't display unless active. Is there something I'm missing.

Top Menu Centering??

Mr Roogle 1247086185|%e %b %Y, %H:%M %Z|agohover

Hi there, i love the look of this theme - great work!! I'm to CSS and i'm not sure how to center the links in the top menu bar.

you can have a look at
www.bomaderryhs.wikidot.com
cheers
Ruben

A great theme

leiger 1247726521|%e %b %Y, %H:%M %Z|agohover

This theme fits exactly what I wanted for my website. Thanks Squark! :)

In Action: http://cyclods.wikidot.com

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!

Suggested correction for .page-options-bottom

leiger 1248407096|%e %b %Y, %H:%M %Z|agohover

At the moment with your theme being used in Firefox 3.5, the page options appear like this when expanded:

To fix this, I changed my CSS to this:

.page-options-bottom {
    height: 1%;
    margin: 0px 0;
    text-align: right;
    position: relative;
    z-index:20;
    top:5px;
}

The only element that has been changed is 'top' — it was originally 20px

Now, it looks like this:

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!

last edited on 1248407133|%e %b %Y, %H:%M %Z|agohover by leiger + show more

Help to make it wider?

HobStarCS 1254373700|%e %b %Y, %H:%M %Z|agohover

Hi, I'm using this theme here: www.hobstarcs.wikidot.com

It looks GREAT but I needed it to be wider as some of my content requires it to be. I have changed the 'content' width to be 85% and modified the background to work with the width BUT I can not get the heading, login bars and footer to fit right.

Any suggestions?

+ Show CSS

@import url(/local--code/calendar:_css);
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#FDF5E6;
}

.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:#F5DEB3;
 color: #000;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#FFEFD5 ;

}

#wiki-tabview-0 .yui-content {
    background-color: #E6E6FA;

}
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;
}

#page-content  p,
#page-content .popup {
    display:inline;
}

.popup{
    position: relative;
    color: #34B;
}

.popup:hover .popupitem {
    display: block;
}

.popupitem{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: auto;
    background: transparent url("/local--files/cssimages/popupindicator.gif") no-repeat top;
    display: none;
    z-index: 1;
}

.popup-container {
    margin-top: 25px;
    border: 2px solid #2F3BAF;
    border-top: none;
    background-color: #FFF;
    padding: 0 5px;
    height: 100%;
}

 ....loading....
1 x 500
Firebug's log limit has been reached. %S entries not shown.        Preferences     
"Reload to activate window console"

Firebug's log limit has been reached. %S entries not shown.        Preferences     
Net panel activated. Any requests while the net panel is inactive are not shown.
-

0KB

(0KB from cache)
0ms
@import "/local--code/calendar:_css";
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FDF5E6 none repeat scroll 0 0;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F5DEB3 none repeat scroll 0 0;
color:#000000;
}
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFEFD5 none repeat scroll 0 0;
}
#wiki-tabview-0 .yui-content {
background-color:#E6E6FA;
}
blockquote {
background-image:url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-right.gif);
background-position:right bottom;
background-repeat:no-repeat;
}
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;
min-height:37px;
padding-top:1em;
}
blockquote p + p {
background-image:none;
padding-top:0;
}
#page-content p, #page-content .popup {
display:inline;
}
.popup {
color:#3344BB;
position:relative;
}
.popup:hover .popupitem {
display:block;
}
.popupitem {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/local--files/cssimages/popupindicator.gif) no-repeat scroll center top;
display:none;
height:auto;
left:0;
position:absolute;
top:0;
width:200px;
z-index:1;
}
.popup-container {
background-color:#FFFFFF;
border-color:-moz-use-text-color #2F3BAF #2F3BAF;
border-style:none solid solid;
border-width:medium 2px 2px;
height:100%;
margin-top:25px;
padding:0 5px;
}
#header, #top-bar {
margin:0 auto;
width:950px;
}
body {
background-color:#4FCCEC;
color:#000000;
font-size:0.8em;
}
div#container-wrap {
background-image:url(http://squark.wdfiles.com/local--files/dev:theme/bg.png);
background-repeat:repeat-x;
}
#header {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://squark.wdfiles.com/local--files/dev:theme/background.png) no-repeat scroll center bottom;
height:170px;
padding-bottom:30px;
position:relative;
top:0;
width:950px;
}
#search-top-box {
position:absolute;
right:9px;
text-align:right;
top:20px;
width:250px;
z-index:9;
}
#login-status {
background-image:url(http://hobstarcs.wikidot.com/local--files/welcome/login_bg.png);
  position: absolute;
    top: 20px;
    height: 20px;
    width: 935px;
    color: #aaa;
    font-size: 90%;
    z-index: 6;
    margin: 0;
    right: 0;
    top: 10px;
    overflow: visible;
    padding: 5px 0 0 15px;
}
#login-status a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
color:#DDDDDD;
}
#login-status ul a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
color:#770000;
}
#account-topbutton {
background-color:#FFFFFF;
border:1px solid #888888;
font-size:80%;
font-weight:bold;
margin-left:5px;
padding:0 5px;
text-decoration:none;
}
#account-topbutton {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
color:#770000;
}
#account-options {
background-color:black;
border:0 none;
color:white;
display:none;
opacity:0.5;
padding:0;
position:absolute;
right:700px;
text-align:center;
width:135px;
z-index:7;
}
#account-options ul {
color:white;
display:block;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#account-options li {
color:white;
display:block;
margin:0;
padding:0;
width:100%;
}
#account-options li a {
-moz-box-sizing:border-box;
color:white;
display:block;
padding:2px 5px;
width:100%;
z-index:8;
}
#account-options li a:hover {
background-color:white;
color:black;
opacity:0.5;
}
.printuser img.small {
margin-right:0.4em;
}
#search-top-box form {
background-color:transparent;
height:25px;
left:120px;
margin:0;
padding:0;
position:absolute;
top:-5px;
z-index:9;
}
#search-top-box input.button {
display:none;
}
div.buttons input, input.button, button, file, a.button {
background-color:#F4F4F4;
border:1px solid #AAAAAA;
color:#000000;
margin:0 2px;
padding:0 0.5em;
text-decoration:none;
}
input.empty {
background-color:transparent;
font-size:80%;
}
input.text {
background-color:transparent;
border:1px solid #777777;
color:black;
}
input {
font-size:80%;
}
#header h1 {
color:white;
left:50px;
max-height:105px;
opacity:0.6;
padding:0;
position:absolute;
top:100px;
}
#header h2 {
clear:left;
color:white;
float:left;
font-size:105%;
left:50px;
margin:0;
max-height:38px;
opacity:0.5;
padding:0;
position:absolute;
top:130px;
}
#header h1 a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
color:white;
font-size:180%;
left:50px;
line-height:0;
max-height:0;
text-decoration:none;
top:100px;
}
#header h2 span {
color:white;
font-weight:bold;
}
#top-bar {
background-image:url(http://squark.wdfiles.com/local--files/dev:theme/login_bg.png);
font-size:90%;
height:25px;
left:0;
line-height:25px;
position:absolute;
top:175px;
z-index:10;
}
#top-bar li ul li a {
background-color:transparent;
border:0 none;
text-align:left;
width:10em;
}
#top-bar ul {
border:0 none;
float:left;
margin-left:15px;
}
#top-bar a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
color:#FFFFFF;
}
#top-bar ul li ul {
border:0 none;
vertical-align:bottom;
}
#top-bar ul li a {
border:0 none;
line-height:23px;
max-height:23px;
overflow:hidden;
text-decoration:none;
}
#top-bar ul li.sfhover a {
border:0 none;
}
#top-bar ul li:hover a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
}
#top-bar ul li.sfhover ul li a {
border:0 none;
}
#top-bar ul li:hover ul li a {
border:0 none;
height:auto;
line-height:160%;
max-height:none;
padding-bottom:0;
padding-top:0;
width:150px;
}
#top-bar ul li.sfhover a:hover {
border:0 none;
}
#top-bar ul li:hover a:hover {
background-image:url(http://squark.wdfiles.com/local--files/dev:theme/menu_hover.png);
border:0 none;
text-decoration:none;
}
#top-bar ul ul li:hover a:hover {
background-image:url(http://squark.wdfiles.com/local--files/dev:theme/list_hover.png);
color:white;
}
#top-bar ul li ul {
background-color:#333333;
color:white;
width:auto;
}
#top-bar ul li ul li {
background-image:none;
}
#top-bar ul li ul li.sfhover {
background-image:none;
}
#top-bar ul li ul li {
background-image:none;
}
#top-bar ul li ul li:hover {
background-image:none;
}
#top-bar ul li ul li a {
}
#top-bar ul li ul a {
}
#top-bar a:hover {
}
#top-bar ul > li > ul {
}
#side-bar {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
input, textarea {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
}
#main-content {
background-color:#E4E8FF;
background-image:url(http://hobstarcs.wikidot.com/local--files/welcome/content_bg.png);
background-repeat:repeat-x;
margin:0 auto;
padding:20px 20px 0;
position:relative;
width:85%;
}
.page-options-bottom {
height:1%;
margin:0 0;
position:relative;
text-align:right;
top:20px;
z-index:20;
}
#footer {
background-image:url(http://squark.wdfiles.com/local--files/dev:theme/bar_bottom.png);
bottom:0;
height:75px;
margin:auto;
padding:0 10px;
position:relative;
width:930px;
z-index:1;
}
#footer .options {
color:white;
float:right;
font-size:90%;
margin-right:10px;
padding:53px 0;
z-index:1;
}
#license-area {
color:#555555;
font-size:80%;
padding:0;
text-align:center;
}
#content-wrap {
margin-top:0;
}
h1, #page-title {
color:#000000;
font-weight:normal;
margin:0 0 0.6em;
padding:0 0 0.25em;
}
h1 {
font-weight:bold;
margin-top:0.7em;
padding:0;
}
h2, h3, h4, h5, h6, h7 {
letter-spacing:1px;
margin:0.5em 0 0.4em;
padding:0;
}
#page-title {
border-color:#000000;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:square;
}
#top-bar ul {
}
li, p {
line-height:141%;
}
a {
color:#0C88AB;
text-decoration:none;
}
a.newpage {
color:#0C88AB;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
div.sexy-box {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#EEEEEE none repeat scroll 0 0;
border:1px solid #CCCCCC;
margin:7px 4px 12px;
overflow:hidden;
padding:0 10px 12px;
}
div.sexy-box div.image-container img {
border:1px solid #999999;
margin:5px;
padding:2px;
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li, .yui-navset .yui-navset-bottom .yui-nav li {
margin:0 0.5em 0 0;
}
.yui-navset-left .yui-nav li, .yui-navset-right .yui-nav li {
margin:0 0 0.5em;
}
.yui-navset .yui-navset-left .yui-nav, .yui-navset .yui-navset-right .yui-nav, .yui-navset-left .yui-nav, .yui-navset-right .yui-nav {
width:6em;
}
.yui-navset-top .yui-nav, .yui-navset-bottom .yui-nav {
width:auto;
}
.yui-navset .yui-navset-left, .yui-navset-left {
padding:0 0 0 6em;
}
.yui-navset-right {
padding:0 6em 0 0;
}
.yui-navset-top, .yui-navset-bottom {
}
.yui-nav, .yui-nav li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.yui-navset li em {
font-style:normal;
}
.yui-navset {
position:relative;
}
.yui-navset .yui-content {
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li, .yui-navset .yui-navset-bottom .yui-nav li {
cursor:pointer;
display:-moz-inline-stack;
vertical-align:bottom;
}
.yui-navset-left .yui-nav li, .yui-navset-right .yui-nav li {
display:block;
}
.yui-navset .yui-nav a {
position:relative;
}
.yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a {
display:inline-block;
vertical-align:bottom;
}
.yui-navset-left .yui-nav li a, .yui-navset-right .yui-nav li a {
display:block;
}
.yui-navset-bottom .yui-nav li a {
vertical-align:text-top;
}
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
display:block;
}
.yui-navset .yui-navset-left .yui-nav, .yui-navset .yui-navset-right .yui-nav, .yui-navset-left .yui-nav, .yui-navset-right .yui-nav {
position:absolute;
z-index:21;
}
.yui-navset-top .yui-nav, .yui-navset-bottom .yui-nav {
position:static;
}
.yui-navset .yui-navset-left .yui-nav, .yui-navset-left .yui-nav {
left:0;
right:auto;
}
.yui-navset .yui-navset-right .yui-nav, .yui-navset-right .yui-nav {
left:auto;
right:0;
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
border-color:#464646;
border-style:solid;
border-width:0 0 5px;
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
margin:0 0.16em 0 0;
padding:1px 0 0;
}
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
margin:0 0.16em -1px 0;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#D8D8D8 url(http://static.wikidot.com/v--0f98f0a29bc6/common--javascript/yahooui/assets/sprite.png) repeat-x scroll 0 0;
border-color:#A3A3A3;
border-style:solid;
border-width:0 1px;
color:#000000;
position:relative;
text-decoration:none;
}
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
border-color:#A3A3A3;
border-style:solid;
border-width:1px 0 0;
bottom:0;
left:0;
padding:0.25em 0.75em;
position:relative;
right:0;
top:-1px;
}
.yui-navset .yui-nav .selected a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://squark.wdfiles.com/local--files/dev:theme/tab2.png) repeat scroll 0 0;
}
.yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#2647A0 url(http://squark.wdfiles.com/local--files/dev:theme/tab.png) repeat-x scroll 0 0;
color:#FFFFFF;
}
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#BFDAFF url(http://static.wikidot.com/v--0f98f0a29bc6/common--javascript/yahooui/assets/sprite.png) repeat-x scroll left -1300px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
}
.yui-navset .yui-nav .selected a em {
padding:0.35em 0.75em;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
border-color:#243356;
}
.yui-navset .yui-content {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F4F5FF none repeat scroll 0 0;
}
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
border-color:#243356 #808080 #808080;
border-style:solid;
border-width:1px;
padding:0.25em 0.5em;
}
.yui-navset-left .yui-nav, .yui-navset .yui-navset-left .yui-nav, .yui-navset .yui-navset-right .yui-nav, .yui-navset-right .yui-nav {
border-width:0 5px 0 0;
bottom:0;
top:0;
}
.yui-navset .yui-navset-right .yui-nav, .yui-navset-right .yui-nav {
border-width:0 0 0 5px;
}
.yui-navset-left .yui-nav li, .yui-navset .yui-navset-left .yui-nav li, .yui-navset-right .yui-nav li {
margin:0 0 0.16em;
padding:0 0 0 1px;
}
.yui-navset-right .yui-nav li {
padding:0 1px 0 0;
}
.yui-navset-left .yui-nav .selected, .yui-navset .yui-navset-left .yui-nav .selected {
margin:0 -1px 0.16em 0;
}
.yui-navset-right .yui-nav .selected {
margin:0 0 0.16em -1px;
}
.yui-navset-left .yui-nav a, .yui-navset-right .yui-nav a {
border-width:1px 0;
}
.yui-navset-left .yui-nav a em, .yui-navset .yui-navset-left .yui-nav a em, .yui-navset-right .yui-nav a em {
border-width:0 0 0 1px;
left:-1px;
padding:0.2em 0.75em;
top:auto;
}
.yui-navset-right .yui-nav a em {
border-width:0 1px 0 0;
left:auto;
right:-1px;
}
.yui-navset-left .yui-nav a, .yui-navset-left .yui-nav .selected a, .yui-navset-left .yui-nav a:hover, .yui-navset-right .yui-nav a, .yui-navset-right .yui-nav .selected a, .yui-navset-right .yui-nav a:hover, .yui-navset-bottom .yui-nav a, .yui-navset-bottom .yui-nav .selected a, .yui-navset-bottom .yui-nav a:hover {
background-image:none;
}
.yui-navset-left .yui-content {
border-color:#808080 #808080 #808080 #243356;
border-style:solid;
border-width:1px;
}
.yui-navset-bottom .yui-nav, .yui-navset .yui-navset-bottom .yui-nav {
border-width:5px 0 0;
}
.yui-navset .yui-navset-bottom .yui-nav .selected, .yui-navset-bottom .yui-nav .selected {
margin:-1px 0.16em 0 0;
}
.yui-navset .yui-navset-bottom .yui-nav li, .yui-navset-bottom .yui-nav li {
padding:0 0 1px;
vertical-align:top;
}
.yui-navset .yui-navset-bottom .yui-nav li a, .yui-navset-bottom .yui-nav li a {
}
.yui-navset .yui-navset-bottom .yui-nav a em, .yui-navset-bottom .yui-nav a em {
border-width:0 0 1px;
bottom:-1px;
top:auto;
}
.yui-navset-bottom .yui-content, .yui-navset .yui-navset-bottom .yui-content {
border-color:#808080 #808080 #243356;
border-style:solid;
border-width:1px;
}

last edited on 1254383876|%e %b %Y, %H:%M %Z|agohover by HobStarCS + show more