Welcome to Geeklog Tuesday, July 16 2019 @ 09:06 pm EDT

Geeklog Forums

button style nav for theme developers


Status: offline

machinari

Forum User
Full Member
Registered: 22/03/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:
PHP 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):
PHP 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:
PHP 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:
PHP 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
PHP 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
PHP 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..

All times are EDT. The time is now 09:06 pm.

  • 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