Orange Juice

Click to preview

Name: Orange Juice

Author: pieterh
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: blog orange rainbow sidebar topbar

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

Description:

Orange Juice is a variation of Green Fresh, in many colors and with several variations. The default variation is for blogs and works on all screen widths from 1024 pixels and up. It's iPhone compatible and fixed to 950px wide so that your layouts are predictable. The wide variation is ideal when you need all the screen space you can get for your project. It grabs 90% of the screen width, up to 1200 pixels wide.

Features:

• iPhone compatible
• Fixed to 950px wide so that your layouts are predictable
• Includes wide variation that uses 90% of screen width
• Supports hover popups (tooltips)
• Available in multiple color shades

To make hover popups around images or text, use this syntax: Image or linkHover text. See an example and the original HowTo.

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/orange-juice

Code

+ show the code

/*
    Orange Juice fixed-width variation
    Produced by the Wikidot Rainbow Theme Factory
    by Pieter Hintjens
 
    Color chart:
    * Primary: #f47e00
    * Hilite: #ffb769
    * Header: #f4a148
*/
 
/*
Rainbow Theme Set by Pieter Hintjens,
based on a design by Gabrys
using elements by James Kanjo
and by Steven Heynderickx
and with help from many others.
(c) the Authors cc-by-sa
 
Changelog:
 
* 2009-10-31 - added table formatting for PageManager module
* 2009-10-27 - added classes for tab views, by Steven Heynderickx
* 2009-10-25 - added elegant code block design from Wikidot Community
* 2009-10-25 - added join-text class for Join module
* 2009-10-06 - uses link colors for span popup texts
* 2009-09-12 - hides the error boxes shown to site members on system:join page
* 2009-09-11 - added support for hover popups over images and links
* 2009-09-10 - removed underline on links, now appears on a:hover instead
* 2009-09-09 - moved search box out of nav:side to make it less cluttered
* 2009-09-06 - buttons have a more elegant shaded look (from Wikidot www theme)
* 2009-09-01 - rainbow-base CSS is included into each rainbow theme to reduce include levels
* 2009-08-30 - a.newpage no longer shows white-on-dark but hilite-on-white
* 2009-08-21 - use http://snippets.wikidot.com/code:quotes-in-blockquotes
* 2009-08-21 - use primary color for links (instead of blue)
* 2009-08-21 - removed lowercase transform on page title
* 2009-08-21 - created, as base theme for all Rainbow themes
*/
 
html,body {
    min-height: 101%;
}
 
a {
    text-decoration: none;
}
 
a:hover {
    background-color: transparent;
    text-decoration: underline;
}
 
#container-wrap {
    background: url(/local--files/green-fresh/body-bg.png) repeat-x top;
}
 
/*  Use 950 pixels width for normal screens, 100% for iPhones */
#container {
    width: 950px;
    margin: 0 auto;
    padding-left: 8px;
    background: url(/local--files/green-fresh/shadow-left.png) no-repeat 0 89px;
    position: relative;
}
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}
 
#header {
    height: 118px;
    padding-right: 8px;
    background: url(/local--files/green-fresh/shadow-right.png) no-repeat right 89px;
}
 
#header h1 {
    float: left;
    padding: 43px 0 0 16px;
}
 
#header h1 span {
    padding-right: 7px;
}
 
#header h1 a {
    font-family: "Bitstream Charter", "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 26px;
}
 
#header h2 {
    padding: 49px 7px 0;
    font-family: "Verdana", Arial, Helvetica, sans;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
 
#header h2:before {
    content: "|";
}
 
#header h2 span {
    padding-left: 7px;
    font-size: 10px;
    text-transform: uppercase;
    color: #777;
}
 
#top-bar {
    width: 100%;
    height: 29px;
    right: 0;
    left: 0;
}
 
#top-bar li, #top-bar ul {
    margin: 0;
    padding: 0;
}
 
#top-bar ul {
    margin-right: 8px;
    height: 29px;
}
 
#top-bar ul ul {
    margin-right: 0;
}
 
#top-bar li a {
    border-right: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 29px;
    padding: 0 15px;
    text-decoration: none;
}
 
#top-bar li a:hover {
    text-decoration: none;
}
 
#top-bar li ul {
    border: none;
}
 
#top-bar li ul li a {
    width: 18em;
    color: #fff;
}
 
