Welcome to Geeklog, Anonymous Friday, March 29 2024 @ 03:39 am EDT

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:
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>







 
notice I've only added a UL tag to already existing template files.
now edit your option template files...
here is useroption.thtml
Text Formatted Code
<li><a href="{option_url}">{option_label} {option_count}</a></li>







 
and here is useroption_off.thtm (could prolly make this look like a depressed button if you want)l
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.. Giving it a try
 Quote

All times are EDT. The time is now 03:39 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