ThemeKings Community Forum

ThemeKings Template Help => Section X - Plasma => Topic started by: Swift on June 23, 2019, 12:06:06 PM

Title: SectionX Plasma - Replace Flash Banner with HTML/CSS Horizontal Menu
Post by: Swift on June 23, 2019, 12:06:06 PM
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://www.themekings.net/themestk/gamers/sectionx_plasma/index2.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_plasma/theme/header-2.jpg)
New Section X Button (http://www.themekings.net/themestk/gamers/sectionx_plasma/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</a></li>
<li><a class="hbutton" href="#">Link</a></li>
<li><a class="hbutton" href="#">Link</a></li>
<li><a class="hbutton" href="#">Link</a></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: #EFEFEF;
text-decoration: none;
font-weight: bold;
}

And that is all your need to do.