ThemeKings Community Forum

ThemeKings Template Help => X-71 => Topic started by: Swift on June 25, 2019, 06:11:51 PM

Title: New Banner for X-71 v3.0
Post by: Swift on June 25, 2019, 06:11:51 PM
See X-71 v3.0 New Banner (http://www.themekings.net/themestk/gamers/x71/v2/index3.html)

I'll be posting the new header info shortly. I'll removed the flash file and changed it to animated gifs with a new HTML Horizontal Menu. Check'r out!
Title: Re: New Banner for X-71 v3.0
Post by: Swift on July 03, 2019, 11:19:37 AM
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 (http://www.themekings.net/themestk/gamers/x71/v2/index3.html)

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 (http://www.themekings.net/themestk/gamers/x71/v2/theme-2/banner-html.jpg)
Horizontal Button Rollover Image (http://www.themekings.net/themestk/gamers/x71/v2/theme-2/butn-over.png)
Sliding Red Light aka: Knight Rider Light (http://www.themekings.net/themestk/gamers/x71/v2/theme-2/kr-light.gif)
Red Electric Spark (http://www.themekings.net/themestk/gamers/x71/v2/theme-2/sparks-gray.gif)

Now find this code below within your current webpage(s) HTML code to remove the flash banner;
Code: [Select]
<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;
Code: [Select]
<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:

Code: [Select]
#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.