17th Street (Red)

Development

Rate this theme:

This is a sample page used only to demonstrate my 17th Street (Red) Wikidot theme. The page you are currently viewing is a working sample of how the theme appears.

Summary

This is a custom theme designed by a professional that I translated for use within wikidot. Any classic "L" site works well with wikidot and is generally easy to translate. This theme clearly demonstrates how easy it is to create a custom theme that has the look of a standard website.

Development Notes

There is still one minor problem with this theme. But its only a problem if you don't display page titles.

Without page titles, a gap appears in the left navigation column:

One suggestion for how to fix this was to change the side-bar position:

#side-bar{
    position:absolute;
    top: 154px;
}

However, this results in the footer jumping up to just below the last line of content, not including the navigation bar. For best results until a fix can be found, just use page titles for each page of your site.

Installation

To install this theme, just paste the the code that follows, it extends the base theme.

Theme Code

#page-title{
    margin: 0 0 0.5em 0;
    padding-top: 0.5em; /* Firefox bug? */
    font-size: 200%;
    border-bottom: 0px solid #666;
}

body {
    margin: 0px;
    background-color: white;
        background-image: url();
    font-size: 80%;
    font-family: Arial, Helvetica;
}

a {
    color: blue;
        text-decoration: none;
}
a:hover {
    color: black;
    background-color: transparent;
    text-decoration: underline;
}

/* Banner */
#header h1 a,#header h1 a:hover{
    display: block;
    margin: 0; padding:0;
    background-image: url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/block_trans.gif);
    height: 141px;
    width: 135px;
    position: absolute;
    bottom: 38px; left: 25px;
}

#header h1 a span{
    display:none;
}

#header h2{
    display:none;
}

#header {    
background-color: #CCCCCC;
    background-image: url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/17th_top.png);
    background-repeat: repeat;
    border-bottom: 0px solid #2A343D;
    /*padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 75px;*/
    height: 154px;
}

/* Top mini-navigation */
#top-bar {
    background-color: transparent;
    /*padding: 2px 0px 2px 30%; */  
    width: 70%;
    padding: 0; margin: 0;
    color: #E7E9DC;
    position: absolute;
    top: 127px; 
    left: 272px;
}

#top-bar  a, #top-bar li ul li a {
        border: 0px solid white;
        font-size: 110%;
        color: #E7E9DC;
    text-decoration: none;
    background-color: black;
}

#top-bar a:hover, #top-bar li ul li a:hover {
    text-decoration: underline;
    background-color: black;
}

#search-top-box {
        position: absolute;
    top: 143px;
    left: 767px;
    width: 250px;
    text-align: left;
}

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

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

#login-status{
        position: absolute;
        top: 104px; left: 767px;
}

#login-status a {
    background: transparent;
    color: #ddd;
        text-decoration: none;
}

#login-status a:hover {
    background: transparent;
    color: yellow;
        text-decoration: underline;
}

#login-status ul a {
    color: #700;
    background: transparent;
}

#account-topbutton {
    background: #ccc;
    color: #700;
}

#account-options{
    position: absolute;
    left: 50px;
    box-sizing: border-box
    -moz-box-sizing: border-box;
    width: 15em;
    right: 0;
    padding: 0;
    z-index: 40;
    background-color: white;
    display: none;
    border: 2px solid red;
}

#account-options li a{
    color: black;
        text-decoration: none;
        display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 2px 5px;
    z-index: 40;
    width: 100%;
}

#account-options li a:hover{
    color: red;
        text-decoration: underline;
}

#account-topbutton{
    font-size: 80%;
    font-weight: bold;
    padding: 0 5px;
    border: 1px solid #888;
    margin-left: 5px;
    text-decoration: none;
    background-color: #FFF;
}

/* The entire left column */
#side-bar {
        background-image: url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/left_nav_bar.PNG);    
        background-repeat: repeat-y;
        width: 190px;
    float: left;
    background-color: white;
    border-right: 0px solid #BBBEAB;
    border-bottom: 0px solid #BBBEAB;
    color: white;
    padding: 1em;
    margin:0;
}

/* The links on the left side */

#side-bar ul{
    display: block;
    padding: 0;
    list-style: none;
}
#side-bar ul li{
    margin: 0;
    display:block;
}

