ThemeKings Template Help > Section X - Plasma

SectionX Plasma - Replace Flash Banner with HTML/CSS Horizontal Menu

(1/1)

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

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

--- End code ---

and replace it with this;

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

--- End code ---

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

--- Code: ---.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: #EFEFEF;
   text-decoration: none;
   font-weight: bold;
}

--- End code ---

And that is all your need to do.

Navigation

[0] Message Index