Pink Flower

Name: Pink Flower

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

Tags: bmc flexible flower pink sidebar topbar

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

Description:

The Flower themes are designed to be simple, attractive and flexible. Available in a range of colours, these themes are sure to suit all of your needs.

The theme is a fixed width of 960px, and the sidebar can be position on the left, right or not displayed at all, to maximise the screen real estate. It also includes customised buttons, comments and blockquotes.

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/pink-flower

Code

+ show the code

- hide the code

/***
 
          Flower Theme - Base CSS (pink).
 
  by BMC WebDesign, 2010. http://css3.wikidot.com
 
                      *****
                      v1.01
 
***/
 
/*-------------------------------------------------------------
   GLOBAL 
---------------------------------------------------------------*/
 
p {
    margin: 7px 0;
    line-height: 1.38em;
}
a {
    color: #ba003c;
    text-decoration: none;
}
a:hover {
    color: #222;
    background-color: transparent;
}
 
h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: normal;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.2em;
    margin: 16px 0;
}
h1 {font-size: 270%;}
h2 {font-size: 230%;}
h3 {font-size: 200%;}
h4 {font-size: 170%;}
h5 {font-size: 145%; font-weight: bold;}
h6 {font-size: 125%; font-weight: bold;}
 
input[type=text], textarea {
    padding: 4px;
    margin: 5px 0;
}
 
/*-------------------------------------------------------------
   LAYOUT 
---------------------------------------------------------------*/
 
body {
    background: #eeebec url(http://themes.wdfiles.com/local--files/pink-flower/flower-bg.png) repeat-x 0 -10px;
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.3em;
}
 
#container-wrap {
    margin: 0 auto;
    width: 960px; 
}
 
/*-------------------------------------------------------------
   HEADER 
---------------------------------------------------------------*/
 
#header {
    height: 125px;
    position: relative;
}
#header h1 {
    position: absolute;
    top: 30px;
    left: 10px;
}
#header h1 a {
    color: #fff;
    font-size: 40px;
    padding: 17px 0 0 10px;
    letter-spacing: 1px;
}
#header h1 a:hover {color: #ba003c;}
#header h2 {
    font-size: 13px;
    color: #777;
    position: absolute;
    top: 73px;
    right: 0;
}
 
/*----- LOGIN STATUS ------------------------------------------*/
 
#login-status {
    color: #666;
    position: absolute;
    top: 3px;
}
#login-status .printuser a {
    display: none;
}
a#account-topbutton {
    background: none;
    border: none;
}
#login-status a {
    padding: 0 3px;
    color: #666;
    text-decoration: none;
}
#login-status a:hover {color: #fff;}
#account-options {
    width: 140px;
    text-align: center;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
}
 
/*----- SEARCH TOP BOX -----------------------------------------*/
 
#search-top-box {
    position: absolute;
    right: 0px;
    top: 84px;
    height: 40px;
    width: 240px;
    text-align: right;
}
#search-top-box input.text {
    width: 135px;
    margin: 12px 10px 0 0;
    padding-right: 24px;
    background: #d2d2d2;
    border: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: background 150ms linear;
    -moz-transition: background 150ms linear;
}
#search-top-box input.text:focus {
    background: #fff;
    outline: none;
}
#search-top-box input.text.empty {
    color: #666;
    font-style: italic;
}
#search-top-box input.button {
    position: absolute;
    top: 11px;
    right: 6px;
    border: none;
    display: block;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent url(http://themes.wdfiles.com/local--files/pink-flower/flower-searchButton.png) no-repeat center center;
    color: transparent;
    text-indent: -9999px;    
    font-size: 0;
    line-height: 0;
}
 
/*----- TOPBAR NAVIGATION ------------------------------------*/
 