#side-bar li a {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    display: block;
    padding-left: 2em;
    border-bottom: 0px solid #420C02;
    border-top: 0px solid red;
    color: black;
    text-decoration: none;
}

#side-bar li a:hover {
    background-image: url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/filler.PNG);
color: white;
}

/* The headings on the left */
#side-bar h1 {
color: black;    
font-size: 140%;
    margin: 0px;
    padding-left: 1.5em;
    margin-top: 3px;
    margin-bottom: 0px;
}

#side-bar h2 {
color: black;    
font-size: 130%;
    margin: 0px;
    padding-left: 1.5em;
    margin-top: 3px;
    margin-bottom: 0px;
}

#side-bar h3 {
color: black;    
font-size: 120%;
    margin: 0px;
    padding-left: 1.5em;
    margin-top: 3px;
    margin-bottom: 0px;
}

/* Left paragraph text */
#side-bar p {
color: black;    
padding: 2px;
    margin: 2em;
    padding-left: 2em;
        margin-bottom: 3px;
    margin: 0px;
}

/* The links not in the menu */
#side-bar a {
    color: blue;
    text-decoration: none;
}

#side-bar a:hover {
    text-decoration: underline;
}

/* Footer */
#footer {
    background-image: url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/filler.PNG);
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 2px solid black;
    color: #E7E9DC;
    text-align: left;
}

#footer a {
    color: white;
        text-decoration: none;
}
#footer a:hover {
    border-bottom: 0px;
        text-decoration: underline;
}

Note that you will need to upload a logo and then replace the block_trans.gif item in the code with the url to your logo. Position as desired. Also, due to the short navigation area, you won't be able to have a huge list of menu items along the top. (Hint: use drop down menus). You may also need to reposition your menu slightly to center it once you have your menu items created. To alter this if needed you will need to change the bold line of code below:

#search-top-box {
position: absolute;
top: 143px;
left: 767px;
width: 250px;
text-align: left;
}

If you find any errors then post here so that I can correct them, thanks. I may share this theme on various themes and skin sites, but the most up-to-date version will always be found here.

Matching Tabs Code

If you want matching tabs for this theme, then add the following code to your theme. I realize this is not a gradient and so the red tab has a bit of a flat look, I'm not a graphic designer but I may bug a friend to give it the gradient look so it matches the non-selected 3D looking tabs.

/* TABS */

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: #d8d8d8;
    background-image: url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/yuitabs.png);
}

.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border-color: #a3a3a3;
}

.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:#700 url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/yuitabs.png) repeat-x left -1400px; /* selected tab background */
    color:#fff;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#d88 url(http://whane-the-whip.wdfiles.com/local--files/theme17:hold/yuitabs.png) repeat-x left -1300px;
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #C03503;
}

Comments

Whane The Whip 1223990449|%e %b %Y, %H:%M %Z|agohover

Solution found for the side bar gap:

#side-bar{
    position:absolute;
    top: 154px;
}

Keep in mind that while this fixes pages with no titles, it also breaks the bottom bar (footer area) causing it to rise to the top behind the left navigation unless you have enough content on the page to keep it below the rest of the content. So if you plan to have pages with a small measure of content, you are better off without this part of the code, just make sure you include a page title.

---

Search Engine Placement Services

last edited on 1223991691|%e %b %Y, %H:%M %Z|agohover by Whane The Whip + show more

I think I Figured It Out...

Ed Johnson 1224048381|%e %b %Y, %H:%M %Z|agohover

Stuff like this bothers me so bad that sometimes I can't sleep! After trying many, many different things, something in the back of my brain remembered that I've seen (and used in the past) a negative margin to get things to align. The 13 pixel setting looks perfect in Firefox. I didn't look in IE yet. Dump the above code and use this:

-Ed

#side-bar{
position:absolute;
top: 154px;
}

#side-bar {
    margin-top: -13px;
}
#page-title{
    display:none;
}

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Suggestion

North 1228639433|%e %b %Y, %H:%M %Z|agohover

You should set the account display and the search box above the menu(top-right corner). Also position it by using the top and right properties, it is aligned top-right after all.

Whane's Web