#top-bar li ul li a:hover {
    color: #000;
}
 
#content-wrap {
    padding-right: 8px;
    background: url(/local--files/green-fresh/shadow-right.png) no-repeat right -29px;
    overflow: hidden;
}
 
#side-bar {
    border-left:1px dashed #DDDDDD;
    float:right;
    margin-top:10px;
    overflow:hidden;
    padding:0 15px 0;
    width:200px;
}
 
#main-content {
    margin: 20px 0 20px 0;
    padding: 0 15px;
    min-height: 150px;
    overflow: hidden;
}
 
h1, h2, h3, #page-title {
    padding: 0;
    margin: 15px 0;
}
 
#page-content > *:first-child {
    margin-top: 0;
}
 
#page-title {
    padding-bottom: 2px;
    border-bottom: 1px solid #eee;
    margin-top: 0;
    font-size: 180%;
}
 
#login-status {
    right: 8px;
    top: 8px;
}
 
#top-bar li a:hover {
    background: white;
}
 
#search-top-box {
    right:-53px;
    top:50px;
}
 
#search-top-box .button {
    visibility: hidden;
}
 
#search-top-box input.empty {
    background-color:#EEEEEE;
    color:#999999;
}
#search-top-box .text {
    padding:2px 2px 2px 5px;
    width:220px;
}
 
#login-status a {
    text-decoration: none;
}
 
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    color: #fff;
}
 
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    color: #000;
}
 
div.buttons input, input.button, button, file, a.button {
    background-image: url(http://themes.wikidot.com/local--files/rainbow-base/button.png);
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 26px;
}
 
div.buttons input:hover, input.button:hover, button:hover, a.button:hover {
    background-image: url(http://themes.wikidot.com/local--files/rainbow-base/button_hover.png);
    border: 1px solid #DDD;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #000;
    height: 26px;
}
 
div.page-calendar-box {
    padding: 0;
}
 
/* Quotes in Blockquotes by James Kanjo */
/* http://snippets.wikidot.com/code:quotes-in-blockquotes */
 
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: 1em 60px 0;
    min-height: 37px;
}
 
blockquote p + p {    padding-top: 0;    background-image: none;}
 
#breadcrumbs {
    margin-bottom: 1em;
}
 
.odate, .like-odate {
    font-size: 85%;
    font-weight: bold;
    color: #666;
    background: transparent;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
 
#membership-by-password-box error-block,
#membership-apply-box error-block,
.member .error-block {
    display:none;
}
 
/*  Pop-up hover text over images or links, based on James Kanjo's design, improved & simplified by Pieter Hintjens */
/*  Use: [[span class="hover"]]Image or link[[span]]Hover text[[/span]][[/span]] */
 
.hover span {
    display: none;
}
.hover:hover span {
    position: absolute;
    display: inline;
    margin: 20px -20px 0 0;
    height: auto;
    width: auto;
    background: #eee;
    border: 1px solid #555;
    color: #555;
    padding: 1em;
    font-size: 12px;
}
.hover:hover span span {
    position: relative;
    margin: auto;
    height: auto;
    width: auto;
    border: none;
    padding: 0;
}
.hover:hover {
    background-color: transparent;
    text-decoration: underline;
}
 
/*  Text-only Join link by Ken Tsang */
 
.join-text a {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    text-decoration: none; 
}
 
.join-text a:hover {
    text-decoration: underline; 
}
 
/*  Use elegant code brackets from Wikidot Community */
.code {
     -moz-box-shadow: 10px -5px 15px #ddd;
     background-color:#E1E8E8;
     background-image:url(http://community.wikidot.com/local--files/admin:css/brackets.png);
     background-repeat:no-repeat;
     border:2px dotted darkgrey;
     font-family:monospace;
     font-size:12px;
     margin:0.4em 0 0.4em 40px;
     min-height:65px;
     overflow:auto;
     padding: 0 1em 0 40px;
     width:85%;
}
 
/*  For PageManager module (http://modules.wikidot.com) */
/*  Table style is layout, header/footer are top & bottom rows */
.layout {
    border-collapse:collapse;
    color:#3B485F;
    width: 100%;
    table-layout:fixed;
}
.layout tr {
    background: #FCFFDF;
    border-bottom:1px solid #EFEFEF;
}
.layout td {
    padding-left: 1em;
}
.layout .truncate {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.layout .header {
    height: 2em;
    background: #AFCCFF;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
    font-size: 13px;
}
.layout .footer {
    background: #FCFFDF;
    border-top: 1px solid #9F9F9F;
    border-bottom: 1px solid #9F9F9F;
    font-weight: bold;
}
body {
    background: #fff url(http://themes.wdfiles.com/local--files/orange-juice/footer-bg.png) repeat-x bottom;
}
 
a {
    color: #f47e00;
}
 
a:hover {
    color: #f47e00;
}
 
a.newpage {
    color: #ffb769;
}
 
h1, h2, h3, #page-title {
    color: #f47e00;
}
 
#header h1 a {
    color: #f4a148;
}
 
#top-bar ul {
    background: url(http://themes.wdfiles.com/local--files/orange-juice/menu-bg.png) repeat-x top;
}
 
#top-bar li a:hover {
    background: url(http://themes.wdfiles.com/local--files/orange-juice/menu-hover.png);
}
 
#top-bar li ul li a {
    background: #f47e00;
}
 