#top-bar {
    bottom: 0;
    height: 33px;
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
    font-size: 16px;
}
#top-bar ul {
    float: left;
    padding: 0;
    height: 33px;
    margin: 0;
}
#top-bar ul li {
    background: none;
    display: inline;
    padding: 0 10px 0;
    margin: 0;
    position: relative;
}
#top-bar ul li a {
    color: #fff;
    padding: 9px 17px 6px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-shadow: #7e0b31 0 1px 0;
}
#top-bar ul li a:hover,
#top-bar ul li a.current-link {
    color: #000;
    text-shadow: none;
}
#top-bar ul li a:hover,
#top-bar ul li.sfhover a {
    background: none;
    text-decoration: none;
}
#top-bar ul li ul {
    color: #fff;
    visibility: hidden;
    opacity: 0;
    font-size: 14px;
    left: 16px;
    line-height: 1.8em;
    padding: 0;
    position: absolute;
    z-index: 100;
    width: 160px;
    background-color: #ba003c;
    height: auto;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
}
#top-bar ul li:hover ul {
    display: inline-block;
    opacity: 1;
}
#top-bar ul li ul li {
    padding: 0 10px;
    background: none;
    border: none;
    display: inline-block;
    width: auto;
}
#top-bar ul li ul li a {
    background: none;
    padding: 5px;
    text-transform: none;
}
#top-bar ul li ul li a:hover,
#top-bar ul li.sfhover ul li a
 {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#top-bar ul li ul li ul {
    position: absolute;
    left: 160px;
    top: 0;
    opacity: 0 !important;
    visibility: hidden;
}
#top-bar ul li ul li:hover ul {
    opacity: 1 !important;
    visibility: visible;
}
 
/*-------------------------------------------------------------
   MAIN CONTENT
---------------------------------------------------------------*/
 
#content-wrap {
    position: relative;
    padding: 20px 15px 0;
    clear: both;
    overflow: hidden;
    background: #f5f8f8;
    border: 1px solid #fff;
    top: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#page-title {
    border: none;
    font-size: 30px;
    font-weight: normal;
    text-decoration: none;
    margin: 0 0 10px;
    color: #111;
    letter-spacing: -1px;
    padding: 10px 0;
}
#main-content {
    float: left;
    padding: 0;
    width: 650px;
    margin: 0;
    overflow: hidden;
    border-right: 1px solid #ccc;
}
#page-content {
    width: 630px;
    margin: 0 auto;
}
 
/*----- SIDEBAR -------------------------------------------*/
 
#side-bar{
    float: right;
    padding: 10px;
    width: 250px;
    margin: 0;
    overflow: hidden;
}
#side-bar a {color: #444;}
#side-bar a:hover {color: #ba003c;}
#side-bar ul {
    list-style-type: none;
    padding: 0 5px 0;
}
 
/*----- SIDEBAR ON LEFT -----------------------------------*
 
#page-title {margin-left: 10px;}
#side-bar {float: left;}
#main-content {
    float: right;
    border-right: none;
    border-left: 1px solid #ccc;
}
 
/*----- NO SIDEBAR ---------------------------------------*
 
#side-bar {display: none;}
#main-content {
    width: 100%;
    border: none;
}
#page-content {
    width: 97%;
}
 
/*----- BREADCRUMBS -------------------------------------------*/
 
#breadcrumbs {
    color: #888;
    padding: 0 10px;
}
#breadcrumbs a {color: #888;}
#breadcrumbs a:hover {color: #ba003c;}
 
/*-------------------------------------------------------------
   FOOTER
---------------------------------------------------------------*/
 
#page-options-container {
    margin-right: 10px;
}
#footer {
    color: #999;
    padding: 12px;
    font-size: 0.95em;
    margin-top: 20px;
}
#footer .options {font-size: 100%;}
#footer a, #license-area a {
    color: #999;
    text-decoration: none;
}
#footer a:hover, #license-area a:hover {color: #333;}
#license-area {
    padding: 0 10px 10px;
    color: #999;
    font-size: 0.95em;
    margin: 0;
}
 
