ThemeKings Template Help > X-71

New Banner for X-71 v3.0

(1/1)

Swift:
See X-71 v3.0 New Banner

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!

Swift:
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

ImageSliding 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;

--- Code: ---<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>

--- End code ---

and replace it with this;

--- Code: ---<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>

--- End code ---

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


--- Code: ---#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;
}
   

--- End code ---

And that is all your need to do.

Navigation

[0] Message Index