ThemeKings Community Forum

New theme we've been working on.

Check'r out: http://www.themekings.net/themestk/gamers/mercury/

The original Z3 theme was designed by DestineDesigns back around 2004-2005 as a PHP-Nuke template. I've been able to recreate this so that todays browsers can view them.

This is not a responsive theme, so do not use this if you are looking for something like that.

The shoutbox is now browser friendly, and no flash is required like the original was.

Please post questions about the use of this template below. Enjoy!

If you would like to eliminate the flash banner version of the X-71 theme, and replace it with the updated HTML/CSS Horizontal Menu with four (4) links and light effects you now can.

See DEMO Here

First thing you need to do is download and insert these four images into your "theme-2" image folder. Do not rename these two images or the folder. Here are the links:

Banner Image
Horizontal Button Rollover Image
Sliding Red Light aka: Knight Rider Light
Red Electric Spark

Now find this code below within your current webpage(s) HTML code to remove the flash banner;
<div id="banner">

<object id="flash3" data="flash-2/banner-2.swf" style="width: 920px; height: 174px" type="application/x-shockwave-flash">

<param name="movie" value="flash-2/banner-2.swf" />

<param name="quality" value="Best" />

<param name="wmode" value="transparent" />

</object>

</div>

and replace it with this;
<div id="banner-html">
<div id="kr-lights"></div>
<div class="sparks-L"></div>
<div class="sparks-R"></div>
<div class="clearB"></div>
<div id="menuH">
<ul>
<li><a class="hbutton" href="index.html">Link</a></li>
<li><a class="hbutton" href="index.html">Link</a></li>
<li><a class="hbutton" href="index.html">Link</a></li>
<li><a class="hbutton" href="index.html">Link</a></li>
</ul>
</div>
</div>

Now open the "x71-2.css" file in your root directory and add this code anywhere within:

#menuH {
padding: 0px;
margin: 31px 0px 0px 232px;
width: 474px;
height: 34px;
position: relative;
overflow: hidden;
list-style-type: none;
}

#menuH ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#menuH ul li {
padding: 0px;
margin: 0px 0px 0px 0px;
width: 114px;
height: 34px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 210%;
text-decoration: none;
font-weight: normal;
color: #5D5D5D;
}
a.hbutton, a.hbutton:link, a.hbutton:visited {
margin: 0px 0px 0px 0px;
background: url('theme-2/butn-over.png') no-repeat 0 0;
width: 114px;
height: 34px;
display: block;
color: #5D5D5D;
text-decoration: none;
font-weight: normal;
font-size: .7em;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a.hbutton:hover {
background-position: 0px -34px;
color: #CCCCCC;
text-decoration: none;
font-weight: normal;
}

#banner-html {
background-position: center top;
padding: 0px;
margin: 0px;
width: 920px;
height: 174px;
position: relative;
overflow: hidden;
background-image: url('theme-2/banner-html.jpg');
background-repeat: no-repeat;
}
#kr-lights {
padding: 0px;
margin: 0px auto 0px auto;
background-image: url('theme-2/kr-light.gif');
background-repeat: no-repeat;
position: relative;
width: 160px;
height: 19px;
}
.sparks-L {
overflow: hidden;
padding: 0px;
margin: 37px 0px 0px 103px;
background-image: url('theme-2/sparks-gray.gif');
background-repeat: no-repeat;
position: relative;
width: 48px;
height: 46px;
float: left;
}
.sparks-R {
overflow: hidden;
padding: 0px;
margin: 37px 103px 0px 0px;
background-image: url('theme-2/sparks-gray.gif');
background-repeat: no-repeat;
position: relative;
width: 48px;
height: 46px;
float: right;
}


And that is all your need to do.

Before our relaunch I decided that I'll continue to create new fixed width website templates to share with our community. In the meantime I'll be making some much needed changes to our own website, and our current templates that we offer now. Here is our plan;

1. Our existing free downloads will be updated with new HTML coding and CSS values that work best for today's browsers.

2. I'll be updating our current themes that use flash banners the option to use HTML menus, eliminating your viewers the hassle of installing or permitting the use of flash on your site. I'll repackage them and offer them as a download with the option to use both flash and HTML styles.

3. I have a few project I've already been working on over the past few years that I haven't posted (3 total), so I'll be posting those downloads too.

4. Will be developing a new theme that is responsive. I've have a few already, but I haven't offered them as a free download, or made them public. (trial and error project). So hope to release one by the end of the year.

5. I like to start offering my own WordPress theme. This is a big deal for me for sure because I have not utilized a platform like WordPress to base a theme on, so I'm looking forward to the challenge.

So these are the first few things I'll be doing here. If you have any ideas or suggestions, please be sure to let me know. If you would like to corroborate on a project, just ask. Always open to other developers ideas and suggestions. Thanks again!

If you would like to eliminate the flash banner version of this theme, and replace it with a HTML/CSS Horizontal Menu with four (4) links you can.

See DEMO Here

Watch Video Tutorial on Youtube

First thing you need to do is download and insert these two images into your "theme" folder. Do not rename these two images. Here are the links:

New Section X Banner
New Section X Button

Now find this code here within your webpage(s) HTML code;
<div class="header">
<div class="headerflash">


<object id="flash1" data="flash/header.swf" style="width: 560px; height: 210px" type="application/x-shockwave-flash">

<param name="movie" value="flash/header.swf" />

<param name="quality" value="Best" />

<param name="wmode" value="transparent" />

</object>

</div>
</div>

and replace it with this;
<div class="header2">
<div id="menu-H">
<ul>
<li><a class="hbutton" href="#">Link</a></li>
<li><a class="hbutton" href="#">Link</a></li>
<li><a class="hbutton" href="#">Link</a></li>
<li><a class="hbutton" href="#">Link</a></li>
</ul>
</div>
</div>

Now open the "sectionx.css" file in your root directory and add this code anywhere within:
.header2 {
background-image: url('theme/header-2.jpg');
background-repeat: no-repeat;
padding: 0px;
margin: 0px auto 0px auto;
width: 984px;
height: 210px;
position: relative;
overflow: hidden;
list-style-type: none;
}
#menu-H {
padding: 0px;
margin: 88px auto 0px auto;
width: 500px;
height: 64px;
position: relative;
overflow: hidden;
list-style-type: none;
}

#menu-H ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#menu-H ul li {
padding: 0px;
margin: 0px 0px 0px 0px;
width: 125px;
height: 64px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 350%;
text-decoration: none;
font-weight: bold;
color: #666666;
}
a.hbutton, a.hbutton:link, a.hbutton:visited {
margin: 0px 0px 0px 0px;
background: url('theme/butn-over.png') no-repeat 0 0;
width: 125px;
height: 64px;
display: block;
color: #666666;
text-decoration: none;
font-weight: bold;
font-size: .8em;
}
a.hbutton:hover {
background-position: 0px -64px;
color: #CCCCCC;
text-decoration: none;
font-weight: bold;
}

And that is all your need to do.