Posted April 24th 2013, 3:28 pm
I got these codes for it. Need to modify..
For overall_header
I replace this code
with
I know how to modify these with links and text. But need to modify register, mailbox and login button.
1. Register button will only be visible for guests
2. login button will be logout button after login
3. Mail box button will confirm that there is a mail Like: "Mailbox [0]"
This is the CSS code
The jQuery code:(in overall_header after head section)
For overall_header
I replace this code
- Code:
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
with
- Code:
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
<li>
<a href="#">More</a>
<ul class="subnav">
<li><a href="#">Follow Us on Twitter</a></li>
<li><a href="#">Like Us on Facebook</a></li>
<li><a href="#">Subscribe on Youtube</a></li>
</ul>
</li>
</ul>
I know how to modify these with links and text. But need to modify register, mailbox and login button.
1. Register button will only be visible for guests
2. login button will be logout button after login
3. Mail box button will confirm that there is a mail Like: "Mailbox [0]"
This is the CSS code
- Code:
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav10.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav11.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
/*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-webkit-border-bottom-right-radius: 05px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 05px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 05px;
border-bottom-left-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
-webkit-border-bottom-right-radius: 05px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 05px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 05px;
border-bottom-left-radius: 5px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
}
The jQuery code:(in overall_header after head section)
- Code:
<script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></script>
