Orange Fresh

Click to preview

Name: Orange Fresh

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

Tags: blog company grey modern orange sidebar topbar white

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

Description:

Orange Fresh Theme for blogging or a small company site.

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

Code

+ show the code

@import url(/local--code/green-fresh);
 
body {
    background: #fff url(/local--files/orange-fresh/footer-bg.png) repeat-x bottom;
}
 
#header h1 a {
    color: #f89326;
}
 
#top-bar ul {
    background: url(/local--files/orange-fresh/menu-bg.png) repeat-x top;
}
 
#top-bar ul ul {
    margin-right: 0;
}
 
#top-bar li a:hover {
    background: url(/local--files/orange-fresh/menu-hover.png);
}
 
#top-bar li ul li a {
    background: #f7850b;
}
 
#top-bar li ul li a:hover {
    background: #fba951;
}
 
h1, h2, h3, #page-title {
    color: #f7850b;
}
 
#login-status a {
    color: #f7850b;
}
 
div.buttons input, input.button, #login-status #account-topbutton, #account-options li a:hover, .change-textarea-size a {
    background: #f7850b;
}
 
div.buttons input:hover, input.button:hover, #login-status #account-topbutton:hover, .change-textarea-size a:hover {
    background: #fba951;
 
}
 
input.text, textarea {
    border-color: #f7850b;
}
 
div.buttons input, input.button, button, file, a.button {
    border:1px solid #ccc;
}
 
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}

Notes

The theme move search bar into the sidebar, though the theme works best with sidebar.
However you may have some luck with no sidebar.

Similar themes Yotsuba Author: dralkatraz Rating: 1, Comments: 0 Tags: sidebar simple topbar Sandbox Harder Author: Laggy000929 Rating: 1, Comments: 2 Tags: css3 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 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 deposit

Comments

Color alternates

scottplan 07 Feb 2009 18:52

"Green Fresh" and "Orange Fresh" are clean and elegant. Any suggestions for how to convert these to other colors? If you point me to how you convert the images, maybe I could expand the color range and post more options here.

S.

Great!

(account deleted) 22 May 2009 21:24

Good work, Gabrys! Looks really nice. Something I've been looking for.

Nice.

EKVirtanen 08 Jul 2009 17:45

Now can you explain for an idiot, how to get bit more width to this theme?

Re: Nice.

Squark 09 Jul 2009 10:15

You need to change

#container {
 width: 65%;
 min-width: 600px;
}

It means that your site will be min. 600px wide and max 65% or your browser window, if you will make the window bigger. Change these values to fit your needs, e.g. to 800px and 80% or so.

Re: Nice.

EKVirtanen 09 Jul 2009 11:50

Thank you. I liked in this theme in first sight, now it's pure love :D Definately my choice for my blog.http://e-k-v.wikidot.com/

E.K.Virtanen

pieterh 09 Jul 2009 17:20

OK, trying this question again. Squark, could you please explain to us mortals how you "change" this theme? You don't need to explain every click, but some general instructions would be very useful. If this is explained somewhere, a link would be great.

Since the question of customizing external themes comes up often, it would in fact be useful to have this documented clearly on this site.

You can assume that anyone reading such documentation knows CSS and knows how to create custom themes "the old way", i.e. using the site manager and inheriting from Base.

Thanks.

---

Portfolio

Re:

Squark 09 Jul 2009 17:29

I doubt that there is an instruction how to extend themes from themes.wikidot.com as they are designed to be delivered as is, but here is the instruction how to build your own theme. After reading it, it should be easy for you to understand how CSS works and how to do all the magic :)

In this particular case, if you want to extend this theme, you need to create new theme in your Site Manager, copying the CSS code from THIS theme (above: show the code) and altering the parameters you need to change, e.g. widths or colors.

Note that in the first line of this theme you have @import url, which imports other CSS (from Green Fresh theme), so you need to change this path to absolute (from /local--code/green-fresh to http://themes.wdfiles.com/local--code/green-fresh).

Edit: Also images are linked relatively, so you need to change urls in the same way as above, adding full path http://themes.wdfiles.com/local--files/orange-fresh/.

Last edited on 09 Jul 2009 17:31 by Squark Show more

Re: extending external theme

gerdami 28 Jul 2009 10:05

Hi Squark,
I think that this useful post should be rewritten elsewhere in this site.

I didn't play that much with Custom internal themes and I realize that extending external themes is a little more complicated … if not explained in a visible place.

---

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