Folder

Click to preview

Name: Folder

Author: Timothy Foster
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: education folder sidebar stable topbar

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

Description:

Theme designed to look like a folder with a pencil as the top bar, sticky note as the side bar, and notebook paper as the main content area.

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

Code

+ show the code

body{    background-color:#3D3527; }
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
    background:transparent;
}
h1{
    border-bottom: 1px dotted #88D;
}
#container{
    margin: 20px 30px 20px 30px;
}
#content-wrap{
    background-color:#FFC;
    border-radius: 3em 0 3em 3em;
    -moz-border-radius-bottomright:3em;
    -webkit-border-bottom-right-radius:3em;
    -moz-border-radius-topleft:3em;
    -webkit-border-top-left-radius:3em;
    -moz-border-radius-bottomleft:3em;
    -webkit-border-bottom-left-radius:3em;
    padding-top: 60px; padding-bottom:5em;
    z-index:1;
}
#header-extra-div-1{
    position:absolute;
    top: 0;
    right: 0;
    background-color: #FFC;
    height: 92px;
    width: 400px;
    border-radius: 3em 3em 0 0;
    -moz-border-radius-topright:3em;
    -webkit-border-top-right-radius:3em;
    -moz-border-radius-topleft:3em;
    -webkit-border-top-left-radius:3em;
    z-index:-3;
}
#header-extra-div-2{
    position: absolute;
    top:0; right:400px;
    width: 80px;
    background: #FFC;
    z-index: -2;
    height: 92px;
}
#header-extra-div-3{
    position: absolute;
    top:0; right: 400px;
    width:80px;
    height:92px;
    background:#3D3527;
    border-radius: 0 0 3em 0;
    -moz-border-radius-bottomright:3em;
    -webkit-border-bottom-right-radius:3em;
    z-index:-1;
}
#header h1, #header h2{
    display: block;
    border: none;
    padding-left: 20px;
}
#header h1 a{
    border: none;
    color: #91AD3C
}
#header h2{
    color: #DFE2E7;
}
 
#login-status{
    margin-right: 30px;
}
#search-top-box{
    margin-right:75px;
}
#top-bar{
    position:absolute;
    top: 100px; right: 95px;
    background-image:url(http://themes.wikidot.com/local--files/folder/pencil.png);
    background-repeat:no-repeat;
    z-index:2;
    height: 24px;
    padding-left:88px; padding-top: 3px;
}
#top-bar li a{
    color: #222;
}
#top-bar li a:hover{
    color: #222;
    text-decoration:none;
    background-color:#FFA;
}
#top-bar li ul li a{
    background-color: #FF7;
}
#extra-div-1{
    background-image:url(http://themes.wikidot.com/local--files/folder/penciltip.png);
    background-repeat:no-repeat;
    height:24px;
    width:43px;
    position:absolute;
    top: 100px; right:82px;
}
#main-content{
    background-color:#FFF;
    background-image:url(http://themes.wikidot.com/local--files/folder/paper.png);
    background-repeat:repeat-y;
    margin: 0 2em 1em 250px;
    border:3px solid #FFFFD7;
    padding-left: 70px;
}
#side-bar{
    width:190px;
    background-image:url(http://themes.wikidot.com/local--files/folder/postitnote5.png);
    background-repeat:no-repeat;
    background-color: #EBF1A4;
    margin: 0 15px 0 15px;
}
#page-title{
    margin-top:-10px;
    border:none;
    font-family:'Comic Sans MS',Verdana,'Serif Sans','Times New Roman';
}
#footer{
    font-size:80%;
    margin-top:-60px;
}
#license-area{
    font-size:80%;
}
#footer-bar{
    margin-top: 30px;
    color:#E6E6E6;
}
#footer-bar a{
    color:#E6E6FF;
}
#page-info{
    border-top: 1px dotted #888;
}
#page-options-bottom a{
    border:1px solid #888;
    background-color: #E7E7E7;
    padding: 1px 3px 1px 3px;
    color: #222;
}
#page-options-bottom a:hover{
    background-color: #FFF;
    text-decoration:none;
    color:#222;
}

Notes

Thanks to James Kanjo and Curvature for making the tab possible.

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

IE support?

Hossbot 22 May 2010 01:51

At least in IE8, the rounded corners of the folder are square. Same page in FF looks fine. Anyone know if there is something that can be done to make this work in IE as well?

Same problem on Firefox.

mlitsonata 31 Aug 2012 14:39

I'm having the same problem on Firefox. Weird thing, it looked great when I first started using it on my old laptop while I was at work. Now that I come home on my brand new desktop the rounded corners are gone. Same problem on both Firefox and Internet Explorer. Not good at all, if this is how other people see my wiki. It's been a couple of years since the last post was made, any news?

(account deleted) 31 Aug 2012 16:29

I think our newer browsers must be dropping support for some of their browser-specific prefixes. This theme needs to have the standard CSS3 border-radius property added in the appropriate places.

If Timothy or someone else doesn't beat me to it, I should have time later tonight or over the weekend to help out.

---

Community Admin

thanks :)

mlitsonata 31 Aug 2012 21:46

You're awesome Ed, thanks! I'll keep an eye out :)

Re: thanks :)

Timothy Foster 02 Sep 2012 15:35

I went ahead and added all the appropriate code lines to make it back to the way it was.

Ever since the web browsers have adopted CSS3, I've been needing to revamp all of my older themes; sorry for the delay in fixing this!

---

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Logo

gkoutlis 25 Oct 2012 22:14

Please, I would like to put a logo image to your theme, that I recently used and like a lot.
How can I do that?

Timothy Foster 26 Oct 2012 02:47

To do that, you need to modify the theme slightly. This page details exactly how to do that. If you need further clarification or debugging, don't be afraid to ask.

---

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Enrique Santos 20 May 2018 12:28

The height of the #header element is 7em, but the heights of #header-extra-div-* are set to fixed 92px, and the pencil elements have a fixed top of 100px.

Being fixed values, instead of relative ones, gives visual problems when the base font-size is different than the standar 16px. It happens when the user has touched the settings on his browser to a bigger or smaller base font size.

I suggest a solution like the next lines of CSS, which solves the problem:

[id|=header-extra-div]{
   height:inherited;
}
#top-bar, #extra-div-1{ /* Pencil */
   top:8em;
}