Boring green stripes

Click to preview

Name: Boring green stripes

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

Tags: boring green personal sidebar stripes

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

Description:

Just some boring green theme, made for serious work, not beauty contests. Based on my personal page, it proved its usefullness (for me at least). Large text should be easy for anyone to read.

Features

• should be looking good on monitors of any size larger than 800*600 (uses % instead of px for width)
• uses just 3 small images, should be loading quickly even on limited bandwith connections
• compact list usable as menu in the sidebar
• floated TOC saves space

Warning

• it isn't tested in IE6 and probably doesn't work there. Please don't use this prehistoric monster. Evolution is a good thing!

Preview

• Please look at my personal wiki. I think it shows features of this theme better than internal preview.

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/boring-green-stripes

Code

+ show the code

body 
{
  background-image: url(/local--files/boring-green-stripes/stripe_bg.png);
 font-family:Constantia, Tahoma, serif;
}
 
#header {
font-family: Candara,Arial,sans-serif;
background-repeat: repeat-x;
background-image: url(/local--files/boring-green-stripes/header_bg.png);
width:100%;
height:48px;
color:#2F2F2F;
border-bottom:6px double #2F2F2F; 
text-align:left;
z-index:1;
}
#header h1 a
{
display:block;
color:#2F2F2F;
font-size: 40px;
opacity:0.9;
z-index:2;
position:absolute;
left:1.2%;
}
#header h1 a:hover
{
background-color:transparent;
opacity:1;
}
#header h1 span {
}
#header h2
{
display:none;
}
div#top-bar {
width:100%;
position:relative;
top:0px;
left:0px;
}
 
#content-wrap
{
margin:0px auto;
width:98%;
    height: 70%;
    margin-top:10px;
    opacity:1;
  _overflow:hidden; 
}
 
div#side-bar{
border: 6px double #2F2F2F;
border-right: 2px double #2F2F2F;
background-color: transparent;
background-repeat: repeat;
background-image: url(/local--files/boring-green-stripes/content_bg.png);
}
/*#9CAB35 */
div#side-bar div {
font-size:x-small;
}
 
div#main-content {
border: 6px double #2F2F2F;
border-left: 2px double #2F2F2F;
background-color: transparent;
background-repeat: repeat;
background-image: url(/local--files/boring-green-stripes/content_bg.png);
}
a {
color:#DBDF61;
}
a:hover {
background-color:transparent;
}
div#search-top-box {
position:absolute;
right:1%;
top:1.9em;
}
div#login-status {
font-size:x-small;
position:absolute;
top:3px;
right:1.2%;
}
blockquote p a {
color:darkslategray;
}
/* images */
div.floatright, table.floatright {
    clear: right;
    float: right;
    position: relative;
    margin: 0 0 .5em .5em;
    border: 0;
/*
    border: .5em solid white;
    border-width: .5em 0 .8em 1.4em;
*/
}
div.floatright p { font-style: italic; }
div.floatleft, table.floatleft {
    float: left;
    clear: left;
    position: relative;
    margin: 0 .5em .5em 0;
    border: 0;
/*
    margin: .3em .5em .5em 0;
    border: .5em solid white;
    border-width: .5em 1.4em .8em 0;
*/
}
div.floatleft p { font-style: italic; }
/* thumbnails */
div.thumb {
    margin-bottom: .5em;
    border-style: solid;
    border-color: white;
    width: auto;
}
div.thumbinner {
    border: 1px solid #ccc;
    padding: 3px !important;
    background-color: #f9f9f9;
    font-size: 94%;
    text-align: center;
    overflow: hidden;
}
html .thumbimage {
    border: 1px solid #ccc;
}
html .thumbcaption {
    border: none;
    text-align: left;
    line-height: 1.4em;
    padding: 3px !important;
    font-size: 94%;
}
div.magnify {
    float: right;
    border: none !important;
    background: none !important;
}
div.magnify a, div.magnify img {
    display: block;
    border: none !important;
    background: none !important;
}
div.tright {
    clear: right;
    float: right;
    border-width: .5em 0 .8em 1.4em;
}
div.tleft {
    float: left;
    clear: left;
    margin-right: .5em;
    border-width: .5em 1.4em .8em 0;
}
img.thumbborder {
    border: 1px solid #dddddd;
}
.hiddenStructure {
    display: none;
}
h1 {
font-family:Calibri, "Trebuchet MS", Trebuchet, sans-serif;
}
#page-title {
border-bottom:1px solid #303030;
font-family:Calibri,sans-serif;
font-size:200%;
margin:0 0 0.5em;
padding-top:0.5em;
}
#page-content {
font-size: larger;
}
#side-bar {
font-family:Candara, Arial, sans-serif;
}
#toc-list div {
display:list-item;
}
#toc a {color:#5D601B;}
div#page-content > table:first-child {
float:right;
font-size:small;
}
#account-options a {
color:#5D601B;
font-family:Candara, Arial, sans-serif;
font-size
}
#side-bar ul {
padding:0 0 0 0.7em;
}
a {color:#373737}
h2 {border-top:2px dashed black;
font-size:110%;
padding-top:3px;}
h2 span {
border-bottom:1px dotted black;
}
h3 {font-size:100%;}
h3 span {
border-bottom:1px dotted black;
}
 
#footer {
background-repeat: repeat;
background-image: url(/local--files/boring-green-stripes/content_bg.png);
border-top:6px double #2F2F2F; 
}
#license-area {
background-repeat: repeat;
background-image: url(/local--files/boring-green-stripes/content_bg.png);
}

Notes

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

pieterh 17 Jul 2009 07:56

This is a neat design, fast and simple. The background is quite dark, though, which reduces the contrast and makes the text harder to read. Have you thought about lighter variations? Presumably it's just the three images to tweak?

---

Portfolio

Thanks!

Milhaus 17 Jul 2009 08:08

Thanks for the tip! I will be thinking about that. In fact, I already improved it compared to original version (that was used on my site for a long time). I just don't know, how to alter colour scheme, because I don't like shining green. It steals so much attention.

Besides that I am thinking about another theme, which should be focused solely on good readability.

---

Others are others and me is me.

WOW!

GoVegan 09 Aug 2009 10:42

I absolutely LOVE THIS! It's tragic that you, the author, dismisses it as boring!

I love the black and green contrast.
I love the way the sidebar is disconnected from the page content — yet its border behaves as though it weren't.
I love the simplicity and very low bandwidth.

This theme is a hit!

Re: WOW!

Milhaus 09 Aug 2009 13:21

Thanks for your reply!

The purpose of "boring" in the name of this theme is twofold:

• I think, that "boringness" of this theme is plus. It is meant to be boring, so it don't distracts from work.
• to catch your attention

---

Others are others and me is me.

pieterh 09 Aug 2009 11:05

I don't get it. On FireFox and Chromium this theme shows up as really ugly spinach soup.

See [http://blog.wikidot.com/local--files/wiki:whats-wrong-with-boring-green/cap012.png].

Yet the http://www.milhaus.wikidot.com/ wiki is really elegant. How is this the same theme?

---

Portfolio

Re: Same theme

Milhaus 09 Aug 2009 13:12

Pieterh,

no, these are not the same. My page show another try, which will eventually be "Facebook clone" theme.

This theme might look really ugly for people, who don't like green as much as me. So, I don't think I will win with this one. Also, I will definitely try to come with some other colour scheme, as you suggested before. It's just a matter of time.

---

Others are others and me is me.

Re: Same theme

pieterh 09 Aug 2009 16:09

:-) OK, so this is normal.

---

Portfolio