Floral

Click to preview

Name: Floral

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

Tags: beige blog brown claret crimson floral nature no-sidebar topbar

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

Description:

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

Feel free to make changes and upload as newer versions.

Nice, floral, beige and brown. Corrected layout when the page is almost empty. Non-tested with advanced elements on the page.

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

Code

+ show the code

/* GLOBAL WIDTH */
 
#header {
    width: 1377px;
    margin: 0 auto;
}
 
#top-bar {
    width: 240px;    
    margin: 0 auto;
}
 
body {
    background-color: black;
    font-size: 0.80em;
    color: #000;
 
}
 
div#container-wrap {
    background: url(http://squark.wdfiles.com/local--files/dev:theme2/bg.gif);
    background-repeat: no-repeat;
    background-position: top center;
}
 
/* HEADER */
 
#header {
    height: 267px;
    position: relative;
    width: 801px;
    top: 0px;
    background: url() no-repeat;
    background-position: top;
    overflow: visible;
}
 
#search-top-box {
    position: absolute;
    top: 20px;
    right: 9px;
    width: 250px;
    text-align: right;
    z-index: 9;
}
 
#login-status {
    background-image: url();
    position: absolute;
    top: 20px;
    height: 20px;
    width: 351px;
    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:180px;
    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;
    top: 50px;
    left: 400px;
    padding: 0;
    max-height: 100px;
    opacity: 0.6;
        color: #fbf7c9;
    z-index: 99;
}
 
#header h2 {
    position: absolute;
    top: 130px;
    left: 400px;
    margin: 0;
    padding: 0;
    clear: left;
    float: left;
    font-size: 105%;
    max-height: 38px;
    opacity: 0.5;
    color: #fbf7c9;
    z-index: 99;
}
 
#header h1 a {
    line-height: 100px;
    max-height: 100px;
    color: #fbf7c9;
    background: transparent;
    font-size: 180%;
    text-decoration: none;
    z-index: 99;
}
 
#header h2 span {
    color: #fbf7c9;
    font-weight: bold;
    z-index: 99;
}
 
/* TOP MENU */
 
/*  */
#top-bar {
    position: absolute;
    z-index: 10;
    top: 235px;
    left: 290px;
    margin: 0;
    right: 0;
    font-size: 90%;
    width: 500px;
    margin: 0;
    overflow: visible;
    padding: 5px 0 0 15px;
    z-index: 150;
 
}
 
#top-bar li ul li a {
    background-color: transparent;
    border: 1px;
    border-color: blue;
    text-align: left;
    width:10em;
    z-index: 150;
}
 
/*    */
#top-bar ul {
    float: left;
    margin-left: 0px;
    border: 0;
    z-index: 150;
}
 
/*     */
#top-bar a {
    color: #fbf7c9; /* kolor listy menu nienajechanej */
    background: transparent;
    border: 0;
    z-index: 150;
}
 
/*    */
#top-bar ul li, {
    border: 0;
    z-index: 150;
}
 
/*      */
#top-bar ul li ul {
    vertical-align: bottom;
    border: 0;
    z-index: 150;
}
 
/*        */
#top-bar ul li a {
    text-decoration: none;
    line-height: 23px;
    max-height: 23px;
    overflow: hidden;
    border: 0;
    z-index: 150;
}
 
/*         */
#top-bar ul li.sfhover a {
    border: 0;
    z-index: 150;
}
 
/*            */
#top-bar ul li:hover a {
    background: transparent;
    border: 0;
    z-index: 150;
}
 
/*        */
#top-bar ul li.sfhover ul li a {
    border: 0;
    z-index: 150;
}
 
/*         */
#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;
    z-index: 150;
}
 
/*              */
#top-bar ul li.sfhover a:hover {
    border: 0;
}
 
#top-bar ul li:hover a:hover {
    text-decoration: none;
    background-color: #fbf7c9; /* kolor tła menu najechanego */
    color: #6f1616;  /* kolor menu najechanego */
}
 
#top-bar ul ul li:hover a:hover  {
    color:  #6f1616; /* kolor czcionki najechanego na liście rozwijanej */
    z-index: 150;
 
}
 
/*                    */
#top-bar ul li ul {
    width: auto;
    background-color: #6f1616; /* kolor tla listy rozwiniętej */
    color: yellow;
 
}
 
/*                  */
#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: 721px;
    background-color: #fbf7c9;
    margin: 25pt auto;
    padding: 10px 40px 0 40px;
    position: relative;
    z-index: 5;
 
}
 
.page-options-bottom {
    height:1%;
    margin: 0px 0;
    text-align:right;
    position: relative;
    z-index:20;
    top: 20px;
}
 
/* FOOTER */
 
/* footer */ 
 
