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

page 1 of 212next »

Suggestion...

GoVegan 26 Nov 2008 02:28

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

Re: Suggestion...

Squark 26 Nov 2008 08:46

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

Problem with top menu?

BlueZero 18 Feb 2009 05:05

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.

---

Video Gamer Blog

Re: Problem with top menu?

Oliver Bertram 17 Mar 2009 08:44

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

Me too

Teh_Crimson_King 26 Apr 2009 03:24

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 11 May 2009 02:44

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 11 May 2009 02:47 by sealedscrolls Show more

Problem with edit links...

michl 22 Mar 2009 17:02

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 08 Apr 2009 16:59

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?

---

Video Gamer Blog

Re: Side bar

BlueZero 03 May 2009 08:49

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.

---

Video Gamer Blog

Top Menu

g33kcub 09 Jun 2009 13:46

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 08 Jul 2009 20:49

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 16 Jul 2009 06:42

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

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

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Suggested correction for .page-options-bottom

leiger 24 Jul 2009 03:44

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:

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)

Last edited on 24 Jul 2009 03:45 by leiger Show more

Help to make it wider?

HobStarCS 01 Oct 2009 05:08

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 01 Oct 2009 07:57 by HobStarCS Show more

Can someone tell me if it's possible to have the site NOT display the site name in text?

Lara Raider 05 Mar 2010 23:05

I would love for there to be a way to set my wiki so that it doesn't use the 'text display' for the site name. I have a banner I've created with a very nice graphic that says the site name fine and would like to use that instead of the 'textover' site name that the wiki defaults to.

I'm not sure how to completely remove the site name from the display, however.

Any help?

---

page 1 of 212next »