Shiny: Trimmed

Rate this theme:

This is a sample page used only to demonstrate my Shiny: Trimmed Wikidot theme. The page you are currently viewing is a working sample of how the theme appears.

Summary

I've always been partial to the default Wikidot Shiny Theme. That said, I believed that it was possible to scale down some of the white space resulting in a more stream-lined thinner appearance. Some minor edits to the header image and CSS was all it took to create a similar looking space saver theme. After some work, including the primary chore of getting the search box to display correctly using Internet Explorer, I'm happy to report that I'm satisfied enough with this theme to release it.

Development Notes

For future reference. If you place a search box on a navigation bar, you may need to change the z-index in order to get it to function. The z-index should be higher than the z-index of the search bar so a top bar with a z-index of 20 would mean a search box z-index of 30 for example. (Thank you Ed Johnson)

Internet Explorer displays the search box differently than Fire Fox, this is because I.E. is not 100% W3 compliant. This problem can be solved by recreating .css code for I.E. preceding each line of code with an asterisk (*). Any IE7 "hacks" must appear after the standard version of the code used for Firefox.

Installation

No special usage requirements noted. To use, just copy and paste the code below. This theme builds off of the shiny theme.

Code

table.wiki-content-table{
    margin-left: 0;
    margin-right: auto;
}

div#container-wrap {
    background-image: url(http://whane-the-whip.wdfiles.com/local--files/hold/new_header_back.PNG);
    background-repeat: repeat-x;
}

#search-top-box {
    position: absolute;
    z-index: 60;
        top: 76px;
    right: 620px;
    width: 250px;
    text-align: right;
}

/* Search Box Hack For IE7 */
#search-top-box {
        *top: 75px;
}

#search-top-box input.button{
     *height: 20px;
}

#top-bar {
    position: absolute;
    z-index: 50;
    top: 75px;
    right: 400px;
    height: 21px;
    line-height: 18px;
    padding: 0;
    z-index: 20;
    font-size: 90%;
}

#header h1 a {
    display: block;
    margin: 0;
    padding: 40px 0 25px;
    line-height: 0px;
    max-height: 0px;
    color: #eee;
    background: transparent;
    font-size: 90%;
    text-decoration: none;
}

#header h2 span {
    display: none;
    margin: 0;
    padding: 19px 0;
    line-height: 0px;
    max-height: 0px;
    color: #a02;
    font-weight: bold;
}

#header {
    height: 73px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
}

#header {
    height: 73px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
}

#main-content {
  margin-left:19.7em;
  margin-right:1em;
}

a {
    color: blue;
    text-decoration: none;
}

a.newpage {
    color: red;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, #page-title {
    color: black;
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-weight: normal;
}

blockquote{
        margin-left: 0;
        margin-right: auto;    
        border: 1px dashed #999;
    padding: 0 1em;
    background-color: #f4f4f4;
}

#top-bar ul li:hover a {
    background: #eee;
    color: blue;
}

Whane's Web