#extrac-div-1 {
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme2/bar_bottom2.gif);
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    bottom: 181px;
    z-index: 1;
    height: 501px;
    margin: 0 1px auto;
    vertical-align: bottom;
    padding: 0px;
}
 
#footer {
    position: relative;
    z-index: 99;
    height: 78px;
    margin: 20px auto 0px;
    vertical-align: top;
    padding: 47px 20px 0px;
    width: 761px;
    z-index: 99;
 
}
 
#footer a {
    z-index: 99;
}
 
#footer .options {
    position: relative;
    text-align: center;
    font-size: 90%;
    z-index: 99;
    height: 40px;
    width: 761px;
    margin: 0 auto;
}
 
#license-area {
    top: 340px;
    position: relative;
    padding: 0 0;
    color: #555;
    text-align: center;
    font-size: 80%;
    z-index: 160;
}
 
/*
#footer {
    font-size: 77%;
    background-image: url(http://squark.wdfiles.com/local--files/dev:theme2/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: #6f1616;
    text-decoration: none;
}
 
a.newpage {
    color: #6f1616;
    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:theme2/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:theme2/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

Similar themes fake-wikidot-standard Author: Liurd Rating: 1, Comments: 0 Tags: sidebar topbar Gnl 109557431160 Author: Mukapogx Rating: 0, Comments: 0 Tags: 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

Footer?

Gabrys 12 Sep 2008 18:29

I don't like the footer. Additionally the header is mis-aligned :(

---

Piotr Gabryjeluk
visit my blog

Great theme.

(account deleted) 25 Feb 2009 23:35

I think this is a great theme, thanks Squark!

Yes, I have to agree that the footers (meaning the top bar) are hard to see, as it is a bright yellow on a white toolbar.

Other than that, GREAT JOB! Loved this theme.

_-XIronManX

Last edited on 06 Sep 2009 04:26 by (account deleted) Show more

Very nice,

Orion M 01 Nov 2009 15:30

Just one issue. Side bar is completely unreadable, and top-bar is similarly difficult. The color of the links on the sidebar being identical to one of the principal colors of the imagery. (I know it's not sidebar-supporting. I'm looking at changing that if I can manage, my CSS skill is… eh.)

---

If anyone needs me, I'll be in the Angry Dome!

Last edited on 01 Nov 2009 15:38 by Orion M Show more

Side bar ?

Lore Staelens 17 Dec 2009 20:01

In some of the theme's there is no side bar ?
Is it possible to change that .?

Re: Side bar ?

(account deleted) 17 Dec 2009 23:58

Yes,

First, you need to make sure the side bar is enabled by checking in your site manager settings:
Manager Site > Appearance > Navigation Elements
Make sure you have the page nav:side is entered in the "side-bar" input box.

Then you'll need to edit your custom CSS to display and make room for the side bar. Here are a couple setting you can use depending on whether you want your side bar on the left or right side. Remove the lines you don't need.

#main-content {    margin-left: 17em; } /* side bar left (width of side bar plus some room for other content) */
#main-content {    margin-right: 0; } /* side bar left or no side bar */
#main-content {    margin-right: 17em; } /* side bar right (width of side bar plus some room for other content) */
#main-content {    margin-left: 0; } /* side bar right or no side bar */
 
#side-bar {    width: 15em; } /* width of side bar */
#side-bar {    float: left; } /* side bar left */
#side-bar {    float: right; } /* side bar right */
#side-bar {    display: none; } /* no side bar */

I see your one and only site you're an admin of already has a side bar. Are you thinking about changing your theme or creating a new site?

As I mentioned in my reply to your PM, this discussion would probably get more action over at the community site. You should ask for more specific help over there.

-Ed

---

Community Admin

Changing Font-face

MirageSands 03 Nov 2012 22:05

I can't seem to get header and top bar font faces to change despite my code working on my last theme I used as a base. Anyone got any answers? I have it all installed correctly and the font face code entered into the bottom of the css code. Thanks!

Re: Changing Font-face

RobElliott 04 Nov 2012 11:17

Your site is private so we can't see the top bar. But looking at the header I can see that you want to use the Gondola_SD font. Unfortunately you can't just use @font-face as you have done, there is a very specific way it has to be used to make sure it works on Wikidot sites.

So you will be able to use that font on your site and I have written a how-to at http://community.wikidot.com/howto:css:import-and-use-different-fonts. I can't see that Gondola font on Google Web Fonts so you will need to use the second method with Font Squirrel.

---

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

Last edited on 04 Nov 2012 12:00 by RobElliott Show more

little help for header

Eldermoon 05 Jul 2024 22:52

Hi Floral ,

I like your work, I wanted to ask how you can add a logo to the top of the header. Somehow it doesn't work as intended.