Themekings Custom Retro Website Design Discussions
ThemeKings Template Help => Section X - Purple => Topic started 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;
<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;
<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:
.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.