#top-bar li ul li a:hover {
    background: #ffb769;
}
 
#login-status a {
    color: #f47e00;
}
 
#login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    background: #f47e00;
}
 
#login-status #account-topbutton:hover, .change-textarea-size a:hover {
    background: #ffb769;
}
 
input.text, textarea {
    border-color: #f47e00;
}
 
.hover {
    color: #0a9200;
}
 
.hover:hover{
    color: #0a9200;
}
 
/*  Classes for tab views, by Steven Heynderickx  */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border:solid #f47e00; /* color of the line between tab list and content */
    border-width:0 0 3px; /*thickness of the line between tab list and content */
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    margin:0 1px 0 0; /* space between tabs */
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    margin:0 1px -1px 0; /* for overlap */
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background:#f4a148 url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    border-top:solid #f47e00 1px;
    border-left:solid #f47e00 1px;
    border-right:solid #f47e00 1px;
    font-weight:600;
    font-size:80%;
    color:#000;/*tab text color*/
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a:hover,
.yui-navset .yui-navset-top .yui-nav a:hover {
    background:#ffb769
}
/* Settings for unselected tabs */
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border:solid #f00 0px;
}
.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:#f47e00 url(http://themes.wikidot.com/local--files/rainbow-base/tabcolor.png) repeat-x -3px;
    color:#fff;border:1px solid #f47e00;
}

Notes

You can create your own customizations of this theme quite easily in your site manager. Create a custom theme and use the wide variation below code as a starting point. Then, add your customizations. You can change the color set simply by changing the @import line.

Get news and discuss

Please use the Wikidot Forum to discuss this theme and get news about updates. You can also Watch this page to get an email when it changes.

Wide variation

• 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/orange-juice/3

Click to preview

+ show wide variation code

@import url(http://themes.wdfiles.com/local--code/orange-juice);
 
#container {
    width: 90%;
    max-width: 1200px;
}

Variations on this theme

• Late Harvest - View - Edit
• Orange Juice - View - Edit
• Cherry Red - View - Edit
• Pretty Pink - View - Edit
• Royal Purple - View - Edit
• Deep Blue - View - Edit
• Sky Blue - View - Edit
• Tropical Seas - View - Edit
• Green Grass - View - Edit
• Midnight Coal - View - Edit
• Silent Silver - View - Edit
• Pale Snow - View - Edit

Similar themes Arkite Author: Cyrem Rating: 2, Comments: 0 Tags: black business clean company corperate dark light modern no-sidebar professional simple topbar white Orange Metal Author: rhombus p Rating: 1, Comments: 0 Tags: 610nm metal orange sidebar topbar

Browse themes by tag 610nm articles beige black blog blue brown business christmas clean colorful company corperate corporate curved dark dashed edu education f1 floral glass green grey grunge minimalist modern monobook nature navy no-sidebar no-topbar orange outline professional rainbow red roblox santa shiny sidebar simple topbar transparency white wide wiki wikipedia windows yellow

Comments

By renaming your orange juice...

gerdami 1249134954|%e %b %Y, %H:%M %Z|agohover

By renaming your orange juice, you're hacking your users…

You say: if you want to use this theme, just link your CSS to this theme.
Just what I did.

I just realized that http://themes.wdfiles.com/local--files/orange-fresh-fixed/menu-bg.png and
http://themes.wdfiles.com/local--files/orange-fresh-fixed/footer-bg.png just disappeared.

