Freshly Squeezed

Name: Freshly Squeezed

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

Tags: bmc dark flexible freshly-squeezed orange sidebar topbar

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

Description:

The Freshly Squeezed themes, now arriving at Wikidot, are designed to be simple and flexible. Available in a range of colours, these themes are sure to suit all of your needs. You can also create your own colour variation in less than 5 minutes.

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 a 'masthead' infobox to really capture your visitors attention.

How to install

go to: your wiki admin panel » appearance » themes
choose External CSS theme
supply the following URL as the CSS location

https://files.themes.obscurative.ru/local--code/freshly-squeezed

Code

+ show the code

- hide the code

/***
 
      Freshly Squeezed Theme - Base CSS (orange).
 
  by BMC WebDesign, 2010. http://css3.wikidot.com
 
                      *****
                      v1.01
 
***/
 
/*-------------------------------------------------------------
   GLOBAL 
---------------------------------------------------------------*/
 
p {
    margin: 7px 0;
    line-height: 1.38em;
}
a {
    color: #ff9600;
    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: #fff url(/local--files/freshly-squeezed/freshly-bg.png) repeat-x 0 -26px;
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.3em;
}
 
#container-wrap {
    margin: 0 auto;
    width: 960px; 
}
 
/*-------------------------------------------------------------
   HEADER 
---------------------------------------------------------------*/
 
#header {
    height: 154px;
    position: relative;
}
#header h1 {
    position: absolute;
    top: 44px;
    left: 20px;
}
#header h1 a {
    color: #222;
    font-size: 40px;
    padding: 17px 0 0 10px;
    letter-spacing: 1px;
}
#header h1 a:hover {color: #ff9600;}
#header h2 {
    font-size: 13px;
    color: #666;
    position: absolute;
    top: 5px;
    left: 5px;
}
 
/*----- 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: #222;}
#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: 108px;
    height: 48px;
    width: 240px;
    text-align: right;
}
#search-top-box input.text {
    width: 135px;
    margin: 12px 40px 0 0;
    padding-right: 15px;
    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: 5px;
    right: 10px;
    border: none;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent url(/local--files/freshly-squeezed/freshly-searchButton.png) no-repeat left top;
    color: transparent;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
}
#search-top-box input.button:hover {
    background-position: left -36px;
}
 
/*----- TOPBAR NAVIGATION ------------------------------------*/
 
#top-bar {
    bottom: 1px;
    height: 48px;
    display: block;
    left: 0;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
    z-index: 2;
}
#top-bar ul {
    float: left;
    padding: 0;
    height: 33px;
    margin-top: 9px;
    border-right: 1px solid #000;
    border-left: 1px solid #444;
}
#top-bar ul li {
    background: none;
    display: inline;
    font-size: 13px;
    padding: 0 15px 0;
    margin: 0;
    position: relative;
    border-right: 1px solid #444;
    border-left: 1px solid #000;
}
#top-bar ul li a {
    color: #fff;
    padding: 9px 17px 7px;
    text-shadow: 0px -1px 1px #000;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#top-bar ul li a:hover,
#top-bar ul li a.current-link {
    color: #ff9600;
}
#top-bar ul li a:hover,
#top-bar ul li.sfhover a {
    background: none;
    text-decoration: none;
    -webkit-box-shadow: 0 1px 3px #000 inset;
    -moz-box-shadow: 0 1px 3px #000 inset;
    box-shadow: 0 1px 3px #000 inset;
}
#top-bar ul li ul {
    color: #fff;
    visibility: hidden;
    opacity: 0;
    font-size: 1em;
    left: 16px;
    line-height: 1.8em;
    padding: 0;
    position: absolute;
    z-index: 100;
    width: 160px;
    background-color: #161616;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
    background-image: -moz-linear-gradient(top,#333, #000);
    height: auto;
    border: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
}
#top-bar ul li:hover ul {
    display: inline-block;
    opacity: 1;
}
#top-bar ul li ul li {
    padding: 0 10px;
    background: none;
    border: none;
    display: inline-block;
    width: auto;
}
#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;
    /*-webkit-box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);*/
}
#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: #ff9600;}
#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%;
}
 
/*----- MASTHEAD ---------------------------------------*/
 
/*#content-wrap {padding-top: 300px;}*/
.masthead {
    color: #fff;
    display: block;
    width: 850px;
    padding: 10px 10px;
    position: absolute;
    top: 30px;
    left: 30px;
    text-shadow: #b96f0b 0 1px 1px;
    border: 10px solid #fff;
    background-color: #ff9600;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffba00), to(#ff9600));
    background-image: -moz-linear-gradient(top, #ffba00, #ff9600);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,0.3);
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    text-align: center;
}
.masthead h1, .masthead h2, .masthead h3, 
.masthead h4, .masthead h5, .masthead h6, .masthead a {
    color: #fff;
}
.masthead a:hover {
    color: #444;
}
 
/*----- BREADCRUMBS -------------------------------------------*/
 
#breadcrumbs {
    color: #888;
    padding: 0 10px;
}
#breadcrumbs a {color: #888;}
#breadcrumbs a:hover {color: #ff9600;}
 
/*-------------------------------------------------------------
   FOOTER
---------------------------------------------------------------*/
 
#page-options-container {
    margin-right: 10px;
}
#footer {
    color: #999;
    padding: 12px 10px 38px;
    font-size: 0.95em;
    margin-top: 0;
    background: #eee;
    border-top: 1px solid #ccc;
}
#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;
    background: #eee;
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 940px;
}
/* background for the footer - if you use a custom footer, change the height property to suit */
#extra-div-1 { 
    position: absolute;
    width: 100%;
    height: 69px; /* change me! */
    background: #eee;
    bottom: 0;
    left: 0;
    z-index: -30;
    border-top: 1px solid #ccc;
}
 
/*-------------------------------------------------------------
   WIKI ELEMENTS
---------------------------------------------------------------*/
#action-area h1 {
    font-size: 200%;
}
.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: #f2f2f2;
    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: #ff9600;
    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;
    text-transform: uppercase;
}
.post-container .post .options a:hover {
    color: #ff9600;
}
 
/*----- 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, .new-post 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, 
.new-post a:hover {
    color: #000;
    background-color: #ff9600;
    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;
}

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

Masthead

Grab the attention of your visitors with this visually appealing masthead infobox. All you have to do is create a div with the class masthead, and then add one line of CSS in a CSS module. You may need to adjust the value of padding-top, depending on how high your masthead is.

[[module CSS]]
#content-wrap {padding-top: 300px;}
[[/module]]

[[div class="masthead"]]
[[f<image :first]]
+ Type you tagline, slogan or something else in here.
[[/div]]

Create your own!

You can easily create your own colour variation of the Freshly Squeezed theme to suit your site perfectly. All you have to do is change the colours in the code below.

/*---------------------------------------------------------
Create your own variation
----------------------------------------------------------*/
@import url(http://themes.wdfiles.com/local--code/freshly-squeezed/1);
 
a, #top-bar ul li a:hover, #side-bar a:hover, #header h1 a:hover, #breadcrumbs a:hover, .post-container .head .info .printuser a, .post-container .post .options a:hover {
    color: #67b300;
}
 
.masthead {
    background-color: #74c800;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96f700), to(#74c800));
    background-image: -moz-linear-gradient(top, #96f700, #74c800);
    text-shadow: #60a802 0 1px 1px;
}
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, 
.new-post a:hover {
    background: #74c800;
}

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).
November 17, 2010: v1.01
- fix for search button in IE

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.