Themekings Custom Retro Website Design Discussions

ThemeKings Template Help => Section X - Purple => Topic started by: Swift on June 23, 2019, 11:48:25 AM

Title: SectionX Purple - Replace Flash Banner with HTML/CSS Horizontal Menu
Post by: Swift on June 23, 2019, 11:48:25 AM
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 (http://themekings.net/themestk/gamers/sectionx/index.html)

Watch Video Tutorial on Youtube (https://www.youtube.com/watch?v=LwE9DVwq764)

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 (http://www.themekings.net/themestk/gamers/sectionx/theme/header-2.jpg)
New Section X Button (http://www.themekings.net/themestk/gamers/sectionx/theme/butn-over.png)

Now find this code here within your webpage(s) HTML code;
Code: [Select]
<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;
Code: [Select]
<div class="header2">
   <div id="menu-H">
      <ul>
         <li><a class="hbutton" href="#">Link[/url]</li>
         <li><a class="hbutton" href="#">Link[/url]</li>
         <li><a class="hbutton" href="#">Link[/url]</li>
         <li><a class="hbutton" href="#">Link[/url]</li>
      </ul>
   </div>
</div>

Now open the "sectionx.css" file in your root directory and add this code anywhere within:
Code: [Select]
.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.