/*-------------------------------------------------------------
   WIKI ELEMENTS
---------------------------------------------------------------*/
#action-area h1 {
    font-size: 200%;
}
a.wiki-close-button:hover {
    background: none;
}
.code {
    display: block;
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
blockquote {
    background: #dfdfdf;
    border: none;
    border-top: 2px solid #adadad;
    color: #444;
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-style: italic;
    padding: 3px 10px;
}
 
/*----- COMMENTS ----------------------------------------------*/
 
.comments-box {
    border-top: 2px solid #eee;
    margin: 10px 0;
}
.comments-box h1 {
    color: #444;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 0 10px;
    text-transform: uppercase;
}
.post-container {
    background: #e6e6e6;
    padding: 0 10px;
    position: relative;
    margin: 15px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.post-container .post {
    margin: 0;
    padding: 5px 0 2px;
}
.post-container .head .info, .post-container .head {
    margin: 0;
    background: none !important;
    border: none;
    text-transform: none;
}
 
.post-container .head .info .printuser a {
    color: #ba003c;
    text-transform: none;
    font-weight: bold;
    font-size: 14px;
}
.post-container .head .info .printuser a:hover {
    background: none;
    color: #444;
}
.post-container .head .info .odate {
    float: right;
    color: #777;
}
 
.post-container .head .options, .post-container .head .info .printuser.avatarhover a img {
    display: none;
}
.post-container .options {
    margin: 5px 0 0;
    padding: 5px 0 0;
}
.post-container .post .options a {
    color: #444;
    padding: 4px 8px 0;
    text-decoration: none;
}
.post-container .post .options a:hover {
    color: #ba003c;
}
 
/*----- BUTTONS ----------------------------------------------*/
 
div.buttons input, input.button, button, file, a.button, 
.button-bar a, #new-post-button, .rate-points, .rateup a, 
.ratedown a, .cancel a, .pager a, div.new-post a, .owindow .button-bar a {
    height: auto;
    padding: 4px 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #444;
    border: none;
    color: #fff;
    font-size: 1.1em;
    margin: 0 5px;
}
div.buttons input:hover, input.button:hover, button:hover, 
file:hover, a.button:hover, .button-bar a:hover, #new-post-button:hover, 
.rateup a:hover, .ratedown a:hover, .cancel a:hover, .pager a:hover, 
div.new-post a:hover, .owindow .button-bar a:hover {
    color: #fff;
    background-color: #ba003c;
    border: none;
    text-decoration: none;
    cursor: pointer;
}
.page-rate-widget-box .rate-points, .pager .current {
    padding: 4px 6px;
    font-size: 1.1em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
}
 
.pager a, .pager a:hover, .pager .current, .page-rate-widget-box a {
    padding: 3px 8px;
}
 
/*----- OWINDOWS ----------------------------------------------*/
.owindow {
    border: none;
    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#eef1f1));
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    border-top: 1px solid #fff;
}
.owindow .title {
    background: none;
    padding: 10px 20px;
    border-bottom: 1px solid #fff;
}
.owindow .content {border-top: 1px solid #ddd;}
.owindow.owait .content, .owindow.osuccess .content {border: none;}
.owindow h1 {font-size: 1.6em;}
.owindow .button-bar {padding-right: 0;}
.owindow .button-bar a {outline: none;}

Notes

Customise it!

You can change the way the theme appears by adding the following code snippets to either individual pages or a live template.

Left sidebar

[[module CSS]]
#page-title {margin-left: 10px;}
#side-bar {float: left;}
#main-content {
    float: right;
    border-right: none;
    border-left: 1px solid #ccc;
}
[[/module]]

No sidebar

[[module CSS]]
#side-bar {display: none;}
#main-content {
    width: 100%;
    border: none;
}
#page-content {
    width: 97%;
}
[[/module]]

Browser Support

The theme has been tested in the following browsers, and appears to render properly:

Safari 4+
Firefox 3.4+
Chrome 6+
Opera 9.6+
Internet Explorer 8

Changelog

November 17, 2010: First release (v1.0).
December 13, 2010: v1.01
- New: added styling to owindows.
- fixed buttons in owindows.

Feedback

If you've noticed a bug with the theme, or would like to give some suggestions, just head over to http://css3.wikidot.com/contact:themes - we'd love to hear from you.

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

Comments

Hide All Comments Unfold All Fold All

Fold

GOOD!

CoderFred 07 Dec 2010 14:03

I think you just set the bar higher for Wikidot themes. Finally wikidot starts being a site with good-designed themes. They should include your theme as default.

Reply Options

Unfold GOOD! by

CoderFred, 07 Dec 2010 14:03

Fold

CoderFred 08 Dec 2010 16:46

there is just an error: some buttons show white with white text and are unreadable … :(

EDIT: this is the code for fixing, append at the end.

.owindow .button-bar a{
    background-color: #444;
    border: none;
}
.owindow .button-bar a:hover{
    background-color: #ba003c;
}
 
div.new-post a{
background-color: #444;
border: none;
}

Last edited on 08 Dec 2010 17:38 by CoderFred Show more

Reply Options

Unfold by

CoderFred, 08 Dec 2010 16:46

Fold

bcammo 13 Dec 2010 07:14

Thanks for pointing this out. I've just updated the theme to adjust the buttons. I also improved the appearance of all wikidot popups/dialogues (i.e. .owindow).

BMC Creative | RoaringApps | @brycecammo

Reply Options

Unfold by

bcammo, 13 Dec 2010 07:14

Add a New Comment

_stable bmc flexible flower pink sidebar topbar

Wikidot Themes

Share your Wikidot theme with others!

Name: Pink Flower

Description:

How to install

Code

Notes

Customise it!

Left sidebar

No sidebar

Browser Support

Changelog

Feedback

Similar themes

Browse themes by tag

Comments