---

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!

Re: By renaming your orange juice...

pieterh 1249137069|%e %b %Y, %H:%M %Z|agohover

Yeah, sorry about that! I needed a clean set of theme names and better now than later.

---

Portfolio

Making the page wider

McMasters 1250109861|%e %b %Y, %H:%M %Z|agohover

It looks like this theme is only 800 pixels wide. How can I make it wider? 1020 +?

Re: Making the page wider

pieterh 1250172037|%e %b %Y, %H:%M %Z|agohover

Please read the page, there is a section titled "Wide variation".

You can also customize the theme very easily by copying/pasting the code for the wide variation and setting your own width. Please read this blog posting about customizing your theme.

---

Portfolio

Re: Making the page wider

McMasters 1250172147|%e %b %Y, %H:%M %Z|agohover

Thank you!!!

McMasters 1250870385|%e %b %Y, %H:%M %Z|agohover

Does anyone have the css of this theme in case it gets deleted?

pieterh 1250871844|%e %b %Y, %H:%M %Z|agohover

The CSS is in the page, feel free to copy and reuse.

It will not be deleted.

---

Portfolio

McMasters 1250872641|%e %b %Y, %H:%M %Z|agohover

What does this link contain then?

http://themes.wdfiles.com/local--code/orange-juice/3

pieterh 1250872868|%e %b %Y, %H:%M %Z|agohover

This page contains three code blocks, one for the normal theme, one for the example of the CSS to use, and the third one for the wide variation.

---

Portfolio

Each time you modify your CSS, you have to update your page ...

gerdami 1252742753|%e %b %Y, %H:%M %Z|agohover

Each time you modify your CSS, you have to update your page with the collapsible block of CSS code that is actually used by the theme.

This is silly, there should be a way to @import-as-text an external content, be http://themes.wdfiles.com/local--code/orange-juice, or a txt attachment to the page or whatever. This is the meaning of http://blog.wikidot.com/weneed:97

---

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!

Re: Each time you modify your CSS, you have to update your page ...

pieterh 1253005260|%e %b %Y, %H:%M %Z|agohover

Each time you modify your CSS, you have to update your page with the collapsible block of CSS code that is actually used by the theme.

In fact the theme pages for the rainbow and minimalist themes are generated automatically, so all I need to do is copy/paste. This lets me maintain other aspects correctly, such as the navigation links to all the themes in the set. Say I want to add a wide variation to the minimalist theme set: I regenerate, and copy/paste the new pages. It would be even easier with the API when that is working.

But yes, in many cases it would be better to have a static inclusion. I've edited your weneed:97 because it was suggesting a solution but not explaining the problem. See if it's better now.

---

Portfolio

gerdami 1254128368|%e %b %Y, %H:%M %Z|agohover

Did you have a look at the Google Analytics new layout ?

---

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!

Re:

pieterh 1254132400|%e %b %Y, %H:%M %Z|agohover

Did you have a look at the Google Analytics new layout ?

It reminds me of something… but what?

---

Portfolio

Theme broken?

McMasters 1267716645|%e %b %Y, %H:%M %Z|agohover

I was using http://themes.wdfiles.com/local--code/orange-juice/3 and even this http://themes.wdfiles.com/local--code/orange-juice/ theme seems to not be working correctly…was there some changes made? Does anyone else have this issue?

Re: Theme broken?

RobElliott 1267723871|%e %b %Y, %H:%M %Z|agohover

If it's just in the last few hours that you have been experiencing then is then it is due to the server upgrade

---

McMasters 1267724024|%e %b %Y, %H:%M %Z|agohover

Thanks! I believe it just started today. Will try back later

pieterh 1267724871|%e %b %Y, %H:%M %Z|agohover

I've also had some problems on Wikidot today but they're gone now and it's like Rob says, due to server migrations. All working now.

---

Portfolio

RobElliott 1267730540|%e %b %Y, %H:%M %Z|agohover

I've also had some problems on Wikidot today but they're gone now

No they're not, I've not got any of my affected sites back yet and I have a deadline of the end of the day tomorrow for one of them so fingers crossed…..

---

gerdami 1267736614|%e %b %Y, %H:%M %Z|agohover

This one does not work : http://themes.wikidot.com/orange-juice/code/3

---

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!