Welcome to Geeklog, Anonymous Monday, November 25 2024 @ 02:46 am EST
Geeklog Forums
button style nav for theme developers
Status: Banned
machinari
Forum User
Full Member
Registered: 03/22/04
Posts: 1512
want the button look in your themes? without using buttons? CSS can do this for you. Implementing it into your themes is straightforward.
Here is a walk thru for user functions block in the professional theme.
put this bit into your theme's functions.php file:
put this bit into your theme's style sheet (style as you please):
.leftnav {
}
.buttons {
margin: 0px;
padding: 0;
}
ul.leftnav {
margin: 0px;
padding: 0;
list-style-image: none;
list-style-type: none;
font-size: 9pt;
}
ul.leftnav li {
padding: 1px 0px;
}
ul.leftnav li a{
display: block;
margin: 0px;
padding: 0px 0px 0px 3px;
width: 92%;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 1px solid #416E9B;
border-right: 1px solid #416E9B;
}
.leftnav a:link, .leftnav a:visited {
color: #0000FF;
text-decoration: none;
}
ul.leftnav li a:hover, ul.leftnav li.linkoff {
color: #27408a;
position: relative;
top: 1px;
left: 2px;
border-top: 2px solid #416E9B;
border-left: 2px solid #416E9B;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
/* end left nav buttons */
now create those template files (you can use these same files for any other blocks you want to do this for, e.g., admin, topics, etc.).
here is the header:
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="22" colspan="3" align="left" valign="middle" class="block-title-left">{block_title}<td align="right">{block_help}</td>
</tr><tr><td width="100%" class="buttons">
<ul class="leftnav">
and here is the footer:
</td></tr></table></td></tr></table>
<table cellspacing="0" cellpadding="0" align="center" width="90%" class="block-divider-left"><tr><td><img src="{site_url}/images/speck.gif" width="1" height="1" alt=""></td></tr></table>
notice I've only added a UL tag to already existing template files.
now edit your option template files...
here is useroption.thtml
and here is useroption_off.thtm (could prolly make this look like a depressed button if you want)l
this can be made to work with the "older stories" block as well, and other's like it--easier because they already utilize UL and LI.
see an example implemented into the professinal theme's topic block here
let me know what you think or if it even works in your browser..
Here is a walk thru for user functions block in the professional theme.
put this bit into your theme's functions.php file:
Text Formatted Code
$_BLOCK_TEMPLATE['user_block'] = 'navblockheader-left.thtml,navblockfooter-left.thtml';put this bit into your theme's style sheet (style as you please):
Text Formatted Code
/* begin left nav buttons*/.leftnav {
}
.buttons {
margin: 0px;
padding: 0;
}
ul.leftnav {
margin: 0px;
padding: 0;
list-style-image: none;
list-style-type: none;
font-size: 9pt;
}
ul.leftnav li {
padding: 1px 0px;
}
ul.leftnav li a{
display: block;
margin: 0px;
padding: 0px 0px 0px 3px;
width: 92%;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 1px solid #416E9B;
border-right: 1px solid #416E9B;
}
.leftnav a:link, .leftnav a:visited {
color: #0000FF;
text-decoration: none;
}
ul.leftnav li a:hover, ul.leftnav li.linkoff {
color: #27408a;
position: relative;
top: 1px;
left: 2px;
border-top: 2px solid #416E9B;
border-left: 2px solid #416E9B;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
/* end left nav buttons */
now create those template files (you can use these same files for any other blocks you want to do this for, e.g., admin, topics, etc.).
here is the header:
Text Formatted Code
<table width="100%" border="0" cellspacing="0" cellpadding="10" class="blocktable-left"><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="22" colspan="3" align="left" valign="middle" class="block-title-left">{block_title}<td align="right">{block_help}</td>
</tr><tr><td width="100%" class="buttons">
<ul class="leftnav">
and here is the footer:
Text Formatted Code
</ul></td></tr></table></td></tr></table>
<table cellspacing="0" cellpadding="0" align="center" width="90%" class="block-divider-left"><tr><td><img src="{site_url}/images/speck.gif" width="1" height="1" alt=""></td></tr></table>
now edit your option template files...
here is useroption.thtml
Text Formatted Code
<li><a href="{option_url}">{option_label} {option_count}</a></li>Text Formatted Code
<li class="linkoff">{option_label} {option_count}</li>this can be made to work with the "older stories" block as well, and other's like it--easier because they already utilize UL and LI.
see an example implemented into the professinal theme's topic block here
let me know what you think or if it even works in your browser..
11
13
Quote
All times are EST. The time is now 02:46 am.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content