21
Section X - Yellow / SectionX Yellow - Replace Flash Banner with HTML/CSS Horizontal Menu
« Last post by Swift on June 23, 2019, 12:12:00 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
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;
and replace it with this;
Now open the "sectionx.css" file in your root directory and add this code anywhere within:
And that is all your need to do.
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: [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: #1E1E1E;
text-decoration: none;
font-weight: bold;
}
And that is all your need to do.