The ReStyle submission form is now ready to take contest entries.  If you visit the page you will be asked for your EvNet credentials.  What are those?  They are what you use to comment with on Channel 10 or MIX Online.   And if you don't have a SignIn there should be a nice registration button there for you to click and setup your account.

The image to the right was my very attractive test ReStyle while making sure the submission tool worked properly.  I think its classy, with its big typography and hand illustrations.

Ian Muir has already submitted a text only ReStyle called Bare.  Like the gray it shows off how you can completely wipe the page of any images, but maintain the same clickable regions.

So how did we do that?

Although this is not the most compliant way you would set up your HTML, this works well for the specific purpose of the contest.  Let's dissect the MIX logo used in the upper left of the default theme.

Here's the HTML used:

<div id="logo">
    <a href="http://visitmix.com/2008/default.aspx"><span class="reStyle">MIX 08</span>
        <img src="images/reStyleMe.gif" alt="MIX08" />
        </a>
</div>

And the CSS:

#logo{
    float:left;
    margin-top:6px;
    margin-left:30px;
    background-image:url('images/mixLogo.png');
    background-repeat:no-repeat;   
}
#logo img
{
    width:183px;
    height:100px;
}

.reStyle
{
    display:none
}

The advantages of this code for this contest include:

• div element provides the ultimate positioning and layout functionality
• a element of course provides the link we need
• span provides alternate text if we choose not to use images
• img provides the actual clickable surface.  reStyleMe.gif is a blank gif, so it provides no visual.  That comes the image set to the back ground of the div, which you can easily change in CSS.

Taking advantage of this flexibility is the gray sample ReStyle with the following CSS:

#logo{
    float:left;
    margin:0;
    margin-left:30px;
    padding-top:20px;
    height:40px;
}
#logo .reStyle
{
    font-weight:bold;
    font-size:xx-large;
    text-decoration:none;
    color:#666;
}
#logo .reStyle:hover
{
    text-decoration:underline;
    color:#000;
}
#logo img
{
    display:none;
}

This effectively hides the clickable image and styles the text to look like any other link on the page.

Hopefully the HTML that we've set for the contest will allow for some great creativity for the contest.  I'm looking forward to seeing what turns up next in the ReStyle Gallery.