Themekings Custom Retro Website Design Discussions

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/index.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/index.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/theme-2/banner-html.jpg)
Horizontal Button Rollover
 (http://www.themekings.net/themestk/gamers/x71/theme-2/butn-over.png)
Image (http://www.themekings.net/themestk/gamers/x71/theme-2/butn-over.png)Sliding Red Light aka: Knight Rider Light (http://www.themekings.net/themestk/gamers/x71/theme-2/kr-light.gif)
Red Electric Spark (http://www.themekings.net/themestk/gamers/x71/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[/url]</li>
            <li><a class="hbutton" href="index.html">Link[/url]</li>
            <li><a class="hbutton" href="index.html">Link[/url]</li>
            <li><a class="hbutton" href="index.html">Link[/url]</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.