Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Hoochie Coochie Man on August 05, 2008, 05:37:39 AM

Title: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 05, 2008, 05:37:39 AM
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg103.imageshack.us%2Fimg103%2F1425%2F71848368se4.png&hash=c5a927ac9d9a219f6582b162d5f9548aa2c76d2e)

Live Demo (http://smfthemes.890m.com/forum/index.php?theme=27)

UserName: Test
Password: 123456

Narration for 1.1.5 SMF Default Theme




Hi, first of all open your theme's style.css, then we will add our codes for dropdown.

add to the end:
/* DropDownMenu */

div#menu {
left: 40px;
z-index: 11;
height: 39px;
background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left; 
}

div#menu li {
position: relative;
margin: 0px;
padding: 0px;
display: block;
float: left;
z-index: 5; 
font-weight: bold;
}

div#menu li a, #menu li span.separator {
height: 39px;
display: block;
float: left;
line-height: 32px;
text-decoration: none;
color: #FFFFFF;
}

div#menu li span { 
display: block;
}

div#menu li span { 
background-repeat: no-repeat;
background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #D2D2D2;
}

div#menu li.active { 
font-weight: bold;
}

div#menu li.active ul { 
font-weight: normal;
}

div#menu li.parent span.separator { 
cursor: pointer;
}


div#menu ul.menu {
padding-right: 1px;
background: url('images/sep_white.png') no-repeat 100% 0;
}

div#menu li.level1 {
background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
background: url('images/sep_black.png') no-repeat 100% 0;
color: #FFFFFF; /*Change your menu link color in here*/
font-size: 110%; /*Change your menu font size in here*/

}

div#menu a.level1 span, div#menu span.level1 span {
padding: 5px 20px 0px 20px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 { 
color: #aa1428;  /*Change your menu link hover color in here*/
font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
padding: 0px;
font-size: 60%;
font-weight: normal;
color: #969696;
margin-top: -6px;
line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
color: #ffffff;
}


div#menu ul.menu ul {
position: absolute;
top: 40px;
left: -999em; 
width: 165px;
        font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
left: 0px; 
z-index: 100;
}

div#menu li.level1 li {
    width: 100%; 
text-indent: 15px;
}


div#menu li.level1 li a, div#menu li.level1 li span.separator{
height: 25px;
padding: 0px;
margin: 0px 1px;;
background: #89A7C1; /*Change your submenu background color in here*/
float: none; 
display: block;
line-height: 25px
}





Now. Every theme have "menu tab section"..
We must remove our old tabs.
So remove from this..

// Show the start of the tab section.

till
there..

}

// Generate a strip of buttons.


I'm talking about that area:
// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_' , $first , '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>' , $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>' , $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>' , $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>' , $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>' , $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>' , $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>' , $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
</tr>
</table>';


Now, we must add aour new dropdown menu in here..
Here it is...

// Show the start of the tab section.
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">


            <div id="menu">
               <ul class="menu">
                     
                  <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>

                  <li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>';

                  // How about the [search] button?
                  if ($context['allow_search'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span><span class="title">' , $txt[182] , '</span></span></a></li>';

                  // Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span><span class="title">' , $txt[2] , '</span></span></a></li>';
                             
                  // Edit Profile... [profile]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span><span class="title">' , $txt[79] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>';


                  // Go to PM center... [pm]
                  if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>';


                  // The [calendar]!
                  if ($context['allow_calendar'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=calendar" class="level1"><span><span class="title">' , $txt['calendar24'] , '</span></span></a></li>';


                  // the [member] list button
                  if ($context['allow_memberlist'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=mlist" class="level1 parent"><span><span class="title">' , $txt[331] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
                  </ul></li>';

                           
                  // If the user is a guest, show [login] button.
                  if ($context['user']['is_guest'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
                  // If the user is a guest, also show [register] button.
                  if ($context['user']['is_guest'])
                  echo '
                                 <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                           
                  // Otherwise, they might want to [logout]...
                  if ($context['user']['is_logged'])
                  echo '
                      <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

            echo '
                            </ul>
                  </div>

</td>
</tr>
</table>';





Then, we must add our submenus' language strings.
Modifications.english.php
Find:
?>

Add before:
$txt['hcm_summary'] = 'Summary';
$txt['hcm_account'] = 'Account Settings';
$txt['hcm_forumProfile'] = 'Forum Profile';
$txt['hcm_readmessages'] = 'Read Your Messages';
$txt['hcm_sendmessage'] = 'Send A Message';
$txt['hcm_viewmembers'] = 'View The Memberlist';
$txt['hcm_searchmembers'] = 'Search For Members';


Finally upload the attached images to your theme file.




Another alternative dropdown menu. (http://www.simplemachines.org/community/index.php?topic=270727.msg1770699#msg1770699)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Eliana Tamerin on August 05, 2008, 07:14:28 AM
For me, it appears as a huge block instead of a horizontal list. See the attached screenshot.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 05, 2008, 07:30:40 AM
Did you add style codes to your style.css?
Also can you attach your index.template.php?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Eliana Tamerin on August 05, 2008, 07:37:32 AM
Attached both.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 05, 2008, 07:44:56 AM
Can you try new style codes?
Because I replace them 1.5 hours ago.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: babjusi on August 05, 2008, 07:47:48 AM
Nice work again HCM :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Nathaniel on August 05, 2008, 08:01:55 AM
Wow, Very nice HCM. Works perfectly! :D

For those that are using SMF 2 Beta, here is a quick edit that I did to make it work with the new version of SMF.

You will need to add the style code to the 'style.css' file as described above by HCM. But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta.

For SMF 2 Beta ONLY.

Find the 'template_menu()' function from your index.template.php
You should find some code like this:
    // Show the start of the tab section.

From then on, the function will have some html that serves only to create the buttons.

For the default theme, it looks like this:
    echo '
            <table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
                <tr>
                    <td class="maintab_' , $first , '">&nbsp;</td>';

    foreach ($context['menu_buttons'] as $act => $button)
        echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '                <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
                    <a href="', $button['href'], '">', $button['title'], '</a>
                </td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The end of tab section.
    echo '
                <td class="maintab_' , $last , '">&nbsp;</td>
            </tr>
        </table>';


Replace it with this code:
   // Show the start of the tab section.
   echo '
          <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                   <td class="catbg" height="32">
                    <div id="menu">
                           <ul class="menu">';
                       
    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
                             <li class="level1"><a href="', $button['href'], '" class="level1"><span><span class="title">' , $button['title'] , '</span></span></a>';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                            <ul class="level2">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                                 <li class="level2"><a href="', $sub_button['href'], '" class="level2"><span>' , $sub_button['title'] , '</span></a></li>';
            echo '
                            </ul>';
        }
       
        echo '
                            </li>';
    }
    echo '
                           </ul>
                    </div>
                 </td>
              </tr>
          </table>';


You will have to change it for custom themes, but you get the idea. :D

Thanks again, to HCM.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Angelotus on August 05, 2008, 08:03:20 AM
Hi, thanks everyone (Hoochie in particular ;) ). I have edited bits and pieces of the code to suite my needs. Please see the result at www.weeklyfun.nl (http://www.weeklyfun.nl/) (top horizontal navmenu). Ps for the dropwdown I used the DDscript.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 05, 2008, 08:06:06 AM
Thanks for comments guys. And also thank you very much for 2.0 convert @LHVWB
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Eliana Tamerin on August 05, 2008, 08:24:37 AM
Aha, it just needed a refresh. My bad.

Good work, HCM.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 05, 2008, 08:38:14 AM
Quote from: Eliana Tamerin on August 05, 2008, 08:24:37 AM
Aha, it just needed a refresh. My bad.

Good work, HCM.

Thanks..
I'm happy that you solved :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ccbtimewiz on August 05, 2008, 08:40:11 AM
A suggestion:

Maybe you could port this as a mod for the default theme? Might be very useful. :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 06, 2008, 06:36:37 AM
For DS-Natural Theme (http://custom.simplemachines.org/themes/index.php?lemma=749)

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg48.imageshack.us%2Fimg48%2F7584%2F66533799re5.jpg&hash=de1d8690b7d69dca8478ecd163f333828c8b397d)

index.template.php
Find:
// Show the start of the tab section.
echo '
<div id="topmenu">
<ul>';
// Show the [home] button.
echo '<li><a' , $current_action=='home' ? ' class="current"' : '' , ' href="', $scripturl, '"><span>' , $txt[103] , '</span></a></li>';

// Show the [help] button.
echo '<li><a' , $current_action=='help' ? ' class="current"' : '' , ' href="', $scripturl, '?action=help"><span>' , $txt[119] , '</span></a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li><a' , $current_action=='search' ? ' class="current"' : '' , ' href="', $scripturl, '?action=search"><span>' , $txt[182] , '</span></a></li>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<li><a' , $current_action=='calendar' ? ' class="current"' : '' , ' href="', $scripturl, '?action=calendar"><span>' , $txt['calendar24'] , '</span></a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li><a' , $current_action=='admin' ? ' class="current"' : '' , ' href="', $scripturl, '?action=admin"><span>' , $txt[2] , '</span></a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li><a' , $current_action=='profile' ? ' class="current"' : '' , ' href="', $scripturl, '?action=profile"><span>' , $txt[79] , '</span></a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li><a' , $current_action=='pm' ? ' class="current"' : '' , ' href="', $scripturl, '?action=pm"><span>' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li><a ' , $current_action=='mlist' ? ' class="current"' : '' , ' href="', $scripturl, '?action=mlist"><span>' , $txt[331] , '</span></a></li>';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo '<li><a ' , $current_action=='login' ? ' class="current"' : '' , ' href="', $scripturl, '?action=login"><span>' , $txt[34] , '</span></a></li>';

// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo '<li><a ' , $current_action=='register' ? ' class="current"' : '' , ' href="', $scripturl, '?action=register"><span>' , $txt[97] , '</span></a></li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li><a ' , $current_action=='logout' ? ' class="current"' : '' , 'href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span>' , $txt[108] , '</span></a></li>';

echo '
</ul>
</div>';


Replace:
// Show the start of the tab section.
echo '
<div id="topmenu">
               <ul class="menu">
                     
                  <li class="level1"><a' , $current_action=='home' ? ' class="current"' : '' , ' href="', $scripturl, '"><span class="title">' , $txt[103] , '</span></a></li>

                  <li class="level1"><a' , $current_action=='help' ? ' class="current"' : '' , ' href="', $scripturl, '?action=help"><span class="title">' , $txt[119] , '</span></a></li>';

                  // How about the [search] button?
                  if ($context['allow_search'])
                  echo '
                                  <li class="level1"><a' , $current_action=='search' ? ' class="current"' : '' , ' href="', $scripturl, '?action=search"><span class="title">' , $txt[182] , '</span></a></li>';

                  // Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a' , $current_action=='admin' ? ' class="current"' : '' , ' href="', $scripturl, '?action=admin"><span class="title">' , $txt[2] , '</span></a></li>';
                             
                  // Edit Profile... [profile]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a' , $current_action=='profile' ? ' class="current"' : '' , ' href="', $scripturl, '?action=profile"><span class="title">' , $txt[79] , '</span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>';


                  // Go to PM center... [pm]
                  if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo '
                                  <li class="level1 parent"><a' , $current_action=='pm' ? ' class="current"' : '' , ' href="', $scripturl, '?action=pm"><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>';


                  // The [calendar]!
                  if ($context['allow_calendar'])
                  echo '
                                  <li class="level1"><a' , $current_action=='calendar' ? ' class="current"' : '' , ' href="', $scripturl, '?action=calendar"><span class="title">' , $txt['calendar24'] , '</span></a></li>';


                  // the [member] list button
                  if ($context['allow_memberlist'])
                  echo '
                                  <li class="level1 parent"><a ' , $current_action=='mlist' ? ' class="current"' : '' , ' href="', $scripturl, '?action=mlist"><span class="title">' , $txt[331] , '</span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
                  </ul></li>';

                           
                  // If the user is a guest, show [login] button.
                  if ($context['user']['is_guest'])
                  echo '
                                  <li class="level1"><a ' , $current_action=='login' ? ' class="current"' : '' , ' href="', $scripturl, '?action=login"><span class="title">' , $txt[34] , '</span></a></li>';
                           
                  // If the user is a guest, also show [register] button.
                  if ($context['user']['is_guest'])
                  echo '
                                 <li class="level1"><a ' , $current_action=='register' ? ' class="current"' : '' , ' href="', $scripturl, '?action=register"><span class="title">' , $txt[97] , '</span></a></li>';
                           
                  // Otherwise, they might want to [logout]...
                  if ($context['user']['is_logged'])
                  echo '
                      <li class="level1"><a ' , $current_action=='logout' ? ' class="current"' : '' , 'href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span class="title">' , $txt[108] , '</span></a></li>';

            echo '
                            </ul>
</div>';


style.css
find topmenu codes:
#topmenu {
display: block;
position: relative;
height: 32px;
font-size: 11px;
text-transform: uppercase;
margin: 0;
float: left;
padding: 0;
}

#topmenu ul {
margin: 14px 0 0;
padding: 0;
list-style-type: none;
width: auto;
float: left;
}

#topmenu ul li {
display: block;
float: left;
margin: 0 2px;
}

#topmenu ul li a {
display: block;
float: left;
color: #444;
text-decoration: none;
padding: 0 0 0 10px;
height: 21px;
line-height: 21px;
}

#topmenu ul li a span {
padding: 0 9px 0 0;
}

#topmenu ul li a:hover {
color: #000;
}

#topmenu ul li a:hover span {}

#topmenu ul li a.current {
color: #fff;
background: #B94C16 url('images/custom/topmenu-on-l.png') no-repeat 0 0;
}

#topmenu ul li a.current span {
display: block;
width: auto;
background: #B94C16 url('images/custom/topmenu-on-r.png') no-repeat 100% 0;
}


Replace them with:
div#topmenu {
display: block;
position: relative;
height: 32px;
font-size: 11px;
text-transform: uppercase;
margin: 0;
float: left;
padding: 0;
}

div#topmenu ul {
margin: 14px 0 0;
padding: 0;
list-style-type: none;
width: auto;
float: left;
}

div#topmenu ul li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
}

div#topmenu ul li a {
display: block;
float: left;
color: #444;
text-decoration: none;
padding: 0 0 0 10px;
height: 21px;
line-height: 21px;
margin-bottom: 5px;
}

div#topmenu ul li a span {
padding: 0 9px 0 0;
}

div#topmenu ul li a:hover {
color: #000;
}

div#topmenu ul li a:hover span {}

div#topmenu ul li a.current {
color: #fff;
background: #B94C16 url('images/custom/topmenu-on-l.png') no-repeat 0 0;
}

div#topmenu ul li a.current span {
display: block;
width: auto;
background: #B94C16 url('images/custom/topmenu-on-r.png') no-repeat 100% 0;
}

div#topmenu a.level1 span, div#menu span.level1 span {
   padding: 7px 20px 0px 20px;
}

div#topmenu li:hover a.level1, div#topmenu li.sfhover a.level1, div#topmenu li:hover span.level1, div#topmenu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#topmenu li.active a.level1, div#topmenu li.active span.level1 {
   color: #aa1428;
   font-weight: bold;
}


div#topmenu a.level1 span.title, div#topmenu span.level1 span.title{
   padding: 0px;
}


div#topmenu a.level1 span.sub, div#topmenu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#topmenu li:hover a.level1 span.sub, div#topmenu li:hover span.level1 span.sub, div#topmenu li.sfhover a.level1 span.sub, div#topmenu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#topmenu ul.menu ul {
   position: absolute;
   top: 7px;
   left: -999em;
   width: 165px;
   font-size: 88%;
   background: #86867D;
}

div#topmenu li:hover ul, div#topmenu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#topmenu li.level1 li {
   width: 100%;
   text-indent: 15px;
}
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: BuЯЯЯЯaK on August 06, 2008, 07:14:33 AM
Nice work bro =)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 07, 2008, 07:10:42 AM
Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: HellBent on August 07, 2008, 08:42:56 AM
Hi, nice work HCM, this is just what I'm looking for.  However, I'd like to have drop down button for the arcade.

If possible it would drop down in this order:


Arcade (level 1)
Multiplayer Arcade (level 2)
SMF Chess (level 2)


Here's the what I came up with (I'm a noob) and I'm getting an error:

//the [Arcade Games] list button
                if ($context['allow_arcade'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=arcade" class="level1 parent"><span><span class="title">' , $txt['arcade'] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=multiplayer" class="level2"><span>' , $txt['mp13'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=chess" class="level2"><span>' , $txt['SMFchess'] , '</span></a></li>
                  </ul></li>';



But it's not working for me. I get template errors.  I tried it with a flash chat drop down too:

Flash Chat (level One)
SMF Gallery (level two)

and with the Help button:

Help
Search
Treasury

I did them all the same as the code I've shown you.  I assume it's because some of them in each list have different "contexts"  is there anything I can do to make it work even so?

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 07, 2008, 09:44:51 AM
Hi @HellBent

These are the codes that you lookin for..

Quote// New button... [BUTTON NAME]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="MAIN ITEM LINK" class="level1 parent"><span><span class="title">MAIN ITEM</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="ITEM 1 LINK" class="level2"><span>ITEM 1</span></a></li>
                      <li class="level2"><a href="ITEM 2 LINK" class="level2"><span>ITEM 2</span></a></li>
                      <li class="level2"><a href="ITEM 3 LINK" class="level2"><span>ITEM 3</span></a></li>
                  </ul></li>';

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ousu on August 07, 2008, 06:34:28 PM
Quote from: Hoochie Coochie Man on August 07, 2008, 07:10:42 AM
Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version
Please could you PM me after you see about this.

Thank you.
I will take a look in my free time.

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: HellBent on August 08, 2008, 08:50:36 AM
Oh wow, thanks Hoochie Coochie, I can't wait to try it out  :D

Quote from: Hoochie Coochie Man on August 07, 2008, 09:44:51 AM
Hi @HellBent

These are the codes that you lookin for..

Quote// New button... [BUTTON NAME]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="MAIN ITEM LINK" class="level1 parent"><span><span class="title">MAIN ITEM</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="ITEM 1 LINK" class="level2"><span>ITEM 1</span></a></li>
                      <li class="level2"><a href="ITEM 2 LINK" class="level2"><span>ITEM 2</span></a></li>
                      <li class="level2"><a href="ITEM 3 LINK" class="level2"><span>ITEM 3</span></a></li>
                  </ul></li>';


Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 08, 2008, 08:58:22 AM
Upps sorryy
@HellBent
Remove this on above codes:
if ($context['allow_edit_profile'])

@ousu
I will turn back to you when came back from music festival.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on August 09, 2008, 09:32:54 AM
Great work!! Thanks HCM, and thanks for the SMF 2.0 rework LHVWB.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on August 09, 2008, 08:14:04 PM
Is there a way to get the admin menu in SMF 2.0 to use the same style as this one (so they would both look and behave the same)?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Manu.G on August 10, 2008, 02:39:53 PM
That's what I was looking for the whole time, cause our menu of the forum is having to much links.

I'm using the OverView Multi 7 Theme and I tried to add the drop down menu to the index.template.php, but I wasn't successful.  :'(

I want to have a new button in the menu were our members can find:Is there a way for helping me?  ???
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2008, 05:51:17 PM
Did you also add the css changes and images?

Btw Hoochie, I haven't had a chance to play with Dilber much but it looks like it's the TP upshrinks that cause the problem I was having with IE. I'll figure out a workaround for it when I have the time, if someone else doesn't sort it first.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 11, 2008, 05:23:52 AM
Quote from: Hoochie Coochie Man on August 07, 2008, 07:10:42 AM
Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg50.imageshack.us%2Fimg50%2F263%2F92906024xe1.png&hash=cfbdd8f5327bf472eb867a291216038715266903)

Style.css
Add to the end
/*
* Drop Down Menu Feature
*/


div#menu {
   z-index: 11;
   height: 40px;
   background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   float: left;
}

div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
}

div#menu li a, #menu li span.separator {
   height: 40px;
   display: block;
   float: left;
   line-height: 32px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #444444;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_white.png') no-repeat 100% 0;
}

div#menu li.level1 {
   background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat 100% 0;
   color: #FFFFFF;
   font-size: 100%;
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 3px 20px 0px 20px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #444444;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;
   font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
   padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 90%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#menu ul.menu ul {
   position: absolute;
   top: 35px;
   left: -999em;
   width: 165px;
   font-size: 88%;
   background: url('images/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li:hover ul, div#menu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 15px;
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
   height: 25px;
   padding: 0px;
   margin: 0px 1px;;
   float: none;
   display: block;
   line-height: 25px
   background: url('images/menu_item.png') no-repeat 100% 0;
}


index.template.php
find:
echo '

<ul>';



// Show the [home] button.

echo '<li><a href="', $scripturl, '">' , $txt[103] , '</a></li>';



// Show the [help] button.

echo '<li><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';



// How about the [search] button?

if ($context['allow_search'])

echo '<li><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';



// Is the user allowed to administrate at all? ([admin])

if ($context['allow_admin'])

echo '<li><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';



// Edit Profile... [profile]

if ($context['allow_edit_profile'])

echo '<li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';



// Go to PM center... [pm]

if ($context['user']['is_logged'] && $context['allow_pm'])

echo '<li><a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';





// The [calendar]!

if ($context['allow_calendar'])

echo '<li><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';



// the [member] list button

if ($context['allow_memberlist'])

echo '<li><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';





// If the user is a guest, show [login] button.

if ($context['user']['is_guest'])

echo '<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';





// If the user is a guest, also show [register] button.

if ($context['user']['is_guest'])

echo '<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';





// Otherwise, they might want to [logout]...

if ($context['user']['is_logged'])

echo '<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';



echo '</ul>';


Replace:
         echo '
            <div id="menu">
               <ul class="menu">
                     
                  <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>

                  <li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>';

                  // How about the [search] button?
                  if ($context['allow_search'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span><span class="title">' , $txt[182] , '</span></span></a></li>';

                  // Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span><span class="title">' , $txt[2] , '</span></span></a></li>';
                             
                  // Edit Profile... [profile]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span><span class="title">' , $txt[79] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>';


                  // Go to PM center... [pm]
                  if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>';


                  // The [calendar]!
                  if ($context['allow_calendar'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=calendar" class="level1"><span><span class="title">' , $txt['calendar24'] , '</span></span></a></li>';


                  // the [member] list button
                  if ($context['allow_memberlist'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=mlist" class="level1 parent"><span><span class="title">' , $txt[331] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
                  </ul></li>';

                           
                  // If the user is a guest, show [login] button.
                  if ($context['user']['is_guest'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
                  // If the user is a guest, also show [register] button.
                  if ($context['user']['is_guest'])
                  echo '
                                 <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                           
                  // Otherwise, they might want to [logout]...
                  if ($context['user']['is_logged'])
                  echo '
                      <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

            echo '
                            </ul>
                  </div>';


find:
<div id="nav">',template_menu(),'

</div>


replace:
',template_menu(),'


Upload those pictures to your images folder

http://img50.imageshack.us/img50/1733/menubgok6.png (as menu_bg.png)
http://img527.imageshack.us/img527/10/menuitempw9.png (as menu_item.png)
and attached images of first post.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: mattz83 on August 11, 2008, 02:51:21 PM
How can I make the height of the button bar smaller?  This is what I'm talking about:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg291.imageshack.us%2Fimg291%2F8242%2Fcaptureva5.jpg&hash=b2e52160eccf344854453e3fd6cdb5d9bc8d0dbe)

I think I can keep messing with the CSS file and figure it out eventually, but if anyone knew exactly, it'd be a big help.

thanks.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 11, 2008, 03:12:36 PM
@mattz83

you can edit sep_black.png and sep_white.png height for that.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: mattz83 on August 11, 2008, 05:12:05 PM
Quote from: Hoochie Coochie Man on August 11, 2008, 03:12:36 PM
@mattz83

you can edit sep_black.png and sep_white.png height for that.

Thanks.. I have it about 80% setup like I want. This is a really useful tip. Hoever, I still have a couple of questions that maybe you can help me with...


How can I bridge the gap between the hover link and the dropdown menu as seen in this screen:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg440.imageshack.us%2Fimg440%2F3765%2F18562375wi8.png&hash=bda2011717300e35095c22652ca2d170df907f39)

Notice the gap between Profile and its dropdown menu? That's what I'm trying to fix.

Also, I'm wondering if you or anyone knew how I could add a small 1px border around the outside of the bar, that way it'd look a little more cleanly integrated with the site.

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on August 11, 2008, 05:32:39 PM
That gap is in a line height somewhere, but I can't remember exactly where.  :P

But this was a fantastic tip. I modified mine a bit to accommodate a horizontal submenu, which I think looks really professional. You can take a look at it HERE (http://www.empireofthesun.net/forum/index.php?action=menu_tip).

You can see the submenu by hovering over the TEST SITE button.
(No longer need to log in)

Thanks again for this info!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 11, 2008, 05:43:54 PM
Mattz, you need to add      border: 1px solid #FFFFFF;         to the relevant class in your css.

Without a link to your site I can't tell the class name but you should be able to find it yourself easily enough since you know which images are called in it.

For the drop height there will be a top margin or padding in the sub-menu hover class in css. Play with that.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 12, 2008, 02:20:10 AM
@mattz83

style.css
div#menu ul.menu ul {
   position: absolute;
   top: 40px;
   left: -999em;
   width: 165px;
   font-size: 88%;
}


Try to decrease 40
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: olma on August 12, 2008, 02:28:20 AM
Thanks for this, worked like a charm...well, almost.
Some of the users of my website are somewhat outdated and still uses IE6 (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.byaasenmusikkorps.no%2FSmileys%2Fstandard%2Fbanghead.gif&hash=69af97b3a62873b20a8563e1bb8c1c19bc988e8b)(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.byaasenmusikkorps.no%2FSmileys%2Fstandard%2Fbanghead.gif&hash=69af97b3a62873b20a8563e1bb8c1c19bc988e8b) and the dropdowns won't show there.

Any suggestions as to how I can fix it?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 12, 2008, 03:50:17 AM
Yes. Tell them to upgrade their browsers and in the meantime leave all critical functions in the standard toolbar format.

Let's face it, if they know there are things they want that and they'll be able to use if only they download one little tiny free browser then if they refuse to do that who is to blame for their predicament?

Seriously, why should you have to drive yourself nuts about it? We all know that even FF2 is faster, more stable and more secure than IE6.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: olma on August 12, 2008, 04:02:49 AM
Won't argue with that, and I've countless times asked them to at least upgrade to IE7 (where this menu works)
I'm using FF3 myself, and don't use IE at all if I can help it.
The thing is, the members ranges from 16-70 years and some don't now the first thing about upgrading anything...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on August 12, 2008, 04:24:49 AM
But it's so simple, just give this link..

http://www.microsoft.com/windows/downloads/ie/getitnow.mspx

30 seconds update :P
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 12, 2008, 04:29:14 AM
Exactly. If they can manage to turn their computer on and operate a mouse they can easily upgrade to IE7.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: olma on August 12, 2008, 04:31:39 AM
You (and I) wish  :P

I've given them the link, but I know some of them refuse to even try (no matter how simple it is)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 12, 2008, 04:33:54 AM
Quote from: olma on August 12, 2008, 04:31:39 AM
You (and I) wish  :P
I said they can. If they wont that is their responsibility, not yours.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 12, 2008, 04:49:10 AM
Olma, have you tried posting a short tutorial for your pet Luddites?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: olma on August 12, 2008, 04:53:44 AM
Haven't written an step-by-step tutorial, only given them the links to IE7 and FF3.
But it's on my to-do list, if my alterations to the menu doesn't work (I'll probably write it anyway).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 12, 2008, 05:01:04 AM
I think I'll do one as well. Can put it in the drop menu under the Help button.  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: mattz83 on August 14, 2008, 01:30:46 AM
Thanks for the help, guys. I never got the border around it quite like I wanted, there were still small gaps on the left and right of the actual bar before the first button begins. I just left it alone, it looks good enough without a border. Anyway, thanks again... nice tip.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: angrybanana5000 on August 15, 2008, 02:58:29 PM
Quote from: Hoochie Coochie Man on August 11, 2008, 05:23:52 AM
Quote from: Hoochie Coochie Man on August 07, 2008, 07:10:42 AM
Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.

<snip>
Could you post how to do this for SMF Beta 2 3.1? The other guide a few posts back didn't work for me :(
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: iGate on August 19, 2008, 08:43:48 AM
hey hoochie, wonderful stuff.

one question how does one get this to work with TP. i tried to replace my menu and the re-add the TP specific "forum" button, but it didn't work.

fyi: i am using mysic jade TP version.

thx
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: razorblitz07 on August 20, 2008, 10:52:05 PM
I'm having a bug over at http://fiestahq.sparkonline.net/forum/index.php

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg527.imageshack.us%2Fimg527%2F2831%2Fdropdownmenubugdf9.jpg&hash=4af03db863d65b7e79fe65eb30d5575e57c48adc)

When I hover over a link that is supposed to drop down, I can't click on the links in the sub-menu.  As soon as I move the cursor over to the sub-menu, the sub-menu disappears.  Takes a few tries to actually click on the sub-menu links without it going away.

There is also an image sticking out on the right-hand side of the navigation bar.  Don't know why it's like that.

Here are my files:

styles.css (http://www.megaupload.com/?d=MGZVW8Y8)
index.template.php (http://www.megaupload.com/?d=9AB46MKJ)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: BuЯЯЯЯaK on August 20, 2008, 11:14:05 PM
@razorblitz07

changed css  O:)

http://www.upload.gen.tr/d.php/s2/ot3gv3ny/styles.css.html

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: razorblitz07 on August 20, 2008, 11:29:44 PM
Awesome, works now!  What about that small rectangular image that was sticking out where the Logout button was supposed to end?  And this may sound weird but how do I put a background image on the bar?  I want it to be beveled.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: razorblitz07 on August 22, 2008, 01:39:32 AM
Alright well, I fixed the image sticking out problem and I got it so that their is a background image.  Now I have an issue with the background image repeating itself (table row height is too tall).  I don't know how but does anyone know how to reduce the height of the table row?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: angrybanana5000 on August 23, 2008, 09:56:08 PM
Quote from: angrybanana5000 on August 15, 2008, 02:58:29 PM
Quote from: Hoochie Coochie Man on August 11, 2008, 05:23:52 AM
Quote from: Hoochie Coochie Man on August 07, 2008, 07:10:42 AM
Quote from: ousu on August 07, 2008, 07:07:03 AM
How can I add this drop down menu for my Mystic jade theme and Iam using SMF 1.1.5 version

I will take a look in my free time.

<snip>
Could you post how to do this for SMF Beta 2 3.1? The other guide a few posts back didn't work for me :(

Anyone?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: pomai on August 24, 2008, 03:10:08 PM
Could any one help me?  I am using the default theme, all I want to do is add a drop down menu for my links, I have added a tab for my gallery and don't want to lose that.  I would like the link tab right before the logout tab??
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 24, 2008, 05:51:18 PM
Why don't you just put a basic drop menu form in one of the theme's top bars? Plenty of room for it there. The default theme's buttons are tiny and would look rather strange IMO if you added this menu to it. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: razorblitz07 on August 24, 2008, 08:11:29 PM
Does anyone know what property or code adjusts the height of the link buttons?  I want to reduce my table row height because the background image I put in repeated itself.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on August 27, 2008, 02:10:52 AM
@ razorblitz07

Try adjusting this part in your addition to the CSS

font-size: 110%; /*Change your menu font size in here*/



Quote from: SunKing on August 11, 2008, 05:32:39 PM
I modified mine a bit to accommodate a horizontal submenu......... You can take a look at it HERE (http://www.empireofthesun.net/forum/index.php?action=menu_tip)

Hi mate, do you mind sharing how you made the drop menu appear horizontal?
Or if anyone else would like to share :)

Thank You in advance :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: razorblitz07 on August 31, 2008, 11:09:53 PM
This is my CSS:


/* DropDownMenu */

div#menu {
   left: 40px;
   z-index: 11;
   height: 39px;
}

div#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   float: left;
}

div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
}

div#menu li a, #menu li span.separator {
   height: 37px;
   display: block;
   float: left;
   line-height: 35px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #D2D2D2;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


div#menu ul.menu {
   padding-right: 1px;

}

div#menu li.level1 {

}

div#menu a.level1, div#menu span.level1 {
   color: #FFFFFF; /*Change your menu link color in here*/
   font-size: 70%; /*Change your menu font size in here*/
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 0px 8px 0px 17.1px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
   padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#menu ul.menu ul {
   position: absolute;
   top: 40px;
   left: -999em;
   width: 160px;
        font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 15px;
}


div#menu li.level1 li a, div#menu li.level1 li span.separator {
   height: 25px;
   padding: 0px;
   margin: 0px 1px;
   margin-top:-5px;
   background: #89A7C1; /*Change your submenu background color in here*/
   float: none;
   display: block;
   line-height: 25px
}


This is what my menu looks like:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg214.imageshack.us%2Fimg214%2F9975%2Fdropdownmenuos8.jpg&hash=4e40b80cf840f489582b46313380555eea1171ff)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on September 01, 2008, 11:22:09 AM
Quote from: Sabre™ on August 27, 2008, 02:10:52 AM

Hi mate, do you mind sharing how you made the drop menu appear horizontal?
Or if anyone else would like to share :)

Thank You in advance :)

Somehow, I wasn't notified of a reply here. I will see about getting you step-by-step details on the horizontal menu soon. Sorry about that.  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on September 01, 2008, 06:57:44 PM
@ razorblitz07
Sorry bud, I can only point out looking at the prescribed areas of the code, and trial n era.
Thats how I got mine positioned to how I like, but also remember adjusting my header values aswell. My theme is different to yours, so may probably have a different structure.
Someone more knowledgeable than I should be able to assist you.
Good luck mate :)


@ SunKing
lol no problem buddy.
Im just glad you found your way to my post :)
Thank You in advance :)

« Next Edit: Tomorrow at 08:34:45 PM by SunKing »      <~~ Classic!! lol
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on September 01, 2008, 09:34:36 PM
Let's see. First, I grabbed a few menu scripts from CSSPlay (http://www.cssplay.co.uk/menus/). Then it was just a matter of comparing how the menu was set up here in this thread to the one I decided on from CSSPlay. Now, I use SMF 2.0 so I used the instructions provided by LHVWB found here (http://www.simplemachines.org/community/index.php?topic=253756.msg1646955#msg1646955).

I used one of the Pro Dropline (http://www.cssplay.co.uk/menus/pro_left_right_line.html) menus for mine, but it really doesn't matter, as they are all set up the same basic way. Copy the desired css stuff to your style.css. It will be found in the first part of the included .html from inside the menu.zip. Then, look at how the menu is set up. It's an unordered list just like the one described here. You just need to replace the parts of the script here with the corresponding parts from the new menu you just downloaded. You'll see what I mean ;) Last, don't forget to upload the images found in the .zip, and make sure the URLs in the <style> part match where you uploaded them to.

I did have to play around with some of the css like heights and widths, and also with some of the padding and such.

Here is the code for my menu exactly as I have it on my site.
this is from my index.template.php:

Code (template_menu()) Select
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

   // Show the start of the tab section.
   echo '
          <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                   <td class="catbg" style="border-left:1px solid #696969;border-right:1px solid #696969;" >
                    <div class="pro_linedrop">
                           <ul class="select">';
                       
    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
                             <li class="line"><a href="', $button['href'], '"><span><span class="title">' , $button['title'] , '</span></span><!--[if IE 7]><!--></a><!--<![endif]-->';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '<!--[if lte IE 6]><table><tr><td><![endif]-->
                            <ul class="sub">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                                 <li class="line2"><a href="', $sub_button['href'], '"><span style="">' , $sub_button['title'] , '</span></a></li>';
            echo '
                            </ul>
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->';
        }
       
        echo '
                            </li>';
    }
    echo '<img src="'.$settings['images_url'].'/parts/sep.png" height="28px" width="2px" />
                           </ul>
                    </div>
                 </td>
              </tr>
          </table>';
}


This is the css from my style.css:

Code (style.css) Select
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_left_right_line.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.pro_linedrop {
height:28px;
width:100%;
position:relative;
font-family:tahoma, sans-serif;
font-size:9px;
text-transform: uppercase;
font-weight:bold;
z-index:500;
}

.pro_linedrop .select {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}

.line {
background: url(../images/parts/sep.png) no-repeat 0 0;
}

.pro_linedrop li {
float:left;
}

.pro_linedrop li.lrt {
float:right;
}

.pro_linedrop .select a {
display:block;
height:28px; /* height of menu */
float:left;
padding:0 10px 0 10px;
text-decoration:none;
line-height:28px;
white-space:nowrap;
color:#fff;/*left text*/
}

.pro_linedrop .select a b {
display:block;
padding:0 30px 0 15px;
}

.pro_linedrop .select a:hover,
.pro_linedrop .select li:hover a {
padding:0 10px 0 10px;
cursor:pointer;
color:#fb0;
}

.pro_linedrop .select a:hover b,
.pro_linedrop .select li:hover a b {
display:block;
padding:0 30px 0 15px;
cursor:pointer;
}

.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_linedrop .sub {
margin:0;
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:22px;
display:block;
position:absolute;
float:left;
width:100%;
top:28px; /* sub-menu location */
left:0;
text-align:center;
background:url(../images/parts/titlebar.png);
border:1px solid #555;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a {
display:block;
height:22px;
line-height:22px;
float:left;
background:transparent url(line/transparent.gif);
padding:0 10px;
margin:0;
white-space:nowrap;
color:#333;
font-size:9px;
}

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#fb0;
line-height:22px;
position:relative;
}


And then I uploaded the images to forum/Themes/{my theme}/parts/.

That's it. Easier to do than to write!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: razorblitz07 on September 01, 2008, 10:27:58 PM
I fixed all the bugs that were on my navigation bar but now I'm trying to figure out how to reduce the height of the bar itself.  I want it shortened in height.  Making the font smaller doesn't affect the height at all.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on September 02, 2008, 09:32:24 AM
@ razorblitz

Look in your index.template and find this
   // Show the start of the tab section.
   echo '
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
               <td class="catbg" height="32">


Change the height value to whatever you like.
Use your other edits in the css(font etc etc) to adjust the text to the size, and position you like.

@ SunKing

Thanks mate.
Im in the process of a few tweaks, so will play with your code tomorrow.
Thank you for your time, and assistance mate :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on September 07, 2008, 09:21:06 AM
Looks nice, I'll test it later and then tell you how it works
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on September 07, 2008, 10:14:24 AM
Itried, but I can't get this working for Kelo-lt theme.
Please help?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 11, 2008, 07:33:42 AM
now i have a big problem...
i tried the code for a new button like the following one

                  //the [helplist] list button
LINE 640 ->   if ($context['allow_help'])

                  echo '
                   <li class="level1 parent"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">Hilfe</span></span></a>
                   <ul class="level2">
      <li class="level2"><a href="http://www.*************.de/index.php?pid=2" target="_blank" class="level2"><span>VK-Anleitung</span></a></li>
      <li class="level2"><a href="http://www.*******.de/cgi-bin/faqserver/user/FAQ******/index.pl" target="_blank" class="level2"><span>FAQs</span></a></li>
      <li class="level2"><a href="http://www.**********.de/index.php?pid=4" target="_blank" class="level2"><span>Unser Team</span></a></li>
      <li class="level2"><a href="http://www.**********.de/forum/index.php?topic=11673.msg59886#msg59886" class="level2"><span>Hausordnung</span></a></li>
      <li class="level2"><a href="', $scripturl, '?action=blog">', ($modSettings['blogMode'] == 3) ? $txt['Blogs'] : $txt['blog'], ' class="level2"><span><span class="title">Blog-Liste</span></span></a></li>
  <li class="level2"><a href="', $scripturl, '?action=bookmarks">' , $txt['bookmarks'] , ' class="level2"><span><span class="title">Lesezeichen-Liste</span></span></a></li>
                  </ul></li>';


then i get an parse error: unexpecting error in line 640 ';' or ','

so i deleted the Line 640 but then i get an error in the line echo'

can you tell me please what´s wrong

Jessi

using smf 1.1.5 with MKPortal
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 11, 2008, 08:34:20 AM
Most likely the closing tag of your preceding button is missing the '; after it.

You probably have </li> when if it's going in front of a context statement it should be </li>';
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 11, 2008, 08:54:40 AM
so you say i have to make a '; after each row of class level2 , right?

but the error is in this line ->  if ($context['allow_help'])
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 11, 2008, 09:36:31 AM
No. What I'm saying is that (correct me if I'm wrong here) you have a home button followed by a help button. That's the usual order.

Normally the help button doesn't have a context statement in front of it.
If it doesn't then the closing tag of the home button should just be </li>

However if you want to put a context statement after that you need to use </li>';

That's the correct syntax for php.

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 11, 2008, 09:41:22 AM
Oh and don't believe everything the error messages tell you. The error sometimes is not on the line it says. It can be before that. I'm just taking the next most obvious line.

What's the code for the button in front of your help button?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on September 11, 2008, 09:51:14 AM
What is above     //the [helplist] list button
That may be where you need to add   ';
It'd be easier if you uploaded your index.template for someone to look at, or show 5 lines above and below the error line.

Quote from: antechinus on September 11, 2008, 09:41:22 AM
Oh and don't believe everything the error messages tell you.

Edit: Sorry, I missed this
Quote from: antechinus on September 11, 2008, 09:41:22 AM
What's the code for the button in front of your help button?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 11, 2008, 10:29:26 AM
now i´m totally confused

i show you the whole index.template


Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on September 11, 2008, 10:36:38 AM
Find:
                  <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>

And replace whit:
                  <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>';
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 11, 2008, 10:42:26 AM
okay, i added the '; after the line and now i get now error ... great job thx

but the next problem is, that i can´t see this button in my forum

first the home-button and then the search-button but no help-button  :-[

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 11, 2008, 11:44:06 AM
wow, now i fixed the problem with the help-button

so i have one more problem with the linkmenu under the buttons

i try to descibe:

if i´m on my help-button the linktree will be shown but when i try to click on one of these links the menu get back
i think this problem is in the style.css because the main-button has a background but the underlink not

wher is the point to fix it

help please

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: babjusi on September 11, 2008, 01:00:20 PM
Why don''t you package it it up as a mod this HCM? I think that a lot of people will find it very useful
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 11, 2008, 03:28:24 PM
 :D i played with my css an fixed the problem

now it works fine - thx for all the help
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: espressoguy on September 12, 2008, 12:51:36 AM
When I go to the Demo Site to try the "Live Demo" from HCM's original post, there are several serious defects with it.  Does this work properly? Is it that someone has just done something to the demo (messed it up somehos)?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 12, 2008, 01:39:48 AM
I logged in and it seems ok. The only problem is that either the font-color is currently set the same as the drop menu background or the language strings are currently missing. Since it is a test site it's quite possible HCM has been messing around. The drops are still functioning though.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Panache Web on September 14, 2008, 06:43:42 PM
is there any way to mod this to 2.0 or create a mod for the menu for 2.0 instead of manually editing this?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Bugpac ™ on September 15, 2008, 04:54:01 PM
If you dont wanna mod it' Will you mod my files for me, I am lost doing that part...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Taragon on September 16, 2008, 01:11:26 AM
great work but unfortunately does not work with IE6, if this could be fixed then I think it would be a brilliant piece of code.

I know, tell people to upgrade, but from a marketing perspective of making the site viewable to the majority, that is not really a solution.

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 16, 2008, 03:14:17 AM
CSS based drop menus do not work with IE6. This has been covered several times in this thread and others. If you want drop menus in IE6 you'll need to use javascript, and of course that will not work with script blockers whereas CSS menus will. Take your pick.

The percentage of people still using IE6 is dropping rapidly and they are not the majority these days. They're still a significant minority but that will change in the near future.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: espressoguy on September 16, 2008, 11:31:23 AM
Well if you go over to www.cssplay.co.uk, he has lots of drop-down menus there that address the IE6 issue by Conditional Comments (HTML) - no javascript required.  I don't know how these drop-down menus look or work in IE6 but of course since so few people are using IE6, it seems that what really matters is that they should simply be able to get where they need to go one way or another (and upgrade to a decent browser if they want to get there with style). 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 16, 2008, 05:06:29 PM
I must admit I haven't played with his menus because the ones that interested me had too many conditions of use attached to them and the code isn't available in a convenient format. I'll fire up IE6 tonight and run it over a few of his menus.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: espressoguy on September 16, 2008, 05:51:07 PM
Great; I'd like to hear/see the result (screenshot w/description would be nice).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 16, 2008, 06:27:45 PM
Ran a quick check on them and they work. Interesting. I'll have to take a closer look at this.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on September 18, 2008, 02:54:42 PM
one question please

some User use IE6 and could only see the navigationbar they won´t be able to use the dropdowns

how can i fix this ?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: olma on September 18, 2008, 05:06:21 PM
Maybe you could try this?

Quote from: espressoguy on September 16, 2008, 11:31:23 AM
Well if you go over to www.cssplay.co.uk, he has lots of drop-down menus there that address the IE6 issue by Conditional Comments (HTML) - no javascript required.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on September 21, 2008, 08:26:17 AM
Here is your answer, taken from the second page.

Quote from: Hoochie Coochie Man on August 12, 2008, 02:20:10 AM
style.css
div#menu ul.menu ul {
   position: absolute;
   top: 40px;
   left: -999em;
   width: 165px;
   font-size: 88%;
}


Try to decrease 40
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 21, 2008, 08:37:58 AM
Quote from: razorblitz07 on August 20, 2008, 10:52:05 PM
I'm having a bug over at http://fiestahq.sparkonline.net/forum/index.php

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg527.imageshack.us%2Fimg527%2F2831%2Fdropdownmenubugdf9.jpg&hash=4af03db863d65b7e79fe65eb30d5575e57c48adc)

When I hover over a link that is supposed to drop down, I can't click on the links in the sub-menu.  As soon as I move the cursor over to the sub-menu, the sub-menu disappears.  Takes a few tries to actually click on the sub-menu links without it going away.

I've got the same problem. How did you solve it?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on September 21, 2008, 08:39:53 AM
Why do you keep deleting then posting this?
READ what I quoted.
That will fix it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 21, 2008, 09:44:58 AM
I already decreased it in order to get the correct space between menu and submenu but this is not the problem.

My code:
div#menu ul.menu ul {
                position: absolute;
                top: 35px;
left: -999em;
  width: 160px;
                font-size: 88%;
}
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on September 21, 2008, 10:13:36 AM
The dropdowns on your site work fine for me.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 21, 2008, 02:24:29 PM
Quote from: SunKing on September 21, 2008, 10:13:36 AM
The dropdowns on your site work fine for me.

The drop-down you see on my frontpage is a sugarfish drop-down menu for wordpress. I now would like install something similar for my SMF-Community side. If you are on the frontpage click on "community" in the navbar and you come to the side on which I also need a drop down.

Problem: When I install the drop-down from this topic it  looks good but when I hover over a link that is supposed to drop down, I can't click on the links in the sub-menu.  As soon as I move the cursor over to the sub-menu, the sub-menu disappears.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 22, 2008, 04:27:39 PM
Is there anybody who can help?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 22, 2008, 04:28:30 PM
Quote from: dailytalk on September 21, 2008, 08:37:58 AM
Quote from: razorblitz07 on August 20, 2008, 10:52:05 PM
I'm having a bug over at http://fiestahq.sparkonline.net/forum/index.php

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg527.imageshack.us%2Fimg527%2F2831%2Fdropdownmenubugdf9.jpg&hash=4af03db863d65b7e79fe65eb30d5575e57c48adc)

When I hover over a link that is supposed to drop down, I can't click on the links in the sub-menu.  As soon as I move the cursor over to the sub-menu, the sub-menu disappears.  Takes a few tries to actually click on the sub-menu links without it going away.

I've got the same problem. How did you solve it?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 24, 2008, 06:45:36 AM
Do you still have a gap between menu bar and the sub-menu, as illustrated in that screenshot? If you do that will be the cause of your problem.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 26, 2008, 02:40:15 PM
I think that I solved now the problem...I changed the code in bold from 25px to 20px:

Quotediv#menu li.level1 li a, div#menu li.level1 li span.separator{
   height: 20px;   
                padding: 0px;
                padding-bottom:10px;
   margin: 0px 1px;
   background: #89A7C1; /*Change your submenu background color in here*/
   float: none;
     display: block;   
                line-height: 25px;
}

Now it works.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 26, 2008, 04:58:40 PM
Just found a validation error....

echo '
                              <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>

</tr>
</table>';


Thats the message I get from the validator:
QuoteThe mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

You should not put a "<table>" element inside elements like "<a>", "<span>", or "<font>" but its exactly what the html-code of the dropdown menu does.

How can I solve that problem? (The code mentioned above causes this validation errors)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: matasanos on September 27, 2008, 06:09:44 AM
this rocks!!!!!!!!!!!!!

thanks awesome
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 27, 2008, 07:03:16 AM
Quote from: dailytalk on September 26, 2008, 04:58:40 PMYou should not put a "<table>" element inside elements like "<a>", "<span>", or "<font>" but its exactly what the html-code of the dropdown menu does.
No, it doesn't. Take a look. There is no mention of any of those elements ion the code you quoted, nor does the menu code put a table inside any of them when installed in a theme unless you have done something strange with it.

I'm running a lightly tweaked version of this menu in Mystic Multi and it passes validation.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 27, 2008, 02:25:23 PM
It doesn't? Whats that?

Go to the validator here:
http://validator.w3.org/

And make a check for this side:
http://www.dailytalk.ch/community/


The problem seem to be this code here:
// Show the start of the tab section.

echo ' <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>

<td class="catbg" height="32">   
         <div id="menu">       
       <ul class="menu">       
                               
<li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>                 
<li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>'; 
               
// How about the [search] button?                  if ($context['allow_search'])     
             echo '                             
    <li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span><span class="title">' , $txt[182] , '</span></span></a></li>';


The complete code you find on the first page of this topic. You can see table elements and span elements....so what does this tells you?


I have a problem with the IE7. The drop down goes under some elements and this doesn't look nice. Therefore I am looking for mistakes...first I made a validator check and found some mistakes...unfortunately the validator only says whats wrong but he does not give a solution for the problem....I really need something which work with all big browsers and not only with FF, Opera, Safari and Netscape. 60% of the visitors use IE....
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 28, 2008, 06:01:44 AM
That code is not putting a table inside a span or any of the other elements mentioned. It's doing it the other way around: putting the other elements inside a table. This is what I meant. The error message is telling you that there is a table inside a span (or whatever) when in fact there isn't. This means that the problem is something else.

Like I said I'm running a lightly tweaked version of this menu and the version I'm running passes both xhtml and css validation. It also functions flawlessly in IE7, so it can be done. I must admit I haven't tried getting Hoochie's code validated in its original form so I'm not going to speculate about that. I modified the code before submitting the theme for validation, but basically all I did was remove a few minor things I felt were unnecessary.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 28, 2008, 06:20:42 AM
I've just run an xhtml validation on the page you linked to and I didn't get the error mentioned in your post. Of course you may have changed some code since posting. In fact the source code seems rather different from what is shown in your post.

Why are you running a toolbar div with a table inside it and another div (#menu) inside that? I eliminated the table from my menu and run the menu div straight inside the toolbar div. Works perfectly.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: shadownexusruler on September 28, 2008, 10:01:24 AM
i want to add a drop down menu under the forum button of my mysticjadetp10 theme i want to put help,search,members,my messages all under the forum button could some one show me how to do it
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 28, 2008, 05:30:57 PM
Quote from: shadownexusruler on September 28, 2008, 10:01:24 AM
i want to add a drop down menu under the forum button of my mysticjadetp10 theme i want to put help,search,members,my messages all under the forum button could some one show me how to do it

Go to the default theme.  default/languages/Modifications.english.php (if you use other language change there as well example.... Modifications.german.php) and find the code here:

$txt['hcm_account'] = 'Account Settings';
$txt['hcm_forumProfile'] = 'Forum Profile';
$txt['hcm_readmessages'] = 'Read Your Messages';
$txt['hcm_sendmessage'] = 'Send A Message';
$txt['hcm_viewmembers'] = 'View The Memberlist';
$txt['hcm_searchmembers'] = 'Search For Members';

Than add code for submenus you want add....example:

$txt['hcm_summary'] = 'Summary';
$txt['hcm_Politik1']= 'Schweizer Politik';
$txt['hcm_Politik2']= 'Internationale Politik';
$txt['hcm_Politik3']= 'Umweltpolitik';

(You can see on my side)

Than go to the theme you are using and add in the indextemplate.php under the main menu button some submenus....

This must look similar to this:
    <li class="level1 parent"> <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a>
                                       <ul class="level2">   
                                      <li class="level2"><a href="', $scripturl, '?board=2.0" class="level2"><span>' , $txt['hcm_Politik1'] , '</span></a></li>   
                                      <li class="level2"><a href="', $scripturl, '?board=15.0" class="level2"><span>' , $txt['hcm_Politik2'] , '</span></a></li>
                                      <li class="level2"><a href="', $scripturl, '?board=17.0" class="level2"><span>' , $txt['hcm_Politik3'] , '</span></a></li>

                  </ul></li>';                 

So the parent is the main menu button...this here  $scripturl, '?board=2.0 is the link to the side you wanna link. In my example its board 2.0.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on September 28, 2008, 05:45:11 PM
Quote from: antechinus on September 28, 2008, 06:01:44 AM
That code is not putting a table inside a span or any of the other elements mentioned. It's doing it the other way around: putting the other elements inside a table. This is what I meant. The error message is telling you that there is a table inside a span (or whatever) when in fact there isn't. This means that the problem is something else.

Like I said I'm running a lightly tweaked version of this menu and the version I'm running passes both xhtml and css validation. It also functions flawlessly in IE7, so it can be done. I must admit I haven't tried getting Hoochie's code validated in its original form so I'm not going to speculate about that. I modified the code before submitting the theme for validation, but basically all I did was remove a few minor things I felt were unnecessary.

I still get 11 errors...coze I changed nothing. Did you really use the complete link?  You must really take the complete link including /community.

I took the code you find on the first side. Did you also make a W3C-Validator-Check for your side? I think you must have the same error message coze you should basically use the same code. (The code you find on the first page of this topic) Before I used the submenu code I had no W3C-Errors. (I know this for sure coze I still have the old index.template.php one just with another ending...

Regarding my IE7 Problem....the submenus go under the nav links.

On this side (http://www.dailytalk.ch/community/index.php?board=2.0) you can see what I mean when you move the cursor over the menu button "Übersicht".  (But only if you use IE with FF and the other browsers the problem doesn't exist.)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on September 28, 2008, 09:48:23 PM
Just wanted to say again what a great [tip] this is!!

I tweaked it so the drop down is a second level horizontal menu. Works great. I themed it using a menu from CSSplay (http://www.cssplay.co.uk/menus/) and it looks fantastic. I made it static, so when you scroll to the bottom of a long page, the menu is still right there!  ;D I have spent a long long time making it just the way I wanted it (http://www.empireofthesun.net) only to find out that IE really isn't webmaster friendly. It wouldn't render the dropdowns properly, so I commented them out so only non-IE browsers could see them. IE wouldn't even render the horizontal <UL> correctly, but I could not just comment out my site's menu. So, I had to comment out the "good" menu and comment in a sub-standard look-a-like that has no dropdowns, and therefore has none of the "extra" content located in those dropdowns.

My question is this. Is there a fool-proof way to get Internet Explorer (all versions) to render these menus as intended? I have read several pages on "workarounds", but I cannot seem to get any of them to "workaround" properly for everything.  :-\
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: doggymommy on September 28, 2008, 11:55:47 PM
Hi everyone!

I'm brand new to all this coding and everything.. I'm trying to learn as my summer project =) So I apologize in advance for my stupidity...

I would like a drop down menu with the arcade, chess, and multiplayer in it so it takes up less space because I had too many menu options and not enough space... I made a big mess trying to figure this out and I'm having to redo my menu bar. =( I'd like to have it say "Games" and then have "Arcade", Multiplayer Games", and Chess". I've read on this that there is a code for this but when I tried to do it it just made a block instead of a dropdown. Could someone give me a complete play by play in simple newbee girl language?

Thanks!!!
Oh... and I have TemTem theme
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 29, 2008, 03:48:50 AM
Quote from: dailytalk on September 28, 2008, 05:45:11 PMI still get 11 errors...coze I changed nothing. Did you really use the complete link?  You must really take the complete link including /community.
Yes I used the complete link. It was in your earlier post so I just clicked it and ran a validation once your site had loaded. I did get a stack of errors but not the one you mentioned (table inside span, etc).

QuoteI took the code you find on the first side. Did you also make a W3C-Validator-Check for your side? I think you must have the same error message coze you should basically use the same code. (The code you find on the first page of this topic) Before I used the submenu code I had no W3C-Errors. (I know this for sure coze I still have the old index.template.php one just with another ending...
Yes of course I ran a W3 validator check on my theme. I didn't have any choice. The infernal theme approval team here wont let me get away with shortcuts. ;)
Anyway there were no error messages. Like I said: it passes full css and xhtml validation.

QuoteRegarding my IE7 Problem....the submenus go under the nav links.

On this side (http://www.dailytalk.ch/community/index.php?board=2.0) you can see what I mean when you move the cursor over the menu button "Übersicht".  (But only if you use IE with FF and the other browsers the problem doesn't exist.)
Ok, I'll fire up Exploder and take a look.

ETA: Have you tried increasing the z-index setting for the drops? That may fix it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: shadownexusruler on September 29, 2008, 07:37:58 AM
that's nice and all but that didn't really help me for what i was asking about i wanted to add some thing's under the forum button like help,search ,profile, my messages, members i just need some some to create a code showing how's it could be done if someone wanta do it for me i will attach my index.template.php and modifications.English.php file i need this done for mysticjadetp10
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: matasanos on September 29, 2008, 11:48:03 AM
any tip/fox to make it works with IE6?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Hoochie Coochie Man on September 29, 2008, 12:47:56 PM
Quote from: matasanos on September 29, 2008, 11:48:03 AM
any tip/fox to make it works with IE6?
Nope!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 29, 2008, 05:05:08 PM
Quote from: matasanos on September 29, 2008, 11:48:03 AM
any tip/fox to make it works with IE6?
Yeah. Upgrade to IE7. Seriously. It's free. If they're too dumb to take advantage of it that's their problem.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: matasanos on September 30, 2008, 11:07:27 AM
Quote from: antechinus on September 29, 2008, 05:05:08 PM
Quote from: matasanos on September 29, 2008, 11:48:03 AM
any tip/fox to make it works with IE6?
Yeah. Upgrade to IE7. Seriously. It's free. If they're too dumb to take advantage of it that's their problem.

Yes, i know..but some users are too lazy..you know..internet is full of that kind of people
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 01, 2008, 07:44:29 PM
Quote from: doggymommy on September 28, 2008, 11:55:47 PM
Hi everyone!

I'm brand new to all this coding and everything.. I'm trying to learn as my summer project =) So I apologize in advance for my stupidity...

I would like a drop down menu with the arcade, chess, and multiplayer in it so it takes up less space because I had too many menu options and not enough space... I made a big mess trying to figure this out and I'm having to redo my menu bar. =( I'd like to have it say "Games" and then have "Arcade", Multiplayer Games", and Chess". I've read on this that there is a code for this but when I tried to do it it just made a block instead of a dropdown. Could someone give me a complete play by play in simple newbee girl language?

Thanks!!!
Oh... and I have TemTem theme
I'm not familiar with that theme but I'll have a look at it tonight. Shouldn't be any more difficult than any other theme. 

Btw, everyone starts out with no experience.  ;)

ETA: I've just manually searched the first twenty pages of the Themes Site (since the search function here has had the cactus) and I couldn't see the Tem Tem theme. If you can give me a link to the theme's thread I'll have a look at this for you.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: olma on October 02, 2008, 03:47:45 PM
Could it be this one?

http://custom.simplemachines.org/themes/index.php?lemma=518
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 02, 2008, 04:42:25 PM
Yup. That's it. Thanks.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: jepot5 on October 02, 2008, 11:48:22 PM
Hi,
I would like some help. I see that the code covers the whole menu.
I have customised my menu and I just want to add 2 buttons.
Affiliates and Navigation
and I the buttons should not have a link. If you click/hover on the button, it will just show the submenus.
And my menu uses images. I would like the main item to be images but not the sub item and you can hover on them to show the subitems.
I am using a custom theme for my site - http://custom.simplemachines.org/themes/index.php?lemma=101
(I have replaced the text Home, Profile, etc with images.)


Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 04, 2008, 05:33:14 PM
Quote from: doggymommy on September 28, 2008, 11:55:47 PM
Hi everyone!

I'm brand new to all this coding and everything.. I'm trying to learn as my summer project =) So I apologize in advance for my stupidity...

I would like a drop down menu with the arcade, chess, and multiplayer in it so it takes up less space because I had too many menu options and not enough space... I made a big mess trying to figure this out and I'm having to redo my menu bar. =( I'd like to have it say "Games" and then have "Arcade", Multiplayer Games", and Chess". I've read on this that there is a code for this but when I tried to do it it just made a block instead of a dropdown. Could someone give me a complete play by play in simple newbee girl language?

Thanks!!!
Oh... and I have TemTem theme
Sorted. The Donations button is set to display just before the login/logout buttons and Chess, Arcade and Multiplayer are in the drop underneath Games (which itself is just a blank button to hold the drop menu).

I've checked it on my local and it seems ok, but please note that I'm not going to get into doing mod support. If you need help with the actual mods please use the relevant mod thread as the mod authors know more about them than I do.

Anyway grab this zip (http://rapidshare.com/files/150961451/doggymommy.zip) and extract the files (index.template.php, style.css, images folder and languages folder) and upload/overwrite them into TemTem. Should be good to go once you have the actual mods installed.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: doggymommy on October 04, 2008, 09:02:15 PM
DUDE!!! That is so awesome! It's PERFECT!! Thank you SO much!!!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Nathaniel on October 04, 2008, 09:48:40 PM
As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

You will need to add the css style code to the 'style.css' file as described above by HCM in the first post (http://www.simplemachines.org/community/index.php?topic=253756.msg1646830#msg1646830). But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta 4. You will have to copy the images that are attached to that post as well. ;)

For SMF 2 Beta 4 ONLY.

Find the 'template_menu()' function from your index.template.php. The code in the function has the html that shows your menu.

For the default theme, it looks like this:
    echo '
    <div id="main_menu">
        <ul class="clearfix">';

    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li id="button_', $act, '">
                <a', $button['active_button'] ? ' class="active"' : '', ' title="', $act , '" href="', $button['href'], '">
                    <span', isset($button['is_last']) ? ' class="last"' : '', '>', ($button['active_button'] ? '<em>' : ''), $button['title'], ($button['active_button'] ? '</em>' : ''), '</span>
                </a>
            </li>';
    }

    echo '
        </ul>
    </div>';


Replace it with this code:
    echo '
    <div id="menu">
        <ul class="menu">';

    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li class="level1"><a href="', $button['href'], '" class="level1"><span><span class="title">' , $button['title'] , '</span></span></a>';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
            <ul class="level2">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li class="level2"><a href="', $sub_button['href'], '" class="level2"><span>' , $sub_button['title'] , '</span></a></li>';
            echo '
            </ul>';
        }
        echo '
            </li>';
    }
   
    echo '
        </ul>
    </div>';


Also this css fix is required so that it works for SMF 2 Beta 4. Make sure that you have added the css from the first post in this topic (http://www.simplemachines.org/community/index.php?topic=253756.msg1646830#msg1646830) before you try to make this edit.

Find this code from your 'style.css' file:
div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_white.png') no-repeat 100% 0;
}


Replace with this code:
div#menu ul.menu {
   padding-right: 1px;
   background: url(images/catbg.jpg) #88A6C0 repeat-x; /* Change your mainmenu background color/image here */
}


You will have to change the css code for custom themes, but you get the idea. :D

Edit: Updated code, there was a xhtml error with a closing </li> tag. Thank you to antechinus (http://www.simplemachines.org/community/index.php?action=profile;u=129726) for pointing it out. ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dailytalk on October 05, 2008, 09:49:53 AM
I just removed the trop down menu. Because of the many errors it is completley useless to me. I need code who follows W3C-standard.

Good luck guys, enjoy your drop down and be happy.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on October 05, 2008, 10:07:17 AM
Hmmm...
Seems to validate for me, but then Ive tweaked it also.
I dont recall any errors from the original code, but its too bad it didnt make you happy.
Quote from: dailytalk on October 05, 2008, 09:49:53 AMGood luck guys, enjoy your drop down and be happy.

Thank You :)
Nice to know someone cares  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 05, 2008, 10:17:18 AM
Quote from: dailytalk on October 05, 2008, 09:49:53 AM
I just removed the trop down menu. Because of the many errors it is completley useless to me. I need code who follows W3C-standard.

Good luck guys, enjoy your drop down and be happy.
I'm enjoying them. I've used them in a theme which has cracked 1,000 downloads and passes full validation so I assume other people are enjoying them too.

If you click the demo link I gave doggymommy you'd be able to run a validation on the modified TemTem. I hadn't bothered checking it before but I just did. No xhtml errors.

Mind you there are some css errors in the theme code but none of them are related to the new menu. I suppose I should correct those as well since it wouldn't be difficult.

Bottom line is if you want validation with these menus you can get it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 06, 2008, 06:41:45 PM
Very nice! But I get a problem once I replace the tab button's. Here's the error,

QuoteTemplate Parse Error!

There was a problem loading the /Themes/default/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.
--------------------------------------------------------------------------------


Parse error: syntax error, unexpected $end in .../Themes/default/index.template.php on line 596

587: if (empty($button_strip))
588: return '<td> </td>';
589:
590: echo '
591: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '"> </td>
592: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
593: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
594: }
595:
596: ?>
597:
598:
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 06, 2008, 07:16:50 PM
The error is somewhere else. It'll be back in the code you altered.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 06, 2008, 09:06:06 PM
More specifically, you have a { without a } somewhere.  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 06, 2008, 11:06:23 PM
Thank's, I got no error's but now my tab's wont even appear? Requesting help.  ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 06, 2008, 11:38:17 PM
We don't know what code you're running. Requesting attached files.  :P
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 06, 2008, 11:42:00 PM
Thank's for the help. :P

Here you go,

Rofl, how do I attach a file?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 06, 2008, 11:49:28 PM
Right below this box where you type your post it says additional options. Click on that...

Um....it used to be there...... :o
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 06, 2008, 11:57:04 PM
Sorry I forgot. You can't attach files in this board. Meh. Either throw your menu code up in code tags or start another thread in G&T or something.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 07, 2008, 03:55:12 PM
Here's my current,
<?php
// Version: 1.1.5; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context$settings$options$txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '1.1';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;
}

// The main sub template above the content.
function template_main_above()
{
global $context$settings$options$scripturl$txt$modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<link rel="shortcut icon" href=" '
$settings['images_url'] . '/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="'
$context['page_title'], '" />', empty($context['robot_no_index']) ? '' '
<meta name="robots" content="noindex" />'
'
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/script.js?fin11"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";
// ]]></script>
<title>'
$context['page_title'], '</title>';

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/print.css?fin11" media="print" />';


        
//NO right click for guest by NIBOGO
if ($modSettings['arrange_nrcg'])
{
        if (
$context['user']['is_guest'])           
        echo 
'
       <script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus ([email protected]) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="'
$txt['no_click'], '";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 
</script>'
;
}
/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)

Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/fonts-compat.css" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '

<link rel="contents" href="'
$scripturl'" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
{
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
}

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = '
, empty($options['collapse_header']) ? 'false' 'true'';

function shrinkHeader(mode)
{'
;

// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>'
;

// the routine for the info center upshrink
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header_ic = '
, empty($options['collapse_header_ic']) ? 'false' 'true'';

function shrinkHeaderIC(mode)
{'
;

if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>'
;

echo '
<div class="tborder" '
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' '''>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">'
;

if (empty($settings['header_logo_url']))
echo '
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">'
$context['forum_name'], '</span>';
else
echo '
<img src="'
$settings['header_logo_url'], '" style="margin: 4px;" alt="'$context['forum_name'], '" />';

echo '
</td>
<td align="right" class="catbg">
<img src="'
$settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>'
;


// display user name
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>'
;

if($context['user']['is_logged'])
echo '
<td class="titlebg2" height="32">
<span style="font-size: 130%;"> '
$txt['hello_member_ndt'], ' <b>'$context['user']['name'] , '</b></span>
</td>'
;

// display the time
echo '
<td class="titlebg2" height="32" align="right">
<span class="smalltext">' 
$context['current_time'], '</span>';

// this is the upshrink button for the user info section
echo '
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="'
$settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
</td>
</tr>
<tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' ' style="display: none;"''>
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>'
;

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">'
$context['user']['avatar']['image'], '</td>';

echo '
<td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a> <br />
<a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />';

}
// Otherwise they're a guest - send them a lovely greeting...
else
echo $txt['welcome_guest'];

// Now, onto our second set of info, are they logged in again?
if ($context['user']['is_logged'])
{
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<b>'
$txt[616], '</b><br />';
if (isset($context['user']['awaiting_mod']))
echo '<br /><a href="' $scripturl '?action=warnpmman">' $context['user']['awaiting_mod'] . '</a><br />';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
'
$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '<br />';

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
'
$txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}
echo ' </span>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo ' </span>
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>

<form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
$txt['smf53'], '</option>
<option value="1440">'
$txt['smf47'], '</option>
<option value="10080">'
$txt['smf48'], '</option>
<option value="43200">'
$txt['smf49'], '</option>
<option value="-1" selected="selected">'
$txt['smf50'], '</option>
</select>
<input type="submit" value="'
$txt[34], '" /><br />
<span class="middletext">'
$txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>'
;
}

echo '
</td>
</tr>
</table>
</td>
</tr>
</table>'
;

echo '
<table id="upshrinkHeader2"'
, empty($options['collapse_header']) ? '' ' style="display: none;"'' width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>'
;

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<td width="90%" class="titlebg2">
<span class="smalltext"><b>'
$txt[102], '</b>: '$context['random_news_line'], '</span>
</td>'
;
echo '
<td class="titlebg2" align="right" nowrap="nowrap" valign="top">
<form action="'
$scripturl'?action=search2" method="post" accept-charset="'$context['character_set'], '" style="margin: 0;">
<a href="'
$scripturl'?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="submit" name="submit" value="'
$txt[182], '" style="width: 11ex;" />
<input type="hidden" name="advanced" value="0" />'
;

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="'
$context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd['
$context['current_board'], ']" value="'$context['current_board'], '" />';

echo '
</form>
</td>
</tr>
</table>
</div>'
;


// Show the menu here, according to the menu sub template.
template_menu();


// The main content should go here.
echo '
<div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

function 
template_main_below()
{
global $context$settings$options$scripturl$txt;

echo '
</div>'
;

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function smfFooterHighlight(element, value)
{
element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
}
// ]]></script>
'
;
// Here is the Page View Mod
Pageview_counter(); echo '
     <table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'right' 'left''">
<a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="'
$settings['images_url'], '/powered-mysql.gif" alt="'$txt['powered_by_mysql'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://www.php.net/" target="_blank"><img id="powered-php" src="'
$settings['images_url'], '/powered-php.gif" alt="'$txt['powered_by_php'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
<td valign="middle" align="center" style="white-space: nowrap;">
'
theme_copyright(), '
</td>
<td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'left' 'right''">
<a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="'
$settings['images_url'], '/valid-xhtml10.gif" alt="'$txt['valid_xhtml'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="'
$settings['images_url'], '/valid-css.gif" alt="'$txt['valid_css'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
</tr>
</table>'
;

// Show the load time?
if ($context['show_load_time'])
echo '
<span class="smalltext">'
$txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '</span>';

// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
{
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
}'
;
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
}'
;
else
echo '
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
}'
;

echo '
// ]]></script>'
;
}

echo '
</div>'
;

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</body></html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context$settings$options;

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '&nbsp;>&nbsp;';
}

echo '</div>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context$settings$options$scripturl$txt;

// Work out where we currently are.
$current_action 'home';
if (in_array($context['current_action'], array('admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
$current_action 'admin';
if (in_array($context['current_action'], array('staff''admin''calendar''profile''mlist''register''login''pm''IRC')))
$current_action $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action 'search';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first 'last';
$last 'first';
}
else
{
$first 'first';
$last 'last';
}

// Show the start of the tab section.
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0">

<tr>
<td class="catbg" height="32">            
<div id="menu">               
<ul class="menu">                                       
<li class="level1">
<a href="'
$scripturl'" class="level1">
<span>
<span class="title">' 
$txt[103] , '
</span>
</span>
</a>
</li>
                  <li class="level1">
<a href="'
$scripturl'?action=help" class="level1">
<span>
<span class="title">' 
$txt[119] , '</span>
</span></a>
</li>'
;                  
// How about the [search] button?                
  
if ($context['allow_search'])             
     echo 
'            
                      <li class="level1">
<a href="'
$scripturl'?action=search" class="level1">
<span>
<span class="title">' 
$txt[182] , '</span>
</span></a></li>'
;                 
 
// Is the user allowed to administrate at all? ([admin])                
  
if ($context['allow_admin'])           
       echo 
'                                
  <li class="level1">
<a href="'
$scripturl'?action=admin" class="level1">
<span>
<span class="title">' 
$txt[2] , '</span></span>
</a></li>'
;                                              
 
// Edit Profile... [profile]               
   
if ($context['allow_edit_profile'])              
    echo 
'                            
      <li class="level1 parent">
<a href="'
$scripturl'?action=profile" class="level1 parent">
<span>
<span class="title">' 
$txt[79] , '</span>
</span>
</a>          
                        <ul class="level2">                     
 <li class="level2">
<a href="'
$scripturl'?action=profile" class="level2">
<span>' 
$txt['hcm_summary'] , '</span>
</a>
</li>                   
   <li class="level2">
<a href="'
$scripturl'?action=profile;sa=account" class="level2">
<span>' 
$txt['hcm_account'] , '</span>
</a>
</li>                      
<li class="level2">
<a href="'
$scripturl'?action=profile;sa=forumProfile" class="level2">
<span>' 
$txt['hcm_forumProfile'] , '
</span></a></li>                  
</ul></li>'
;                
  
// Go to PM center... [pm]                 
 
if ($context['user']['is_logged'] && $context['allow_pm'])            
      echo 
'                                  
<li class="level1 parent">
<a href="'
$scripturl'?action=pm" class="level1 parent">
<span>
<span class="title">' 
$txt['pm_short'] , ' '$context['user']['unread_messages'] > '[<strong>'$context['user']['unread_messages'] . '</strong>]' '' '</span></span></a>                                  <ul class="level2">                      <li class="level2">
<a href="'
$scripturl'?action=pm" class="level2"><span>' $txt['hcm_readmessages'] , '
</span></a></li>                    
  <li class="level2">
<a href="'
$scripturl'?action=pm;sa=send" class="level2">
<span>' 
$txt
['hcm_sendmessage'] , '</span></a></li>                  </ul></li>'
                 
// The [calendar]!                  
if ($context['allow_calendar'])               
  echo 
'                         
         <li class="level1">
<a href="'
$scripturl'?action=calendar" class="level1">
<span><span class="title">' 
$txt['calendar24'] , '</span>
</span></a></li>'
;                  
// the [member] list button
                  
if ($context['allow_memberlist'])                 
 echo 
'                                
  <li class="level1 parent">
<a href="'
$scripturl'?action=mlist" class="level1 parent">
<span>
<span class="title">' 
$txt[331] , '</span></span></a>                                  
<ul class="level2">                   
   <li class="level2">
<a href="'
$scripturl'?action=mlist" class="level2">
<span>' 
$txt
['hcm_viewmembers'] , '</span></a></li>                  
    <li class="level2">
<a href="'
$scripturl'?action=mlist;sa=search" class="level2">
<span>' 
$txt
['hcm_searchmembers'] , '</span></a></li>   
               </ul></li>'
;                                             
// If the user is a guest, show [login] button.                 
 
if ($context['user']['is_guest'])           
       echo 
'                                  
<li class="level1">
<a href="'
$scripturl'?action=login" class="level1">
<span><span class="title">' 
$txt[34] , '</span></span>
</a></li>'
;                                            
 
// If the user is a guest, also show [register] button.            
      
if ($context['user']['is_guest'])    
              echo 
'                         
        <li class="level1">
<a href="'
$scripturl'?action=register" class="level1">
<span>
<span class="title">' 
$txt[97] , '</span>
</span>
</a>
</li>'
;                                             
// Otherwise, they might want to [logout]...            
      
if ($context['user']['is_logged'])                 
 echo 
'                      
<li class="level1">
<a href="'
$scripturl'?action=logout;sesc='$context['session_id'], '" class="level1">
<span>
<span class="title">' 
$txt[108] , '</span></span></a></li>';
            echo 
'                          
  </ul>                  
</div>
</td>
</tr>
</table>
}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = '
top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['
test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '
<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '
<td>&nbsp;</td>';

echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';
}

?>
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 07, 2008, 04:23:39 PM
@ Project Evolution

<?php
// Version: 1.1.5; index

/*   This template is, perhaps, the most important template in the theme. It
   contains the main template layer that displays the header and footer of
   the forum, namely with main_above and main_below. It also contains the
   menu sub template, which appropriately displays the menu; the init sub
   template, which is there to set the theme up; (init can be missing.) and
   the linktree sub template, which sorts out the link tree.

   The init sub template should load any data and set any hardcoded options.

   The main_above sub template is what is shown above the main content, and
   should contain anything that should be shown up there.

   The main_below sub template, conversely, is shown after the main content.
   It should probably contain the copyright statement and some other things.

   The linktree sub template should display the link tree, using the data
   in the $context['linktree'] variable.

   The menu sub template should display all the relevant buttons the user
   wants and or needs.

   For more information on the templating system, please see the site at:
   http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
   global 
$context$settings$options$txt;

   
/* Use images from default theme when using templates from the default theme?
      if this is 'always', images from the default theme will be used.
      if this is 'defaults', images from the default theme will only be used with default templates.
      if this is 'never' or isn't set at all, images from the default theme will not be used. */
   
$settings['use_default_images'] = 'never';

   
/* What document type definition is being used? (for font size and other issues.)
      'xhtml' for an XHTML 1.0 document type definition.
      'html' for an HTML 4.01 document type definition. */
   
$settings['doctype'] = 'xhtml';

   
/* The version this template/theme is for.
      This should probably be the version of SMF it was created for. */
   
$settings['theme_version'] = '1.1';

   
/* Set a setting that tells the theme that it can render the tabs. */
   
$settings['use_tabs'] = true;

   
/* Use plain buttons - as oppossed to text buttons? */
   
$settings['use_buttons'] = true;

   
/* Show sticky and lock status seperate from topic icons? */
   
$settings['seperate_sticky_lock'] = true;
}

// The main sub template above the content.
function template_main_above()
{
   global 
$context$settings$options$scripturl$txt$modSettings;

   
// Show right to left and the character set for ease of translating.
   
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<link rel="shortcut icon" href=" '
$settings['images_url'] . '/favicon.ico">
   <meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
   <meta name="description" content="'
$context['page_title'], '" />', empty($context['robot_no_index']) ? '' '
   <meta name="robots" content="noindex" />'
'
   <meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
   <script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/script.js?fin11"></script>
   <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var smf_theme_url = "'
$settings['theme_url'], '";
      var smf_images_url = "'
$settings['images_url'], '";
      var smf_scripturl = "'
$scripturl'";
      var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
      var smf_charset = "'
$context['character_set'], '";
   // ]]></script>
   <title>'
$context['page_title'], '</title>';

   
// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
   
echo '
   <link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?fin11" />
   <link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/print.css?fin11" media="print" />';

   
        
//NO right click for guest by NIBOGO
      
if ($modSettings['arrange_nrcg'])
      {
        if (
$context['user']['is_guest'])           
        echo 
'
       <script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus ([email protected]) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="'
$txt['no_click'], '";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 
</script>'
;
}
/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)

      Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
      Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
      Standards compliance mode happens when you use xhtml... */
   
if ($context['browser']['needs_size_fix'])
      echo 
'
   <link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/fonts-compat.css" />';

   
// Show all the relative links, such as help, search, contents, and the like.
   
echo '

   <link rel="contents" href="'
$scripturl'" />';

   
// If RSS feeds are enabled, advertise the presence of one.
   
if (!empty($modSettings['xmlnews_enable']))
      echo 
'
   <link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

   
// If we're viewing a topic, these should be the previous and next topics, respectively.
   
if (!empty($context['current_topic']))
      echo 
'
   <link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
   <link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

   
// If we're in a board, or a topic for that matter, the index will be the board's index.
   
if (!empty($context['current_board']))
      echo 
'
   <link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

   
// We'll have to use the cookie to remember the header...
   
if ($context['user']['is_guest'])
   {
      
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
      
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
   }

   
// Output any remaining HTML headers. (from mods, maybe?)
   
echo $context['html_headers'], '

   <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var current_header = '
, empty($options['collapse_header']) ? 'false' 'true'';

      function shrinkHeader(mode)
      {'
;

   
// Guests don't have theme options!!
   
if ($context['user']['is_guest'])
      echo 
'
         document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
   else
      echo 
'
         smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "'
$context['session_id'], '");';

   echo 
'
         document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

         document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
         document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

         current_header = mode;
      }
   // ]]></script>'
;

   
// the routine for the info center upshrink
   
echo '
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
         var current_header_ic = '
, empty($options['collapse_header_ic']) ? 'false' 'true'';

         function shrinkHeaderIC(mode)
         {'
;

   if (
$context['user']['is_guest'])
      echo 
'
            document.cookie = "upshrinkIC=" + (mode ? 1 : 0);'
;
   else
      echo 
'
            smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "'
$context['session_id'], '");';

   echo 
'
            document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

            document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

            current_header_ic = mode;
         }
      // ]]></script>
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
   <link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>'
;

   echo 
'
   <div class="tborder" '
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' '''>
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td class="catbg" height="32">'
;

   if (empty(
$settings['header_logo_url']))
      echo 
'
               <span style="font-family: Verdana, sans-serif; font-size: 140%; ">'
$context['forum_name'], '</span>';
   else
      echo 
'
               <img src="'
$settings['header_logo_url'], '" style="margin: 4px;" alt="'$context['forum_name'], '" />';

   echo 
'
            </td>
            <td align="right" class="catbg">
               <img src="'
$settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
            </td>
         </tr>
      </table>'
;


   
// display user name
   
echo '
      <table width="100%" cellpadding="0" cellspacing="0" border="0" >
         <tr>'
;

   if(
$context['user']['is_logged'])
      echo 
'
            <td class="titlebg2" height="32">
               <span style="font-size: 130%;"> '
$txt['hello_member_ndt'], ' <b>'$context['user']['name'] , '</b></span>
            </td>'
;

   
// display the time
   
echo '
            <td class="titlebg2" height="32" align="right">
               <span class="smalltext">' 
$context['current_time'], '</span>';

   
// this is the upshrink button for the user info section
   
echo '
               <a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="'
$settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
            </td>
         </tr>
         <tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' ' style="display: none;"''>
            <td valign="top" colspan="2">
               <table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
                  <tr>'
;

   if (!empty(
$context['user']['avatar']))
      echo 
'
                     <td class="windowbg" valign="middle">'
$context['user']['avatar']['image'], '</td>';

   echo 
'
                     <td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

   
// If the user is logged in, display stuff like their name, new messages, etc.
   
if ($context['user']['is_logged'])
   {
      echo 
'
                        <a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a> <br />
                        <a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />';

   }
   
// Otherwise they're a guest - send them a lovely greeting...
   
else
      echo 
$txt['welcome_guest'];

   
// Now, onto our second set of info, are they logged in again?
   
if ($context['user']['is_logged'])
   {
      
// Is the forum in maintenance mode?
      
if ($context['in_maintenance'] && $context['user']['is_admin'])
         echo 
'
                        <b>'
$txt[616], '</b><br />';
      if (isset(
$context['user']['awaiting_mod']))
         echo 
'<br /><a href="' $scripturl '?action=warnpmman">' $context['user']['awaiting_mod'] . '</a><br />';

      
// Are there any members waiting for approval?
      
if (!empty($context['unapproved_members']))
         echo 
'
                        '
$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '<br />';

      
// Show the total time logged in?
      
if (!empty($context['user']['total_time_logged_in']))
      {
         echo 
'
                        '
$txt['totalTimeLogged1'];

         
// If days is just zero, don't bother to show it.
         
if ($context['user']['total_time_logged_in']['days'] > 0)
            echo 
$context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

         
// Same with hours - only show it if it's above zero.
         
if ($context['user']['total_time_logged_in']['hours'] > 0)
            echo 
$context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

         
// But, let's always show minutes - Time wasted here: 0 minutes ;).
         
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
      }
      echo 
'            </span>';
   }
   
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
   
else
   {
      echo 
'            </span>
                        <script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>

                        <form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
                           <input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
                           <select name="cookielength">
                              <option value="60">'
$txt['smf53'], '</option>
                              <option value="1440">'
$txt['smf47'], '</option>
                              <option value="10080">'
$txt['smf48'], '</option>
                              <option value="43200">'
$txt['smf49'], '</option>
                              <option value="-1" selected="selected">'
$txt['smf50'], '</option>
                           </select>
                           <input type="submit" value="'
$txt[34], '" /><br />
                           <span class="middletext">'
$txt['smf52'], '</span>
                           <input type="hidden" name="hash_passwrd" value="" />
                        </form>'
;
   }

   echo 
'
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>'
;

   echo 
'
      <table id="upshrinkHeader2"'
, empty($options['collapse_header']) ? '' ' style="display: none;"'' width="100%" cellpadding="4" cellspacing="0" border="0">
         <tr>'
;

   
// Show a random news item? (or you could pick one from news_lines...)
   
if (!empty($settings['enable_news']))
      echo 
'
            <td width="90%" class="titlebg2">
               <span class="smalltext"><b>'
$txt[102], '</b>: '$context['random_news_line'], '</span>
            </td>'
;
   echo 
'
            <td class="titlebg2" align="right" nowrap="nowrap" valign="top">
               <form action="'
$scripturl'?action=search2" method="post" accept-charset="'$context['character_set'], '" style="margin: 0;">
                  <a href="'
$scripturl'?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
                  <input type="text" name="search" value="" style="width: 190px;" />&nbsp;
                  <input type="submit" name="submit" value="'
$txt[182], '" style="width: 11ex;" />
                  <input type="hidden" name="advanced" value="0" />'
;

   
// Search within current topic?
   
if (!empty($context['current_topic']))
      echo 
'
                  <input type="hidden" name="topic" value="'
$context['current_topic'], '" />';

      
// If we're on a certain board, limit it to this board ;).
   
elseif (!empty($context['current_board']))
      echo 
'
                  <input type="hidden" name="brd['
$context['current_board'], ']" value="'$context['current_board'], '" />';

   echo 
'
               </form>
            </td>
         </tr>
      </table>
   </div>'
;


   
// Show the menu here, according to the menu sub template.
   
template_menu();


   
// The main content should go here.
   
echo '
   <div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

function 
template_main_below()
{
   global 
$context$settings$options$scripturl$txt;

   echo 
'
   </div>'
;

   
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
   
echo '

   <div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
         function smfFooterHighlight(element, value)
         {
            element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
         }
      // ]]></script>
'
;
// Here is the Page View Mod      
Pageview_counter(); echo '
          <table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
         <tr>
            <td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'right' 'left''">
               <a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="'
$settings['images_url'], '/powered-mysql.gif" alt="'$txt['powered_by_mysql'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
               <a href="http://www.php.net/" target="_blank"><img id="powered-php" src="'
$settings['images_url'], '/powered-php.gif" alt="'$txt['powered_by_php'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
            </td>
            <td valign="middle" align="center" style="white-space: nowrap;">
               '
theme_copyright(), '
            </td>
            <td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'left' 'right''">
               <a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="'
$settings['images_url'], '/valid-xhtml10.gif" alt="'$txt['valid_xhtml'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
               <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="'
$settings['images_url'], '/valid-css.gif" alt="'$txt['valid_css'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
            </td>
         </tr>
      </table>'
;

      
// Show the load time?
   
if ($context['show_load_time'])
      echo 
'
      <span class="smalltext">'
$txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '</span>';

   
// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
   
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
   {
      
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
      
echo '
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

      
// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
      
if ($context['browser']['is_safari'])
         echo 
'
         window.addEventListener("load", smf_codeFix, false);

         function smf_codeFix()
         {
            var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

            for (var i = 0; i < codeFix.length; i++)
            {
               if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
                  codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
            }
         }'
;
      elseif (
$context['browser']['is_firefox'])
         echo 
'
         window.addEventListener("load", smf_codeFix, false);
         function smf_codeFix()
         {
            var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

            for (var i = 0; i < codeFix.length; i++)
            {
               if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
                  codeFix[i].style.overflow = "scroll";
            }
         }'
;
      else
         echo 
'
         var window_oldOnload = window.onload;
         window.onload = smf_codeFix;

         function smf_codeFix()
         {
            var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

            for (var i = codeFix.length - 1; i > 0; i--)
            {
               if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
                  codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
            }

            if (window_oldOnload)
            {
               window_oldOnload();
               window_oldOnload = null;
            }
         }'
;

      echo 
'
      // ]]></script>'
;
   }

   echo 
'
   </div>'
;

   
// The following will be used to let the user know that some AJAX process is running
   
echo '
   <div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</body></html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
   global 
$context$settings$options;

   echo 
'<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

   
// Each tree item has a URL and name. Some may have extra_before and extra_after.
   
foreach ($context['linktree'] as $link_num => $tree)
   {
      
// Show something before the link?
      
if (isset($tree['extra_before']))
         echo 
$tree['extra_before'];

      
// Show the link, including a URL if it should have one.
      
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

      
// Show something after the link...?
      
if (isset($tree['extra_after']))
         echo 
$tree['extra_after'];

      
// Don't show a separator for the last one.
      
if ($link_num != count($context['linktree']) - 1)
         echo 
'&nbsp;>&nbsp;';
   }

   echo 
'</div>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global 
$context$settings$options$scripturl$txt;

   
// Work out where we currently are.
   
$current_action 'home';
   if (
in_array($context['current_action'], array('admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
      
$current_action 'admin';
   if (
in_array($context['current_action'], array('staff''admin''calendar''profile''mlist''register''login''pm''IRC')))
      
$current_action $context['current_action'];
   if (
$context['current_action'] == 'search2')
      
$current_action 'search';
   if (
$context['current_action'] == 'theme')
      
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

   
// Are we using right-to-left orientation?
   
if ($context['right_to_left'])
   {
      
$first 'last';
      
$last 'first';
   }
   else
   {
      
$first 'first';
      
$last 'last';
   }

   
// Show the start of the tab section.   
echo '      
   <table width="100%" cellpadding="0" cellspacing="0" border="0">   
      
   <tr>            
   <td class="catbg" height="32">            
<div id="menu">               
<ul class="menu">                                       
<li class="level1">
<a href="'
$scripturl'" class="level1">
<span>
<span class="title">' 
$txt[103] , '
</span>
</span>
</a>
</li>
                  <li class="level1">
<a href="'
$scripturl'?action=help" class="level1">
<span>
<span class="title">' 
$txt[119] , '</span>
</span></a>
</li>'
;                  
// How about the [search] button?                
  
if ($context['allow_search'])             
     echo 
'            
                      <li class="level1">
<a href="'
$scripturl'?action=search" class="level1">
<span>
<span class="title">' 
$txt[182] , '</span>
</span></a></li>'
;                 
 
// Is the user allowed to administrate at all? ([admin])                
  
if ($context['allow_admin'])           
       echo 
'                                
  <li class="level1">
<a href="'
$scripturl'?action=admin" class="level1">
<span>
<span class="title">' 
$txt[2] , '</span></span>
</a></li>'
;                                              
 
// Edit Profile... [profile]               
   
if ($context['allow_edit_profile'])              
    echo 
'                            
      <li class="level1 parent">
<a href="'
$scripturl'?action=profile" class="level1 parent">
<span>
<span class="title">' 
$txt[79] , '</span>
</span>
</a>          
                        <ul class="level2">                     
 <li class="level2">
<a href="'
$scripturl'?action=profile" class="level2">
<span>' 
$txt['hcm_summary'] , '</span>
</a>
</li>                   
   <li class="level2">
<a href="'
$scripturl'?action=profile;sa=account" class="level2">
<span>' 
$txt['hcm_account'] , '</span>
</a>
</li>                      
<li class="level2">
<a href="'
$scripturl'?action=profile;sa=forumProfile" class="level2">
<span>' 
$txt['hcm_forumProfile'] , '
</span></a></li>                  
</ul></li>'
;                
  
// Go to PM center... [pm]                 
 
if ($context['user']['is_logged'] && $context['allow_pm'])            
      echo 
'                                  
<li class="level1 parent">
<a href="'
$scripturl'?action=pm" class="level1 parent">
<span>
<span class="title">' 
$txt['pm_short'] , ' '$context['user']['unread_messages'] > '[<strong>'$context['user']['unread_messages'] . '</strong>]' '' '</span></span></a>                                  <ul class="level2">                      <li class="level2">
<a href="'
$scripturl'?action=pm" class="level2"><span>' $txt['hcm_readmessages'] , '
</span></a></li>                    
  <li class="level2">
<a href="'
$scripturl'?action=pm;sa=send" class="level2">
<span>' 
$txt
['hcm_sendmessage'] , '</span></a></li>                  </ul></li>'
                 
// The [calendar]!                  
if ($context['allow_calendar'])               
  echo 
'                         
         <li class="level1">
<a href="'
$scripturl'?action=calendar" class="level1">
<span><span class="title">' 
$txt['calendar24'] , '</span>
</span></a></li>'
;                  
// the [member] list button
                  
if ($context['allow_memberlist'])                 
 echo 
'                                
  <li class="level1 parent">
<a href="'
$scripturl'?action=mlist" class="level1 parent">
<span>
<span class="title">' 
$txt[331] , '</span></span></a>                                  
<ul class="level2">                   
   <li class="level2">
<a href="'
$scripturl'?action=mlist" class="level2">
<span>' 
$txt
['hcm_viewmembers'] , '</span></a></li>                  
    <li class="level2">
<a href="'
$scripturl'?action=mlist;sa=search" class="level2">
<span>' 
$txt
['hcm_searchmembers'] , '</span></a></li>   
               </ul></li>'
;                                             
// If the user is a guest, show [login] button.                 
 
if ($context['user']['is_guest'])           
       echo 
'                                  
<li class="level1">
<a href="'
$scripturl'?action=login" class="level1">
<span><span class="title">' 
$txt[34] , '</span></span>
</a></li>'
;                                            
 
// If the user is a guest, also show [register] button.            
      
if ($context['user']['is_guest'])    
              echo 
'                         
        <li class="level1">
<a href="'
$scripturl'?action=register" class="level1">
<span>
<span class="title">' 
$txt[97] , '</span>
</span>
</a>
</li>'
;                                             
// Otherwise, they might want to [logout]...            
      
if ($context['user']['is_logged'])                 
 echo 
'                      
<li class="level1">
<a href="'
$scripturl'?action=logout;sesc='$context['session_id'], '" class="level1">
<span>
<span class="title">' 
$txt[108] , '</span></span></a></li>';
            echo 
'                          
  </ul>                  
</div>               
</td>            
</tr>         
</table>'
;
}

// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
   global 
$settings$buttons$context$txt$scripturl;

   
// Create the buttons...
   
foreach ($button_strip as $key => $value)
   {
      if (isset(
$value['test']) && empty($context[$value['test']]))
      {
         unset(
$button_strip[$key]);
         continue;
      }
      elseif (!isset(
$buttons[$key]) || $force_reset)
         
$buttons[$key] = '<a href="' $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' $txt[$value['text']] . '</a>';

      
$button_strip[$key] = $buttons[$key];
   }

   if (empty(
$button_strip))
      return 
'<td>&nbsp;</td>';

   echo 
'
      <td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'last' 'first' '">&nbsp;</td>
      <td class="'
$direction == 'top' 'main' 'mirror''tab_back">'implode(' &nbsp;|&nbsp; '$button_strip) , '</td>
      <td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'first' 'last' '">&nbsp;</td>;
}

?>


Should be all fixed now.  :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 07, 2008, 04:43:28 PM
QuoteUnable to load the 'main_above' template

Thank's anyway's.  :(
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 07, 2008, 04:47:58 PM
Let me take a closer look at it then. I just noticed a missing '; and figured that was the only problem.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 07, 2008, 04:57:12 PM
OK. Sorry about that. I found another syntax error at the end of the file. I have fixed it AND tested it on my 1.1.x test site and it works fine now.


<?php
// Version: 1.1.5; index

/*   This template is, perhaps, the most important template in the theme. It
   contains the main template layer that displays the header and footer of
   the forum, namely with main_above and main_below. It also contains the
   menu sub template, which appropriately displays the menu; the init sub
   template, which is there to set the theme up; (init can be missing.) and
   the linktree sub template, which sorts out the link tree.

   The init sub template should load any data and set any hardcoded options.

   The main_above sub template is what is shown above the main content, and
   should contain anything that should be shown up there.

   The main_below sub template, conversely, is shown after the main content.
   It should probably contain the copyright statement and some other things.

   The linktree sub template should display the link tree, using the data
   in the $context['linktree'] variable.

   The menu sub template should display all the relevant buttons the user
   wants and or needs.

   For more information on the templating system, please see the site at:
   http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
   global 
$context$settings$options$txt;

   
/* Use images from default theme when using templates from the default theme?
      if this is 'always', images from the default theme will be used.
      if this is 'defaults', images from the default theme will only be used with default templates.
      if this is 'never' or isn't set at all, images from the default theme will not be used. */
   
$settings['use_default_images'] = 'never';

   
/* What document type definition is being used? (for font size and other issues.)
      'xhtml' for an XHTML 1.0 document type definition.
      'html' for an HTML 4.01 document type definition. */
   
$settings['doctype'] = 'xhtml';

   
/* The version this template/theme is for.
      This should probably be the version of SMF it was created for. */
   
$settings['theme_version'] = '1.1';

   
/* Set a setting that tells the theme that it can render the tabs. */
   
$settings['use_tabs'] = true;

   
/* Use plain buttons - as oppossed to text buttons? */
   
$settings['use_buttons'] = true;

   
/* Show sticky and lock status seperate from topic icons? */
   
$settings['seperate_sticky_lock'] = true;
}

// The main sub template above the content.
function template_main_above()
{
   global 
$context$settings$options$scripturl$txt$modSettings;

   
// Show right to left and the character set for ease of translating.
   
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<link rel="shortcut icon" href=" '
$settings['images_url'] . '/favicon.ico">
   <meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
   <meta name="description" content="'
$context['page_title'], '" />', empty($context['robot_no_index']) ? '' '
   <meta name="robots" content="noindex" />'
'
   <meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
   <script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/script.js?fin11"></script>
   <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var smf_theme_url = "'
$settings['theme_url'], '";
      var smf_images_url = "'
$settings['images_url'], '";
      var smf_scripturl = "'
$scripturl'";
      var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
      var smf_charset = "'
$context['character_set'], '";
   // ]]></script>
   <title>'
$context['page_title'], '</title>';

   
// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
   
echo '
   <link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?fin11" />
   <link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/print.css?fin11" media="print" />';

   
        
//NO right click for guest by NIBOGO
      
if ($modSettings['arrange_nrcg'])
      {
        if (
$context['user']['is_guest'])           
        echo 
'
       <script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus ([email protected]) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="'
$txt['no_click'], '";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 
</script>'
;
}
/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)

      Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
      Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
      Standards compliance mode happens when you use xhtml... */
   
if ($context['browser']['needs_size_fix'])
      echo 
'
   <link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/fonts-compat.css" />';

   
// Show all the relative links, such as help, search, contents, and the like.
   
echo '

   <link rel="contents" href="'
$scripturl'" />';

   
// If RSS feeds are enabled, advertise the presence of one.
   
if (!empty($modSettings['xmlnews_enable']))
      echo 
'
   <link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

   
// If we're viewing a topic, these should be the previous and next topics, respectively.
   
if (!empty($context['current_topic']))
      echo 
'
   <link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
   <link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

   
// If we're in a board, or a topic for that matter, the index will be the board's index.
   
if (!empty($context['current_board']))
      echo 
'
   <link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

   
// We'll have to use the cookie to remember the header...
   
if ($context['user']['is_guest'])
   {
      
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
      
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
   }

   
// Output any remaining HTML headers. (from mods, maybe?)
   
echo $context['html_headers'], '

   <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var current_header = '
, empty($options['collapse_header']) ? 'false' 'true'';

      function shrinkHeader(mode)
      {'
;

   
// Guests don't have theme options!!
   
if ($context['user']['is_guest'])
      echo 
'
         document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
   else
      echo 
'
         smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "'
$context['session_id'], '");';

   echo 
'
         document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

         document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
         document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

         current_header = mode;
      }
   // ]]></script>'
;

   
// the routine for the info center upshrink
   
echo '
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
         var current_header_ic = '
, empty($options['collapse_header_ic']) ? 'false' 'true'';

         function shrinkHeaderIC(mode)
         {'
;

   if (
$context['user']['is_guest'])
      echo 
'
            document.cookie = "upshrinkIC=" + (mode ? 1 : 0);'
;
   else
      echo 
'
            smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "'
$context['session_id'], '");';

   echo 
'
            document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

            document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

            current_header_ic = mode;
         }
      // ]]></script>
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
   <link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>'
;

   echo 
'
   <div class="tborder" '
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' '''>
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td class="catbg" height="32">'
;

   if (empty(
$settings['header_logo_url']))
      echo 
'
               <span style="font-family: Verdana, sans-serif; font-size: 140%; ">'
$context['forum_name'], '</span>';
   else
      echo 
'
               <img src="'
$settings['header_logo_url'], '" style="margin: 4px;" alt="'$context['forum_name'], '" />';

   echo 
'
            </td>
            <td align="right" class="catbg">
               <img src="'
$settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
            </td>
         </tr>
      </table>'
;


   
// display user name
   
echo '
      <table width="100%" cellpadding="0" cellspacing="0" border="0" >
         <tr>'
;

   if(
$context['user']['is_logged'])
      echo 
'
            <td class="titlebg2" height="32">
               <span style="font-size: 130%;"> '
$txt['hello_member_ndt'], ' <b>'$context['user']['name'] , '</b></span>
            </td>'
;

   
// display the time
   
echo '
            <td class="titlebg2" height="32" align="right">
               <span class="smalltext">' 
$context['current_time'], '</span>';

   
// this is the upshrink button for the user info section
   
echo '
               <a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="'
$settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
            </td>
         </tr>
         <tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' ' style="display: none;"''>
            <td valign="top" colspan="2">
               <table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
                  <tr>'
;

   if (!empty(
$context['user']['avatar']))
      echo 
'
                     <td class="windowbg" valign="middle">'
$context['user']['avatar']['image'], '</td>';

   echo 
'
                     <td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

   
// If the user is logged in, display stuff like their name, new messages, etc.
   
if ($context['user']['is_logged'])
   {
      echo 
'
                        <a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a> <br />
                        <a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />';

   }
   
// Otherwise they're a guest - send them a lovely greeting...
   
else
      echo 
$txt['welcome_guest'];

   
// Now, onto our second set of info, are they logged in again?
   
if ($context['user']['is_logged'])
   {
      
// Is the forum in maintenance mode?
      
if ($context['in_maintenance'] && $context['user']['is_admin'])
         echo 
'
                        <b>'
$txt[616], '</b><br />';
      if (isset(
$context['user']['awaiting_mod']))
         echo 
'<br /><a href="' $scripturl '?action=warnpmman">' $context['user']['awaiting_mod'] . '</a><br />';

      
// Are there any members waiting for approval?
      
if (!empty($context['unapproved_members']))
         echo 
'
                        '
$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '<br />';

      
// Show the total time logged in?
      
if (!empty($context['user']['total_time_logged_in']))
      {
         echo 
'
                        '
$txt['totalTimeLogged1'];

         
// If days is just zero, don't bother to show it.
         
if ($context['user']['total_time_logged_in']['days'] > 0)
            echo 
$context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

         
// Same with hours - only show it if it's above zero.
         
if ($context['user']['total_time_logged_in']['hours'] > 0)
            echo 
$context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

         
// But, let's always show minutes - Time wasted here: 0 minutes ;).
         
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
      }
      echo 
'            </span>';
   }
   
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
   
else
   {
      echo 
'            </span>
                        <script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>

                        <form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
                           <input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
                           <select name="cookielength">
                              <option value="60">'
$txt['smf53'], '</option>
                              <option value="1440">'
$txt['smf47'], '</option>
                              <option value="10080">'
$txt['smf48'], '</option>
                              <option value="43200">'
$txt['smf49'], '</option>
                              <option value="-1" selected="selected">'
$txt['smf50'], '</option>
                           </select>
                           <input type="submit" value="'
$txt[34], '" /><br />
                           <span class="middletext">'
$txt['smf52'], '</span>
                           <input type="hidden" name="hash_passwrd" value="" />
                        </form>'
;
   }

   echo 
'
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>'
;

   echo 
'
      <table id="upshrinkHeader2"'
, empty($options['collapse_header']) ? '' ' style="display: none;"'' width="100%" cellpadding="4" cellspacing="0" border="0">
         <tr>'
;

   
// Show a random news item? (or you could pick one from news_lines...)
   
if (!empty($settings['enable_news']))
      echo 
'
            <td width="90%" class="titlebg2">
               <span class="smalltext"><b>'
$txt[102], '</b>: '$context['random_news_line'], '</span>
            </td>'
;
   echo 
'
            <td class="titlebg2" align="right" nowrap="nowrap" valign="top">
               <form action="'
$scripturl'?action=search2" method="post" accept-charset="'$context['character_set'], '" style="margin: 0;">
                  <a href="'
$scripturl'?action=search;advanced"><img src="'.$settings['images_url'].'/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
                  <input type="text" name="search" value="" style="width: 190px;" />&nbsp;
                  <input type="submit" name="submit" value="'
$txt[182], '" style="width: 11ex;" />
                  <input type="hidden" name="advanced" value="0" />'
;

   
// Search within current topic?
   
if (!empty($context['current_topic']))
      echo 
'
                  <input type="hidden" name="topic" value="'
$context['current_topic'], '" />';

      
// If we're on a certain board, limit it to this board ;).
   
elseif (!empty($context['current_board']))
      echo 
'
                  <input type="hidden" name="brd['
$context['current_board'], ']" value="'$context['current_board'], '" />';

   echo 
'
               </form>
            </td>
         </tr>
      </table>
   </div>'
;


   
// Show the menu here, according to the menu sub template.
   
template_menu();


   
// The main content should go here.
   
echo '
   <div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

function 
template_main_below()
{
   global 
$context$settings$options$scripturl$txt;

   echo 
'
   </div>'
;

   
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
   
echo '

   <div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
         function smfFooterHighlight(element, value)
         {
            element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
         }
      // ]]></script>
'
;
// Here is the Page View Mod      
Pageview_counter(); echo '
          <table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
         <tr>
            <td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'right' 'left''">
               <a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="'
$settings['images_url'], '/powered-mysql.gif" alt="'$txt['powered_by_mysql'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
               <a href="http://www.php.net/" target="_blank"><img id="powered-php" src="'
$settings['images_url'], '/powered-php.gif" alt="'$txt['powered_by_php'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
            </td>
            <td valign="middle" align="center" style="white-space: nowrap;">
               '
theme_copyright(), '
            </td>
            <td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'left' 'right''">
               <a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="'
$settings['images_url'], '/valid-xhtml10.gif" alt="'$txt['valid_xhtml'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
               <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="'
$settings['images_url'], '/valid-css.gif" alt="'$txt['valid_css'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
            </td>
         </tr>
      </table>'
;

      
// Show the load time?
   
if ($context['show_load_time'])
      echo 
'
      <span class="smalltext">'
$txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '</span>';

   
// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
   
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
   {
      
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
      
echo '
      <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

      
// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
      
if ($context['browser']['is_safari'])
         echo 
'
         window.addEventListener("load", smf_codeFix, false);

         function smf_codeFix()
         {
            var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

            for (var i = 0; i < codeFix.length; i++)
            {
               if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
                  codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
            }
         }'
;
      elseif (
$context['browser']['is_firefox'])
         echo 
'
         window.addEventListener("load", smf_codeFix, false);
         function smf_codeFix()
         {
            var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

            for (var i = 0; i < codeFix.length; i++)
            {
               if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
                  codeFix[i].style.overflow = "scroll";
            }
         }'
;
      else
         echo 
'
         var window_oldOnload = window.onload;
         window.onload = smf_codeFix;

         function smf_codeFix()
         {
            var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

            for (var i = codeFix.length - 1; i > 0; i--)
            {
               if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
                  codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
            }

            if (window_oldOnload)
            {
               window_oldOnload();
               window_oldOnload = null;
            }
         }'
;

      echo 
'
      // ]]></script>'
;
   }

   echo 
'
   </div>'
;

   
// The following will be used to let the user know that some AJAX process is running
   
echo '
   <div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</body></html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
   global 
$context$settings$options;

   echo 
'<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

   
// Each tree item has a URL and name. Some may have extra_before and extra_after.
   
foreach ($context['linktree'] as $link_num => $tree)
   {
      
// Show something before the link?
      
if (isset($tree['extra_before']))
         echo 
$tree['extra_before'];

      
// Show the link, including a URL if it should have one.
      
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

      
// Show something after the link...?
      
if (isset($tree['extra_after']))
         echo 
$tree['extra_after'];

      
// Don't show a separator for the last one.
      
if ($link_num != count($context['linktree']) - 1)
         echo 
'&nbsp;>&nbsp;';
   }

   echo 
'</div>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global 
$context$settings$options$scripturl$txt;

   
// Work out where we currently are.
   
$current_action 'home';
   if (
in_array($context['current_action'], array('admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
      
$current_action 'admin';
   if (
in_array($context['current_action'], array('staff''admin''calendar''profile''mlist''register''login''pm''IRC')))
      
$current_action $context['current_action'];
   if (
$context['current_action'] == 'search2')
      
$current_action 'search';
   if (
$context['current_action'] == 'theme')
      
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

   
// Are we using right-to-left orientation?
   
if ($context['right_to_left'])
   {
      
$first 'last';
      
$last 'first';
   }
   else
   {
      
$first 'first';
      
$last 'last';
   }

   
// Show the start of the tab section.   
echo '      
   <table width="100%" cellpadding="0" cellspacing="0" border="0">   
      
   <tr>            
   <td class="catbg" height="32">            
<div id="menu">               
<ul class="menu">                                       
<li class="level1">
<a href="'
$scripturl'" class="level1">
<span>
<span class="title">' 
$txt[103] , '
</span>
</span>
</a>
</li>
                  <li class="level1">
<a href="'
$scripturl'?action=help" class="level1">
<span>
<span class="title">' 
$txt[119] , '</span>
</span></a>
</li>'
;                  
// How about the [search] button?                
  
if ($context['allow_search'])             
     echo 
'            
                      <li class="level1">
<a href="'
$scripturl'?action=search" class="level1">
<span>
<span class="title">' 
$txt[182] , '</span>
</span></a></li>'
;                 
 
// Is the user allowed to administrate at all? ([admin])                
  
if ($context['allow_admin'])           
       echo 
'                                
  <li class="level1">
<a href="'
$scripturl'?action=admin" class="level1">
<span>
<span class="title">' 
$txt[2] , '</span></span>
</a></li>'
;                                              
 
// Edit Profile... [profile]               
   
if ($context['allow_edit_profile'])              
    echo 
'                            
      <li class="level1 parent">
<a href="'
$scripturl'?action=profile" class="level1 parent">
<span>
<span class="title">' 
$txt[79] , '</span>
</span>
</a>          
                        <ul class="level2">                     
 <li class="level2">
<a href="'
$scripturl'?action=profile" class="level2">
<span>' 
$txt['hcm_summary'] , '</span>
</a>
</li>                   
   <li class="level2">
<a href="'
$scripturl'?action=profile;sa=account" class="level2">
<span>' 
$txt['hcm_account'] , '</span>
</a>
</li>                      
<li class="level2">
<a href="'
$scripturl'?action=profile;sa=forumProfile" class="level2">
<span>' 
$txt['hcm_forumProfile'] , '
</span></a></li>                  
</ul></li>'
;                
  
// Go to PM center... [pm]                 
 
if ($context['user']['is_logged'] && $context['allow_pm'])            
      echo 
'                                  
<li class="level1 parent">
<a href="'
$scripturl'?action=pm" class="level1 parent">
<span>
<span class="title">' 
$txt['pm_short'] , ' '$context['user']['unread_messages'] > '[<strong>'$context['user']['unread_messages'] . '</strong>]' '' '</span></span></a>                                  <ul class="level2">                      <li class="level2">
<a href="'
$scripturl'?action=pm" class="level2"><span>' $txt['hcm_readmessages'] , '
</span></a></li>                    
  <li class="level2">
<a href="'
$scripturl'?action=pm;sa=send" class="level2">
<span>' 
$txt
['hcm_sendmessage'] , '</span></a></li>                  </ul></li>'
                 
// The [calendar]!                  
if ($context['allow_calendar'])               
  echo 
'                         
         <li class="level1">
<a href="'
$scripturl'?action=calendar" class="level1">
<span><span class="title">' 
$txt['calendar24'] , '</span>
</span></a></li>'
;                  
// the [member] list button
                  
if ($context['allow_memberlist'])                 
 echo 
'                                
  <li class="level1 parent">
<a href="'
$scripturl'?action=mlist" class="level1 parent">
<span>
<span class="title">' 
$txt[331] , '</span></span></a>                                  
<ul class="level2">                   
   <li class="level2">
<a href="'
$scripturl'?action=mlist" class="level2">
<span>' 
$txt
['hcm_viewmembers'] , '</span></a></li>                  
    <li class="level2">
<a href="'
$scripturl'?action=mlist;sa=search" class="level2">
<span>' 
$txt
['hcm_searchmembers'] , '</span></a></li>   
               </ul></li>'
;                                             
// If the user is a guest, show [login] button.                 
 
if ($context['user']['is_guest'])           
       echo 
'                                  
<li class="level1">
<a href="'
$scripturl'?action=login" class="level1">
<span><span class="title">' 
$txt[34] , '</span></span>
</a></li>'
;                                            
 
// If the user is a guest, also show [register] button.            
      
if ($context['user']['is_guest'])    
              echo 
'                         
        <li class="level1">
<a href="'
$scripturl'?action=register" class="level1">
<span>
<span class="title">' 
$txt[97] , '</span>
</span>
</a>
</li>'
;                                             
// Otherwise, they might want to [logout]...            
      
if ($context['user']['is_logged'])                 
 echo 
'                      
<li class="level1">
<a href="'
$scripturl'?action=logout;sesc='$context['session_id'], '" class="level1">
<span>
<span class="title">' 
$txt[108] , '</span></span></a></li>';
            echo 
'                          
  </ul>                  
</div>               
</td>            
</tr>         
</table>'
;
}

// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
   global 
$settings$buttons$context$txt$scripturl;

   
// Create the buttons...
   
foreach ($button_strip as $key => $value)
   {
      if (isset(
$value['test']) && empty($context[$value['test']]))
      {
         unset(
$button_strip[$key]);
         continue;
      }
      elseif (!isset(
$buttons[$key]) || $force_reset)
         
$buttons[$key] = '<a href="' $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' $txt[$value['text']] . '</a>';

      
$button_strip[$key] = $buttons[$key];
   }

   if (empty(
$button_strip))
      return 
'<td>&nbsp;</td>';

   echo 
'
      <td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'last' 'first' '">&nbsp;</td>
      <td class="'
$direction == 'top' 'main' 'mirror''tab_back">'implode(' &nbsp;|&nbsp; '$button_strip) , '</td>
      <td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'first' 'last' '">&nbsp;</td>';
}

?>
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on October 07, 2008, 04:57:52 PM
Hey there SunKing.
Remember how I asked how you got the horizontal drop on your forum, and you gave me all that info?  Well Ive been trying to get it to work all this time! lol
Im just no good with code  ???

Could I steal you away sometime, and ask you to do one for me?
I'll do the rest, I just need one on my template, to guide me.

Understandable if you dont want to, or dont have the time :)

Cheers
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 07, 2008, 05:02:28 PM
Hey sabre! I wouldn't mind at all. I may not have it done in 10 minutes due to being a little busy, but I could get it to you eventually.....lol

PM me details such as site URL and detailed description of what you want.  :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 07, 2008, 05:18:25 PM
Thank's a lot for helping! But I seem to get the same error. Maybe my 1.1.6 version is'nt compatible?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 07, 2008, 05:35:28 PM
The site I tested your index.template.php on is running SMF1.1.6. Something else must be fouling the site. You can see your index.template.php being used on my 1.1.6 test site by clicking HERE (http://www.empireofthesun.net/testsite1/index.php) (I will leave it up for a few days). The only thing not working is the menu being displayed horizontally due to the fact that I do not have the CSS in place, but it does work.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 07, 2008, 05:37:55 PM
Look's a little different from what the thread creator put..
But has'nt someone have that problem earlier?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 07, 2008, 05:46:03 PM
Like I said, the look is different because I don't have the CSS stuff for it added to my style.css.

I have now added this so you can see what I mean. DEMO (http://www.empireofthesun.net/testsite1/index.php) I noticed that the drop-downs themselves don't have links, but that is simple to adjust.....but more importantly, I have no errors.

EDIT: The links are there, they are just the same color as the background. I'll fix this too right now.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on October 07, 2008, 06:03:07 PM
Quote from: SunKing on October 07, 2008, 05:02:28 PM
Hey sabre! I wouldn't mind at all. I may not have it done in 10 minutes due to being a little busy, but I could get it to you eventually.....lol

PM me details such as site URL and detailed description of what you want.  :D

Awesome mate!
Thank You very much!
Pm sent :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Neons on October 08, 2008, 11:45:40 AM
How do I make this work with DzinerStudio's Outline (http://www.dzinerstudio.com/index.php?action=tpmod;dl=item82)?

Thanks :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jakki on October 08, 2008, 01:40:11 PM
Here's a good question for you....
How would one add an image to the main parent button...
Let's use the forum button? Say one would like to have a pic of a notebook beside the word forum, how would you code that?

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Asshandler on October 08, 2008, 01:52:07 PM
I'd like to install this, but my problem lies in the fact that my style.css looks nothing like the one shown in the OP here.

/* Normal, standard links. */
a:link
{
color: #476C8E;
text-decoration: none;
}
a:visited
{
color: #476C8E;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #cc3333;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
background: url("images/background2.jpg") #CFD4DA;
background-repeat: repeat-x;
margin: 0px;
padding: 12px 30px 4px 30px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #000000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: normal;
color: #000000;
font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}

/* No image should have a border when linked */
a img
{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
background: url(images/quote_bg.png) 5px 5px no-repeat #F0F3FC; border: 1px solid #AAA; margin: 1px; padding: 5px 5px 5px 28px; font-size: x-small; line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000000;
background-color: #ECEDF3;
}

.windowbg_hover:hover,.windowbg_hoverHover
{
background: #A5B2BC;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}

.windowbg2_hover:hover,.windowbg2_hoverHover
{
background: #E0E6E6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
.windowbg_hover3:hover,.windowbg_hover3Hover
{
background: #829AA6;
}
.mail_hover:hover,.mail_hoverHover
{
background: #A5B2BC;
}

/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: black;
font-style: normal;
background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/

.catbglogo
{
background: #000000;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}


.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/catbg.jpg) #88A6C0 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error
{
color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background: url(images/maintab_first.gif) left bottom no-repeat;
width: 10px;
}
.maintab_back
{
background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
background: url(images/maintab_last.gif) left bottom no-repeat;
width: 8px;
}
.maintab_active_first
{
background: url(images/maintab_active_first.gif) left bottom no-repeat;
width: 6px;
}
.maintab_active_back
{
background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
background: url(images/maintab_active_last.gif) left bottom no-repeat;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: url(images/mirrortab_first.gif) no-repeat;
width: 10px;
}
.mirrortab_back
{
background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
background: url(images/mirrortab_last.gif) no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background: url(images/mirrortab_active_first.gif) no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
background: url(images/mirrortab_active_last.gif) no-repeat;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}

/* The AJAX notifier */
#ajax_in_progress
{
background: #32CD32;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
fieldset.spoiler
{
border: 1px dashed gray;
}

fieldset.spoiler > legend
{
font-size: 1.2em;
}

div.spoilerheader a
{
font-family: sans-serif;
font-size: 1.1em;
font-weight: bold;
}

div.spoilerheader input
{
background-color: #cececc;
color: #3e3e33;
font: 0.9em sans-serif;
}

div.spoilerbody
{
color: #0f0f0f;
border: 1px dotted gray;
padding: 1em;
margin: 1em;
}

fieldset.spoiler div.spoilerbody
{
border: 0px;
padding: 0em;
}


As you can see, it features noone of the lines of code the OP instructs me to replace, so I don't know what to do.

Any tips are appreciated.  :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 08, 2008, 02:30:30 PM
@ Jakki
in between the <a> and </a> of the button, just before the actual button name, you could add something like  <img src="URL_TO_YOUR_IMAGE" />&nbsp;&nbsp;.

@ Asshandler
The code listed in the OP needs to be added to the end of your style.css. Basically, it should have both blocks of code in it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 08, 2008, 04:42:30 PM
Quote from: neon401 on October 08, 2008, 11:45:40 AM
How do I make this work with DzinerStudio's Outline (http://www.dzinerstudio.com/index.php?action=tpmod;dl=item82)?

Thanks :)
I've already done it with another drop menu code: http://custom.simplemachines.org/themes/index.php?lemma=991

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Asshandler on October 08, 2008, 05:00:21 PM
Quote from: SunKing on October 08, 2008, 02:30:30 PM

@ Asshandler
The code listed in the OP needs to be added to the end of your style.css. Basically, it should have both blocks of code in it.

I was referring to the section of code pertaining to the removal of old menu tabs.

// Show the start of the tab section.
// Generate a strip of buttons.

I don't have those markers, nor any of the code between them, at least not how it is shown in the OP.

So where it says "Now, we must add aour new dropdown menu in here..
Here it is..."

I don't have a clue where to place that segment of code to replace the existing stuff.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 08, 2008, 09:06:34 PM
Quote from: LHVWB on October 04, 2008, 09:48:40 PM
As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

You will need to add the css style code to the 'style.css' file as described above by HCM in the first post (http://www.simplemachines.org/community/index.php?topic=253756.msg1646830#msg1646830). But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta 4. You will have to copy the images that are attached to that post as well. ;)

For SMF 2 Beta 4 ONLY.

Find the 'template_menu()' function from your index.template.php. The code in the function has the html that shows your menu.

<snip>

You will have to change the css code for custom themes, but you get the idea. :D
Ok, that's just dandy. Now how do I sort it for multicolour themes? :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jakki on October 08, 2008, 10:45:51 PM
Quote from: SunKing on October 08, 2008, 02:30:30 PM
@ Jakki
in between the <a> and </a> of the button, just before the actual button name, you could add something like  <img src="URL_TO_YOUR_IMAGE" />&nbsp;&nbsp;.


Okay thanks I'm having trouble getting this code to work in classic. I'll keep trying
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 08, 2008, 10:47:42 PM
^ Make sure you add the image file into your webserver directory. In the images folder. If you didn't know.  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jakki on October 08, 2008, 10:52:13 PM
Quote from: Project Evolution on October 08, 2008, 10:47:42 PM
^ Make sure you add the image file into your webserver directory. In the images folder. If you didn't know.  ;D

No clue as to what I'm doing, this is the first theme, I've actually wanted to finish. I've attempted others but quickly became discouraged, so I really want to do this one.

Having trouble getting code in the index and css plus the english.modification.php is not in the classic file.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 08, 2008, 11:02:01 PM
i do not see the <img ... /> stuff in the source code for your site. That will need to be added to the index.template.php for the theme you are using, not the default index.template.php. Also, as Project Evolution mentioned, you need to be sure to have the image uploaded to the location you pointed to in the image tag. There are a few other things that would make the images not show up as well, unfortunately. If you could post your index.template.php here (inside [ code ][ /code ] tags) and we can work through it.  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ascaland on October 08, 2008, 11:05:09 PM
Quote from: SunKing on October 08, 2008, 11:02:01 PM
i do not see the <img ... /> stuff in the source code for your site. That will need to be added to the index.template.php for the theme you are using, not the default index.template.php. Also, as Project Evolution mentioned, you need to be sure to have the image uploaded to the location you pointed to in the image tag. There are a few other things that would make the images not show up as well, unfortunately. If you could post your index.template.php here (inside [ code ][ /code ] tags) and we can work through it.  ;D
Even though I epically fail PHP, I can still try?  ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 08, 2008, 11:07:58 PM
I always overlook the little details like that.  :P
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 08, 2008, 11:39:24 PM
Why read the instructions when you can have so much more fun learning by parse error?
It works for me.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 10, 2008, 03:27:24 AM
Quote from: LHVWB on October 04, 2008, 09:48:40 PM
As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

<snip>

You will have to change the css code for custom themes, but you get the idea. :D
No, I don't get the idea. Where are the menu's buttons and sub-buttons actually set in Beta 4? I obviously have to construct a custom menu somewhere and it obviously isn't in index.template.php
Which file is the actual arrangement contained in?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Nathaniel on October 10, 2008, 03:44:59 AM
@antechinus,
Have a look at the '$buttons' array in the 'setupMenuContext()' function at the bottom of your '/Sources/Subs.php' file. For SMF 2 Beta, that is where buttons/subbuttons are setup.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 10, 2008, 04:11:21 AM
Ok, found that but so much has changed from 1.1.x that it's like starting from scratch.

For instance I see 'sub_buttons' => array but none of the standard SMF 2 themes include sub-buttons so this code is obviously looking rather odd if you know what I mean. Having redundant code in new software is a surefire way to confuse people.

I'm going to need a good online manual to get my head around this lot.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Nathaniel on October 10, 2008, 04:34:12 AM
There isn't any documentation on adding buttons for SMF 2 Beta, although the topics (containing examples of new buttons/subbuttons) below may help you to understand that fucntion and how it works.
http://www.simplemachines.org/community/index.php?topic=266093.msg1737062#msg1737062
http://www.simplemachines.org/community/index.php?topic=239787.0
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 10, 2008, 04:52:04 AM
Kthnx.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 11, 2008, 09:23:28 AM
Once again I've found something I'm not skilled enough to do.

Could anybody help me customise this for Kelo-Lt theme?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 11, 2008, 06:03:13 PM
I'm a tad snowed under right now but if someone doesn't sort you in the next few days I'll have a look at it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 13, 2008, 12:12:00 PM
Thanks!

It feels as if I should be able to do it, but I just can't. Freaky.  :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 13, 2008, 03:56:24 PM
Yeah I know what you mean. I was the same until it clicked. After that it seems easy.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: yoeri on October 14, 2008, 07:46:07 AM
visionsmc
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: T-Bag on October 14, 2008, 04:27:01 PM
Hello. I have some problems  with the menu posted on the first page of this topic. For example, menu is displayed with spaces (left and right). Look the image:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg504.imageshack.us%2Fimg504%2F2183%2Fspacesys4.jpg&hash=fc3d6d315b3664f1cc9e5cc224a2603718f8447e)

Anybody can help me to fix it? My theme is the Default, and SMF version 1.1.5
Thanks in advance.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 06:41:15 AM
Quote from: Nascar on October 11, 2008, 09:23:28 AM
Once again I've found something I'm not skilled enough to do.

Could anybody help me customise this for Kelo-Lt theme?

Ok, sorted. You should be fine from here on if you want to tweak it. I just copied the menu that I released Mystic Multi with since I had all the code on my desktop. Do wotcha like with it.  ;)

Index.template.php

Find:

// Start of the tab section.
echo '
<ul>';

// Show the default [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'home' ? 'current' : '' , '"><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

// Show the [help] button.
echo ($current_action=='help' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'help' ? 'current' : '' , '"><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action=='search' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'search' ? 'current' : '' , '"><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action=='admin' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'admin' ? 'current' : '' , '"><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action=='profile' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'profile' ? 'current' : '' , '"><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action=='pm' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'pm' ? 'current' : '' , '"><a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';


// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action=='calendar' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'calendar' ? 'current' : '' , '"><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action=='mlist' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'mlist' ? 'current' : '' , '"><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action=='login' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'login' ? 'current' : '' , '"><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action=='register' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'register' ? 'current' : '' , '"><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action=='logout' || $context['browser']['is_ie4']) ? '' : '' , '
<li class="' , $current_action == 'logout' ? 'current' : '' , '"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

echo '</ul>';

// The end of tab section.



Replace with:

// Show the start of the tab section.

echo '
             
                 <div id="menu">
                     <ul class="menu">
                     
                             <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>';

                 // Show the [Help] button.
                 echo'
                             <li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>';

                 // How about the [search] button?
                 if ($context['allow_search'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span><span class="title">' , $txt[182] , '</span></span></a></li>';

                 // Is the user allowed to administrate at all? ([admin])
                 if ($context['allow_admin'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span><span class="title">' , $txt[2] , '</span></span></a>
<ul>                             
                             <li><a href="', $scripturl, '?action=packages" class="level2"><span>' , $txt['packages'] , '</span></a></li>
                             <li><a href="', $scripturl, '?action=theme;sesc=', $context['session_id'],';sa=edit" class="level2"><span>' , $txt['modtheme'] , '</span></a></li>
<li><a href="', $scripturl, '?action=maintain" class="level2"><span>' , $txt['maintain'] , '</span></a></li>
<li><a href="', $scripturl, '?action=news" class="level2"><span>' , $txt['newsand'] , '</span></a></li>
</ul>
</li>';
                             
                 // Edit Profile... [profile]
                 if ($context['allow_edit_profile'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=profile" class="level1"><span><span class="title">' , $txt[79] , '</span></span></a>
                             <ul>                             
                             <li><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['forpro'] , '</span></a></li>
                             <li><a href="', $scripturl, '?action=profile;sa=theme" class="level2"><span>' , $txt['layout'] , '</span></a></li>
<li><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['account2'] , '</span></a></li>
<li><a href="', $scripturl, '?action=profile;sa=notification" class="level2"><span>' , $txt['notification2'] , '</span></a></li>
</ul>
</li>';


                 // Go to PM center... [pm]
                 if ($context['user']['is_logged'] && $context['allow_pm'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=pm" class="level1"><span><span class="title">' , $txt['messages'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                             <ul>
                             <li><a href="', $scripturl, '?action=pm;f=outbox" class="level2"><span>' , $txt['outbox'] , '</span></a></li>
                             <li><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['sendmess'] , '</span></a></li>
<li><a href="', $scripturl, '?action=pm;sa=pmprefs" class="level2"><span>' , $txt['pm_options'] , '</span></a></li>
<li><a href="', $scripturl, '?action=pm;sa=search" class="level2"><span>' , $txt['searchmess'] , '</span></a></li>
                             </ul>
</li>';                 

                 // the [Recent Posts] button
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=recent" class="level1"><span><span class="title">' , $txt['latest2'] , '</span></span></a>
                             <ul>';
if ($context['allow_calendar'])
echo'
<li><a href="index.php?action=calendar" class="level2"><span>' , $txt['viewcal'] , '</span></a></li>';
if ($context['allow_memberlist'] && $context['user']['is_logged'])
echo'
                             <li><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['viewlist'] , '</span></a></li>                             
                             <li><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['searchlist'] , '</span></a></li>';
                 echo'    </ul>
</li>';

// If the user is a guest, show [login] button.
                 if ($context['user']['is_guest'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
                 // If the user is a guest, also show [register] button.
                 if ($context['user']['is_guest'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                                         
                 // Otherwise, they might want to [logout]...
                 if ($context['user']['is_logged'])
                 echo '
                             <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

         echo '
                     </ul>
                 </div>';

// The end of tab section.



Style.css

Add to the end of the file:

/* Drop Down Menu Feature */

div#menu {
     z-index: 11;
     height: 26px;
     background: url(images/custom/nav-div.png) 100% 0 no-repeat;
     margin: 0 0 0 0;
}

div#menu ul {
     margin: 0px;
     margin-left: -2px;
     padding: 0px;
     list-style: none;
     float: left;
}

div#menu li {
     position: relative;
     margin: 0px;
     padding: 0px;
     display: block;
     float: left;
     z-index: 5;
     font-weight: bold;
}

div#menu li a {
     height: 26px;
     display: block;
     float: left;
     line-height: 26px;
     text-decoration: none;
     color: #FFFFFF;
     font-size: 0.85em;
}

div#menu li span {
     display: block;
}

div#menu li span {
     background-repeat: no-repeat;
     background-position: 95% 0px;
}

div#menu a:hover {
     color: #EAEAB8;
     font-size: 0.85em;
}

div#menu a.level1, div#menu span.level1 {
     font-size: 100%;
     background: url(images/custom/nav-div.png) no-repeat 100% 0;
     color: #FFFFFF;
     font-size: 0.85em;     
}

div#menu a.level1 span, div#menu span.level1 span {
     padding: 1px 5px 0px 5px;
}

div#menu li:hover a.level1, div#menu li:hover span.level1 {
     color: #FFFFFF;
     font-size: 0.85em;
      background: url(images/custom/nav_pointer.png) 50% 0 no-repeat;
}

div#menu a.level1 span.title, div#menu span.level1 span.title{
     padding: 0px;
}

div#menu ul.menu ul {
     position: absolute;
     top: 29px;
     left: -999em;
     width: 165px;
     font-size: 100%;
     padding: 6px 0 6px 0;
     margin-left: -1px;
     margin-top: -2px;
     background: url(images/custom/menu_bg.png) no-repeat 0 100%;
}

div#menu li:hover ul {
     left: 0px;
     z-index: 100;
}

div#menu li.level1 li {
     width: 100%;
     text-indent: 6px;
}



Modifications.english.php

Add the following:

// Menu strings

// Recent posts button and sub menu strings.

$txt['latest2'] = 'Latest';

$txt['viewcal'] = 'View Calendar';

$txt['viewbook'] = 'View Bookmarks';

$txt['viewlist'] = 'View Memberlist';

$txt['searchlist'] = 'Search Memberlist';

//Admin button sub menu strings

$txt['banlist'] = 'Ban List';

$txt['packages'] = 'Packages';

$txt['regist'] = 'Registration';

$txt['errorlog'] = 'Forum Error Log';

$txt['modtheme'] = 'Modify Themes';

$txt['maintain'] = 'Forum Maintenance';

$txt['newsand'] = 'News and Newsletters';

// Messages button  and sub menu strings.

$txt['messages'] = 'Messages';

$txt['outbox'] = 'Outbox';

$txt['sendmess'] = 'Send Message';

$txt['searchmess'] = 'Search Messages';

$txt['pm_options'] = 'Message Options';

// Profile button sub menu strings

$txt['forpro'] = 'Forum Profile';

$txt['layout'] = 'Look and Layout';

$txt['account2'] = 'Account Settings';

$txt['ignore'] = 'Ignore User Options';

$txt['notification2'] = 'Notification/Email';


Finally, put this image in your images/custom folder.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fmenu_bg.png&hash=31e397e1c1151e0d50370b415c5bb4e7001ca909)

Go nuts. ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 08:01:49 AM
Thanks, it works, but the edited links doesn't look very good, check the image.
You see the difference between the edited "Startsida" and the untouched "Forum"

I tried fixing it, but I'm not that skilled in CSS.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.sim-marcus.net%2FThemes%2Fkelo-lt114v1-1_tp%2Fkelo-lt.png&hash=36ba6ee35847ead97d7ef7705f0a8130af9c86fe)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 08:07:51 AM
What do you mean "untouched"?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 08:09:09 AM
You can't mix and match this by leaving some of your old menu in and adding bits of the drop code for some buttons. No_can_do. It's a complete replacement job.

When I said Find:     Replace with: I meant Find:     Replace with:

I did not mean "chop a bit out of this and try to jam it sideways into your existing menu". 

When I said "do what you like with it" I meant you can change the text and links to suit yourself as long as you follow the correct syntax.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 08:18:38 AM
I was going to fix the entire emnu like that, jsut wanted to test whit one button first.
But as you see, the text style is a lot different.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 08:20:43 AM
It's the same font: Verdana bold. If you want it one px smaller or whatever just adjust font-size but replace the whole thing first so you can see it working properly.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 08:26:26 AM
If you look in the menu section of the css you'll see four places where there's #FFFFFF.
After that put   font-size: 0.85em;  in all four.

ETA: Also at the start in div#menu change the margin to 0 0 0 0 instead of  0 0 0 10px
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 08:49:22 AM
Everything works and the font size is fixed, but look at this new image.
The | that is after each button is higher up then before. It's suppose to be in the middle of the menu.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.sim-marcus.net%2FThemes%2Fkelo-lt114v1-1_tp%2Fkelo-lt2.png&hash=4882c58e94eb12b33785263a0c045c1610f6002f)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 09:04:29 AM
Well when I tested it on my local it was in the middle. What browser are you using?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 09:05:20 AM
Firefox 3.0
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 09:11:36 AM
Same here. Weird. I'm running on XP but that shouldn't matter.

Anyway have you cleared cache and cookies and done a hard refresh after changing the code?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 09:12:34 AM
I did.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 09:18:23 AM
Me too (of course) and this is what I get.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fscreencap.png&hash=45d9fc9e1888c528b75024fe6d762adbe723c7f7)


Problem is that the text height and divider height are tied together, which is why it's strange that your one is playing up. You might have to make new divider images (with transparency at the top) to get around it, but I'd get other people to check how it looks just in case.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 09:19:46 AM
What you have is exactly what I want :P

I'll ask my friend to look, if not I'll replace those images.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 09:22:49 AM
Wait a minute: in your shot you have a divider image to the left of STARTSIDA. Are you sure you replaced all the code I said to replace, because if you did that image shouldn't be there.

Post your index.template in code tags.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 09:29:37 AM
<?php
// Version: 1.1; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context$settings$options$txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '1.1.4';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = false;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = false;
$settings['use_image_buttons'] = true;
/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;

}

// The main sub template above the content.
function template_main_above()
{
global $context$settings$options$scripturl$txt$language$modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="' 
. (!empty($context['blog']['meta']['description']) ? $context['blog']['meta']['description'] : $context['page_title']) . '" />', empty($context['robot_no_index']) ? '' '
<meta name="robots" content="noindex" />'
'
<meta name="keywords" content="'
, !empty($context['blog']['meta']['keywords']) ? $context['blog']['meta']['keywords'] : $modSettings['default_meta_keywords'], '" />
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/script.js?fin11"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";
// ]]></script>

<title>'
$context['page_title'], '</title>';

// The ?finll part of this link is just here to make sure browsers don't cache it wrongly.
 echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/print.css?fin11" media="print" />

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/ie6lte.css?fin11" />
<![endif]-->'
;

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/fonts-compat.css" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="'
$scripturl'?action=help" target="_blank" />
<link rel="search" href="' 
$scripturl '?action=search" />
<link rel="contents" href="'
$scripturl'" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';



if (isset($modSettings['blogMode']))
{
// if we're viewing a topic in a BLOG, these should be the previous and next topics, respectively.
if (!empty($context['current_article']))
echo '
<link rel="prev" href="'
$scripturl'?article='$context['current_article'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?article='$context['current_article'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_blog']))
echo '
<link rel="index" href="' 
$scripturl '?blog=' $context['current_blog'] . '.0" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']) && !empty($context['current_blog']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['blog_name'] .' - RSS" href="' $scripturl '?action=.xml;board='$context['current_blog'] .';type=rss" />';

// PNG fix for IE < 7
if ($context['browser']['is_ie'] && !$context['browser']['is_ie7'])
echo '
<script defer type="text/javascript" src="'
$settings['default_theme_url'], '/pngfix.js"></script>';
}

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
$options['collapse_header'] = !empty($_COOKIE['upshrink']);

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '
 <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
 var current_leftbar = '
, empty($options['collapse_leftbar']) ? 'false' 'true'';

 function shrinkHeaderLeftbar(mode)
 {'
;

  // Guests don't have theme options!!
  if ($context['user']['is_guest'])
 echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
  else
 echo '
smf_setThemeOption("collapse_leftbar", mode ? 1 : 0, null, "'
$context['session_id'], '");';
  echo '
document.getElementById("upshrinkLeftbar").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("leftbarHeader").style.display = mode ? "none" : "";

current_leftbar = mode;
 }
 // ]]></script>
 <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
 var current_rightbar = '
, empty($options['collapse_rightbar']) ? 'false' 'true'';

 function shrinkHeaderRightbar(mode)
 {'
;

  // Guests don't have theme options!!
  if ($context['user']['is_guest'])
 echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
  else
 echo '
smf_setThemeOption("collapse_rightbar", mode ? 1 : 0, null, "'
$context['session_id'], '");';

  echo '
document.getElementById("upshrinkRightbar").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("rightbarHeader").style.display = mode ? "none" : "";

current_rightbar = mode;
 }
  // ]]></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = '
, empty($options['collapse_header']) ? 'false' 'true'';

function shrinkHeader(mode)
{'
;

// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>'
;

// the routine for the info center upshrink

// the routine for the pm informer
echo '
<script language="JavaScript" type="text/javascript"><!-- // -->'
;

echo chr(60) . chr(33) . chr(91) . chr(67) . chr(68) . chr(65) . chr(84) . chr(65) . chr(91);

echo '
var current_header_pmi = '
, empty($options['collapse_header_pmi']) ? 'false' 'true'';

function shrinkHeaderPMI(mode)
{'
;

if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkPMI=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header_pmi", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink_pmi").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderPMI").style.display = mode ? "none" : "";

current_header_pmi = mode;
}
// '
;

echo chr(93) . chr(93) . chr(62);
echo '
</script>'
;

echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header_ic = '
, empty($options['collapse_header_ic']) ? 'false' 'true'';

function shrinkHeaderIC(mode)
{'
;

if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
</head>
<body>


 <div id="wrapper">
<div id="header-l">
<div id="header-r">
<div id="header">
<div id="logo">'
;
 if (empty($settings['header_logo'])){
echo '<a href="'.$scripturl.'" title="" class="logo-txt">'$context['forum_name'], '</a>';
}
else {
echo '<img src="http://www.sim-marcus.net/logo.jpg">';
}
echo'
</div>
 <div align="right"><img src="http://www.sim-marcus.net/Themes/kelo-lt114v1-1_tp/images/sm2_10.000.png">


</div>
</div>
</div>
</div>
<div id="mainnav-l">
<div id="mainnav-r">
<div id="mainnav">
'
,template_menu(),'
</div>
</div>
</div>'
;

echo'
<div id="userbar-l">
<div id="userbar-r">
  <div id="userbar">
 <div id="topbar">'
;
  // The information that will be shown to the member when he/she is logged on
  if($context['user']['is_logged'])
  {
echo '
<div id="loggedin">'
;
// Start CGDT Mod by Nascar

$date date('H'forum_time());

if (
$date 6)
echo $txt['up_late_arent_we'];
elseif (
$date 7)
echo $txt['are_you_the_early_bird'];
elseif (
$date 12)
echo $txt['good_morning'];
elseif (
$date 18)
echo $txt['good_afternoon'];
elseif (
$date 22)
echo $txt['good_evening'];
elseif (
$date 24)
echo $txt['shouldnt_you_be_going_to_bed_soon'];

echo 
', <b>'$context['user']['name'] , '</b>';
// End CGDT Mod by Nascar
  
// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo ',<br />'$txt[152], ' <a href="'$scripturl'?action=pm">'$context['user']['messages'], ' '$context['user']['messages'] != $txt[153] : $txt[471], '</a>'$txt['newmessages4'], ' '$context['user']['unread_messages'], ' '$context['user']['unread_messages'] == $txt['newmessages0'] : $txt['newmessages1'], '.';

echo '
</div>
<div id="loggedin2">
<a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a><br />
<a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a>
</div>'
;
  }

  // The login box which will only be shown to the guests
  else
  {
echo '
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>
<form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>   
<input name="user" type="text" onfocus="if(this.value==\''
$txt[35], '\')value=\'\';" onblur="if(this.value==\'\')value=\''$txt[35], '\';" value="'$txt[35], '" />
<input name="passwrd" type="password" onfocus="if(this.value==\''
$txt[36], '\')value=\'\';" onblur="if(this.value==\'\')value=\''$txt[36], '\';" value="'$txt[36], '" />
<input name="sa" class="submit" src="'
$settings['images_url'], '/custom/go_icon.png" type="image" value="'$txt[34], '" />
<input type="hidden" name="cookielength" value="-1" />
</form>'
;
  }
  echo'
 </div>
 <div id="searcharea">
<form action="'
$scripturl'?action=search2" method="post">
<input name="search" type="text" onfocus="if(this.value==\''
$txt[182], '\')value=\'\';" onblur="if(this.value==\'\')value=\''$txt[182], '\';" value="'$txt[182], '" />
<input name="sa" class="submit" src="'
$settings['images_url'], '/custom/go_icon.png" type="image" value="'$txt[182], '"/>';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="'
$context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd['
$context['current_board'], ']" value="'$context['current_board'], '" />';

echo '
</form>
 </div>
  </div>
</div>
</div>'
;

// The main content should go here.  A table is used because IE 6 just can't handle a div.&#168;

//The PM Informer is closed by default.
$options['collapse_header_pmi'] = 1;

//Do we have some new pms? Show the newest.
if(!empty($context['user']['unread_messages'])) {
echo '
<table align="center" width="500px">
<tr>
<td>
<div style="padding: 6px; vertical-align: middle; text-align: center; border: 1px solid #FF0000; background: #F4CFCF; color: #FF0000; ">
<a href="#" onclick="shrinkHeaderPMI(!current_header_pmi); return false;"><img id="upshrink_pmi" src="'
$settings['images_url'], '/', empty($options['collapse_header_pmi']) ? 'collapse.gif' 'expand.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin-right: 2ex;" align="right" /></a>';
printf($txt['pmi_title'], $context['user']['unread_messages']);
echo '
</div>
<div id="upshrinkHeaderPMI"'
, empty($options['collapse_header_pmi']) ? '' ' style="display: none;"''>
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="windowbg">
<td>
<b>'
$txt[318], ':</b> <a href="' $scripturl '?action=profile;u='$context['pm_informer']['from'], '">'$context['pm_informer']['sender'], '</a><br />
<b>'
$txt[319], ':</b> '$context['pm_informer']['subject'], '<br />
<b>'
$txt[317], ':</b> '$context['pm_informer']['msgtime'], '<br />
<b>'
$txt[72], ':</b> '$context['pm_informer']['body'], '<br /><br />
<div align="right"><a href="' 
$scripturl '?action=pm"><span class="smalltext">'$txt['pmi_view_all'], '</span></a></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>'
;
}


echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>'
;

// TinyPortal integrated bars
 if($context['TPortal']['leftbar'])
 {
  echo '<td width="' ,$context['TPortal']['leftbar_width'], '" style="padding: ' , isset($context['TPortal']['padding']) ? $context['TPortal']['padding'] : '4' 'px; padding-top: 4px;padding-right: 1ex;" valign="top">
  <div id="leftbarHeader"'
, empty($options['collapse_leftbar']) ? '' ' style="display: none;"'' style="padding-top: 5px; width: ' ,$context['TPortal']['leftbar_width'], 'px;">';
  TPortal_sidebar('left');
  echo '</div></td>';

 }

  echo '<td width="100%" align="left" valign="top" style="padding-top: 10px; padding-bottom: 10px;">';
  if($context['TPortal']['centerbar'])
echo '<div>' TPortal_sidebar('center') , '</div>';

if ($context['user']['is_admin'])
{
if (empty($txt['necessary_to_translate']))
{
echo '
<div style="margin: 0 2ex 2ex 2ex; padding: 2ex; border: 2px dashed #cc3344; color: black; background-color: #e7e7f7;">
'
$txt['necessary_to_translate_msg'], '
</div>'
;
}
}
 }

function 
template_main_below()
{
global $context$settings$options$scripturl$txt;

  echo '</td>';

// TinyPortal integrated bars
 if($context['TPortal']['rightbar']){
  echo '<td style="padding: ' , isset($context['TPortal']['padding']) ? $context['TPortal']['padding'] : '4' 'px; padding-top: 4px; padding-left: 1ex;" valign="top" align="right">
  <div id="rightbarHeader"'
, empty($options['collapse_rightbar']) ? '' ' style="display: none;"'' style="width: ' ,$context['TPortal']['rightbar_width'], 'px; text-align: left; padding-top: 5px;">';
  TPortal_rightbar();
  echo '</div></td>';
 }

  echo '</tr></table>';

  echo '
<div id="footer-l">
<div id="footer-r">
<div id="footer">'
, !empty($settings['custom_copyright']) ? '<span class="smalltext">'parse_bbc($settings['custom_copyright']). '</span>' '''<br />
<table border="0" cellspacing="0" cellpadding="4" width="100%" align="center"><tr><td align="center">'
theme_copyright(), '</td></tr>';
// please do not remove this
echo '<tr><td align="center" class="smalltext">';
echo 
blogcopyright('fb3773bdd88f0e6fd6bec61d6f16ea1694c2850b,3de43f42db8cda0573610c4385f9e41d40fdc39d,24aa6ae9afdcea2874b966cd13d3afa1b22879cc,e013735e4643cb54ce5aafd0fd367a4679ac6d0c');
echo 
'</td></tr></table> | 'tportal_version(), ' | Theme kelo-lt by <a href="http://padexx.de">panic</a>
</div>
</div>
</div>'
;

echo'
<div id="footer2">'
;
// Show the load time?
if ($context['show_load_time'])
{
echo '
<p class="smalltext">'
$txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '</p>';
}

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</div>

</div>
'
, empty($context['bcr']) ? '<div style="bottom:4px;text-align:center;position:'. ($context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'absolute' '') .';z-index:500;">'$txt['b348'] .'</div>' '''

</body>
</html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context$settings$txt$options;

echo '
<div class="pathway-l">
<div class="pathway-r">
<div class="pathway">'
;
// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '">' $tree['name'] . '</a>' $tree['name'] , '&nbsp;&raquo;&nbsp;';
else
echo $tree['name'];

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

}

echo '</div></div></div><span style="display: none">kelo-lt Theme designed by <a href="http://padexx.de/" target="_blank" title="SMF Themes &amp; webdesign solutions">padexx</a></span>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...

function template_menu()
{
global $context$settings$options$scripturl$txt;

// Work out where we currently are.
$current_action 'home';
if (in_array($context['current_action'], array('managearcade''admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
  $current_action 'admin';
if (in_array($context['current_action'], array('arcade''usercp''search''admin''calendar''profile''mlist''register''login''help''pm''forum''tpadmin')))
$current_action $context['current_action'];
if ($context['current_action'] == 'search2')
  if ($context['current_action'] == 'usercp')
$current_action 'profile';
$current_action 'search';
if (isset($_GET['dl']))
$current_action 'dlmanager';
if (isset($_GET['board']) || isset($_GET['topic']))
  //Avatar Maker Settings
if ($context['current_action'] == 'avtr')
$current_action 'avtr';
if ($context['current_action'] == 'avtr_change')
$current_action 'admin';
if ($context['current_action'] == 'avtr_sttng')
$current_action 'admin';
  //End Avatar Maker
$current_action 'forum';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

if (
in_array($context['current_action'], array('blogControlPanel''blogs')) || !empty($context['current_blog']))
$current_action 'blog';



// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first 'last';
$last 'first';
}
else
{
$first 'first';
$last 'last';
}

// Show the start of the tab section.

    
echo '
                
                 <div id="menu">
                     <ul class="menu">

                             <li class="level1"><a href="'
$scripturl'" class="level1"><span><span class="title">' $txt[103] , '</span></span></a></li>';  

if(
$settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo'
                             <li class="level1"><a href="'
$scripturl'?action=forum" class="level1"><span><span class="title">Forum</span></span></a></li>';  

// the [downloads manager] button
if ($context['allow_smfgallery_view'])
echo
'                              <li class="level1"><a href="'$scripturl'?action=tpmod;dl" class="level1"><span><span class="title">' $txt['downloads'] , '</span></span></a>
                             <ul>
                             <li><a href="'
$scripturl'?action=tpmod;dl=upload" class="level2"><span>' $txt['upload'] , '</span></a></li>
                             </ul>
                      </li>'
;          

// the [gallery] button
if ($context['allow_smfgallery_view'])
                  echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=gallery" class="level1"><span><span class="title">' $txt[smfgallery_menu] , '</span></span></a></li>';


// the [fun] button
                 
if ($context['user']['is_logged'])
                 echo 
'
                             <li class="level1"><a href="#" class="level1"><span><span class="title">' 
$txt['fun'] , '</span></span></a>
                      <ul>                             
                             <li><a href="'
$scripturl'?action=calendar" class="level2"><span>' $txt['calendar24'] , '</span></a></li>
                             <li><a href="'
$scripturl'?action=shop" class="level2"><span>Shoppen</span></a></li>
                      <li><a href="'
$scripturl'?action=blogs" class="level2"><span>' $txt['b1a'] , '</span></a></li>
                      </ul>
                      </li>'
;


// the [member] list button
if ($context['allow_memberlist'])
                 echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=mlist" class="level1"><span><span class="title">' $txt[331] , '</span></span></a></li>';

                 
// Go to PM center... [pm]
                 
if ($context['user']['is_logged'] && $context['allow_pm'])
                 echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=pm" class="level1"><span><span class="title">' $txt['messages'] , ' '$context['user']['unread_messages'] > '[<strong>'$context['user']['unread_messages'] . '</strong>]' '' '</span></span></a>
                             <ul>
                             <li><a href="'
$scripturl'?action=pm" class="level2"><span>' $txt['inbox'] , '</span></a></li>
                             <li><a href="'
$scripturl'?action=pm;f=outbox" class="level2"><span>' $txt['outbox'] , '</span></a></li>
                             <li><a href="'
$scripturl'?action=pm;sa=send" class="level2"><span>' $txt['sendmess'] , '</span></a></li>
                             <li><a href="'
$scripturl'?action=profile;sa=pmprefs" class="level2"><span>' $txt['prefs'] , '</span></a></li>
                             </ul>
                      </li>'
;                 

                 
// Edit Profile... [profile]
                 
if ($context['allow_edit_profile'])
                 echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=profile" class="level1"><span><span class="title">' $txt[79] , '</span></span></a>
                             <ul>                             
                             <li><a href="'
$scripturl'?action=profile;sa=forumProfile" class="level2"><span>' $txt['forpro'] , '</span></a></li>
                      <li><a href="'
$scripturl'?action=profile;sa=account" class="level2"><span>' $txt['account2'] , '</span></a></li>
                      <li><a href="'
$scripturl'?action=profile;sa=notification" class="level2"><span>' $txt['notification2'] , '</span></a></li>
                      </ul>
                      </li>'
;

                 
// Is the user allowed to administrate at all? ([admin])
                 
if ($context['allow_admin'])
   echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=admin" class="level1"><span><span class="title">Admin</span></span></a></li>';


            
// If the user is a guest, show [login] button.
                 
if ($context['user']['is_guest'])
                 echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=login" class="level1"><span><span class="title">' $txt[34] , '</span></span></a></li>';
                           
                 
// If the user is a guest, also show [register] button.
                 
if ($context['user']['is_guest'])
                 echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=register" class="level1"><span><span class="title">' $txt[97] , '</span></span></a></li>';         
                                         
                 
// Otherwise, they might want to [logout]...
                 
if ($context['user']['is_logged'])
                 echo 
'
                             <li class="level1"><a href="'
$scripturl'?action=logout;sesc='$context['session_id'], '" class="level1"><span><span class="title">' $txt[108] , '</span></span></a></li>';

         echo 
'
                     </ul>
                 </div>'
;
   
// The end of tab section.

if($context['TPortal']['leftbar'] && empty($context['hide_portal_blocks']))
echo 
'<a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="'$settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin: 1ex 3ex;" border="0" /></a><img id="upshrinkTempLeftbar" src="'$settings['images_url'], '/blank.gif" alt="" style="valign-bottom: 1ex;" />';
if(
$context['TPortal']['rightbar'] && empty($context['hide_portal_blocks']))
echo 
'<a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="'$settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin: 1ex 0;" border="0" /></a><img id="upshrinkTempRightbar" src="'$settings['images_url'], '/blank.gif" alt="" style="valign-bottom: 1ex;" />';

}

// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
global 
$settings$buttons$context$txt$scripturl;

foreach (
$button_strip as $key => $value)
{
if (isset(
$value['test']) && empty($context[$value['test']]))
{
unset(
$button_strip[$key]);
continue;
}
elseif (!isset(
$buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty(
$button_strip))
return 
'<td>&nbsp;</td>';

echo 
'
<td class="buttons">'
implode('</td><td class="buttons">'$button_strip) , '</td>';
}

function 
showcase()
{
global 
$settings$buttons$context$txt$scripturl;
// personal info etc.
echo '
<div class="userinfo">'
;

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo 
'<h3>'$txt['hello_member_ndt'], ' '$context['user']['name'], '</h3>';

echo 
'
<div id="useropts">
<ul>'
;
// Only tell them about their messages if they can read their messages!
if ($context['allow_pm'])
echo 
'<li>'$txt[152], ' <a href="'$scripturl'?action=pm">'$context['user']['messages'], ' '$context['user']['messages'] != $txt[153] : $txt[471], '</a> '$context['user']['unread_messages'], ' '$context['user']['unread_messages'] == $txt['newmessages0'] : $txt['newmessages1'];
echo 
'.</li>';

if (isset($context['user']['awaiting_mod']))
echo '<br /><a href="' $scripturl '?action=warnpmman">' $context['user']['awaiting_mod'] . '</a><br />';



// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo 
'<li><b>'$txt[616], '</b></li>';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo 
'<li>'$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '</li>';

echo 
'
<li><a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a></li>
<li><a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a></li>
</ul>
</div>'
;
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo 
'
'
$txt['welcome_guest'], '
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>
<form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" style="margin: 4px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" size="10" />
<input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
$txt['smf53'], '</option>
<option value="1440">'
$txt['smf47'], '</option>
<option value="10080">'
$txt['smf48'], '</option>
<option value="43200">'
$txt['smf49'], '</option>
<option value="-1" selected="selected">'
$txt['smf50'], '</option>
</select>
<input type="submit" value="'
$txt[34], '" />
<input type="hidden" name="hash_passwrd" value="" />
</form>'
$txt['smf52'], '<br /><br />';
}

echo 
' </div>';

echo 
'
<div class="searchfield">
<form action="'
$scripturl'?action=search2" method="post" style="margin: 4px 0;">
<input type="text" name="search" value="" size="30" style="margin-bottom: 4px;" />&nbsp;
<input type="submit" name="submit" value="'
$txt[182], '" style="margin-bottom: 4px;" /><br />
<b><a href="'
$scripturl'?action=search;advanced">'$txt['smf298'], '</a></b>
<input type="hidden" name="advanced" value="0" />'
;

// Search within current topic?
if (!empty($context['current_topic']))
echo 
'
<input type="hidden" name="topic" value="'
$context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo 
'
<input type="hidden" name="brd['
$context['current_board'], ']" value="'$context['current_board'], '" />';

echo 
'
</form><br />
<b>'
$context['common_stats']['total_posts'], '</b> '$txt[95], ' '$txt['smf88'], ' <b>'$context['common_stats']['total_topics'], '</b> '$txt[64], '- '$txt[525], ' <span style="white-space: nowrap;"><b>'$context['common_stats']['total_members'], '</b> '$txt[19], '</span> -
'
$txt[656], ': <b> '$context['common_stats']['latest_member']['link'], '</b>
</div>
<div class="clr"></div>
'
;
}

?>


It may be something wrong in it, as I edited the buttons one by one, couse I couldn't copy and replace the code you gave me, as I have other buttons.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 09:35:13 AM
Ok, it'll be the Tiny Portal upshrinks that are doing it. They messed up Hoochie's toolbar for Dilber as well. I was testing 1.1.6 only (coz someone said he wanted 1.1.6, right?  :P)

What I did to get around it was to put the upshrinks somewhere else. Take them out of the toolbar and put them where they wont cause trouble.

Mind you that still doesn't explain why you have an extra image stuck in there..................

Anyway I need sleep.Later.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 09:36:38 AM
oh, I didn't think about those. It'll be done.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 09:39:25 AM
Oi! I just noticed something. You have a syntax error in your gallery button.

// the [gallery] button
if ($context['allow_smfgallery_view'])
                  echo '
                             <li class="level1"><a href="', $scripturl, '?action=gallery" class="level1"><span><span class="title">' , $txt[smfgallery_menu] , '</span></span></a></li>';


The text string should be like this:    $txt['smfgallery_menu'] 

Really gone now.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Marcus Forsberg on October 16, 2008, 09:51:14 AM
The gallery is fixed, and the upshrinks removed. Still the same, though.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 16, 2008, 03:45:50 PM
Well in that case I'm totally stumped at the moment. I'll load it to an online test site and check there with a few browsers. So far I've only had it on local.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on October 17, 2008, 05:11:17 PM
HI HCM & all,

am using 2.0.4 with Energy Theme - http://custom.simplemachines.org/themes/index.php?lemma=974

Will i get edits for having a drop down like one i had for Dilber Mc on 1.1.6 made By Hoochie coochie Man.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 17, 2008, 05:46:58 PM
If you're capable of doing your own adjustments I recently did drops for a 2b4 theme.

http://www.dzinerstudio.com/index.php?topic=2148.0

Obviously the colours and some of the paddings, etc will need to be different for your theme but the menu itself should be fine.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: simon0101 on October 18, 2008, 01:23:24 AM
Hi,
Wow! Nice work! However, I'd like to have drop down button for the arcade but in spite of this, it is just what I'm looking for.

===========================================================
Sujeet
Online Dating (http://"http://www.casualdate.net.au%20")
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 18, 2008, 01:35:24 AM
Well it's a free theme so grab a copy then just do the edits in that thread. Piece of cake.
Bikken made the theme without drops and it hasn't been pre-packaged with them yet.

Doing an arcade button is no harder than any other button, especially in SMF 2.

ETA: The link in your sig is messed up. You need to edit it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on October 18, 2008, 04:01:21 AM
Quote from: antechinus on October 17, 2008, 05:46:58 PM
If you're capable of doing your own adjustments I recently did drops for a 2b4 theme.

http://www.dzinerstudio.com/index.php?topic=2148.0

Obviously the colours and some of the paddings, etc will need to be different for your theme but the menu itself should be fine.

I will try it out, will it show only 5 list under one menu.

Ok have you saw our forum, i want menu like this - http://itacumens.com/forum/ - Menu build by HCM - I would like to have the curve arch and etc.

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 18, 2008, 06:07:43 AM
It'll only show five on the Overview (or Overview Light) theme because that particular theme has a quirk which cuts off the menus if they're too low at the bottom. Fixed. Details in that thread.


I don't know what you're referring to with that link because I can't see any drop menus there. If the drops have curves it'll simply be done with curved images. No big deal. Use whatever shaped images you like. You can make the drop circular if you want.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 20, 2008, 09:32:23 AM
If anyone's into it I went and made complete custom menus for all of the free Dziner Studio themes. The threads include complete code and images for people who want to convert their own copies of the 2 beta 4 or 1.1.x/TP themes.

The threads also contain theme zips for the 2beta4 versions. I'm not zipping all the 1.1.x and TP versions because there would be so many to do. Those versions of the themes are available at DS and can easily be converted by following the instructions in the threads.

These menus run different codes to the one in the OP here. They're coded so the currently selected tab stays highlighted like a standard SMF menu. The themes available are listed below with links to the threads and demos.

Darkbreak theme thread. (http://www.dzinerstudio.com/index.php?topic=2180.0)   

DS-Natural theme thread. (http://www.dzinerstudio.com/index.php?topic=2189.0)   

Mystic Jade theme thread. (http://www.dzinerstudio.com/index.php?topic=2220.0)

Outline theme thread. (http://www.dzinerstudio.com/index.php?topic=2211.0)   

Overview and Overview Light theme thread. (http://www.dzinerstudio.com/index.php?topic=2148.0) 

Silent Wave theme thread. (http://www.dzinerstudio.com/index.php?topic=2190.0)   

These are all free themes so grab a copy if you like them. The menus are fully validated for CSS and XHTML and have been tested in Firefox, Opera, Safari and IE7. Forget about IE6.

ETA: I advise anyone interested in these menus to read this post. (http://www.dzinerstudio.com/index.php?topic=2189.msg16827#msg16827) It contains details on including a javascript preload code that eliminates waiting for the drop menu images to render initially if someone arrives at the site with a clear cache. Works very well, and the menus will still function perfectly well even if someone is using a script blocker. It'll simply mean a wait of up to one second or so for full rendering (depending on their connection speed).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jakki on October 21, 2008, 04:21:17 PM
Very nice tut. Sunking did a horizontal version for me. 
I did use this tut to work on a theme (which I'm still doing) all went well with buttons.

This tut is very useful...thanks
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 21, 2008, 04:44:59 PM
Welcome. Btw, the different themes use slightly different codes. If anyone is looking for the simplest solution read the Silent Wave tut. The others have more coding and images to match the look of the themes. It comes down to personal preference.

I'm thinking just for fun I might look at horizontal ones next, but I really prefer the vertical arrangement myself. Multi-level drops might be next.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: yoeri on October 23, 2008, 10:22:44 AM
I try to edit the visionsmc theme. but it wont work can you help me
you cant find the file at http://www.allitsolutions.nl/visionmc
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 23, 2008, 08:32:39 PM
Your link seems to be dead. Anyway personally I can't take on any more custom theme edits at the moment. However I'm sure some of the others can help you out. If not I'll look at your theme next week.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: genusis on October 29, 2008, 02:47:18 PM
How would you do this for the Babylon theme for version 2 beta 4? thank you for who ever helps me.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on October 29, 2008, 05:43:44 PM
That's an interesting question actually. Anyone care to tackle a 2b4 theme that uses image buttons?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: genusis on November 01, 2008, 10:23:31 AM
yes please can anyone please tackle the Babylon theme for me, i would much appreciate it, and if its not much though but i would add an affiliate to my forum going to your site. ^^ thank you for your help whom ever. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 02, 2008, 06:04:57 PM
K, it's raining and I'm bored. I'll have a crack at it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 02, 2008, 09:03:02 PM
Quote from: genusis on November 01, 2008, 10:23:31 AM
yes please can anyone please tackle the Babylon theme for me, i would much appreciate it, and if its not much though but i would add an affiliate to my forum going to your site. ^^ thank you for your help whom ever.

Sorted. Only slight complication is that I had to put the header upshrink at the right end of the menu instead of at the left. It was the quickest and easiest way to get it stable. Shouldn't bother you too much.

The first code block is a custom javascript to preload the drop menu images so they will display with no delay for rendering when the theme is first loaded. The other code blocks are just my normal drop menu codes, slightly altered for Babylon.

Everyone else note that this is for 2b4, not  for 1.1.6.

For index.template.php find:

echo '
</head>
<body>';
}



Add before:

echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png",
         "/images/submenu_bottom.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';



Find:

</table>

<a href="javascript:void(0);" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 2ex 2px 0;" border="0" /></a>';

// Show the menu here, according to the menu sub template.
template_menu();

echo '
</div>';



Replace with:

</table>

        <div id="toolbar">';

// Show the menu here, according to the menu sub template.
template_menu();

echo '
        </div>
</div>';



Find:

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// We aren't showing all the buttons in this theme.
$hide_buttons = array('pm', 'mlist');

foreach ($context['menu_buttons'] as $act => $button)
if (in_array($act, $hide_buttons))
continue;
else
echo '
<a href="', $button['href'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['lang_images_url'] . '/' . $act . '.gif" alt="' . $button['title'] . '" border="0" />' : $button['title'], '</a>', !empty($button['is_last']) ? '' : $context['menu_separator'];
}



Replace with:

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div class="tabs">
  <ul>';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li><a href="', $button['href'], '"><span class="menu"><img src="' . $settings['lang_images_url'] . '/' . $act . '.gif" alt="' . $button['title'] . '" border="0" /></span></a>';

  //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                             <div class="sub">
<ul>';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li><a href="', $sub_button['href'], '">' , $sub_button['title'] , '</a></li>';
            echo '
                                 </ul>
<div class="btm-bg"></div>
</div>';      
         }

echo'
        </li>';
}
echo '

         <li><a href="javascript:void(0);" onclick="mainHeader.toggle(); return false;"><img id="upshrink" src="', $settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 0 2ex 2px 0;" border="0" /></a></li>

</ul>
</div>';
}



For style.css, add this to the end of the file:

/*Drop menu codes*/

#toolbar {
    margin: 4px 0 0 0;
    padding: 0;
    height: 16px;
    background: none;
}

.tabs {
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: none;
font-family: tahoma, sans-serif;
text-transform: uppercase;
font-size: 9px;
}

.tabs a:link{
cursor: pointer;
}

.tabs a:visited { }

.tabs ul {
height: 16px;
float: left;
margin: 0;
padding: 0;
list-style: none;
}

.tabs ul li a.current { }

.tabs li {
float: left;
padding: 0;
position: relative;
z-index: 1;
background: none;
}

.tabs li:hover {
z-index:2;
}

.tabs li a {
display: block;
line-height: 16px;
overflow: hidden;
float: left;
}

a .menu {
width: auto;
height: 16px;
line-height: 16px;
display: block;
float: left;
     padding: 0 4px 0 0;
}

.tabs li a:hover .menu,
.tabs li:hover a .menu { }

.tabs ul li a.current .menu { }

.tabs li a:hover,
.tabs li.hover a,
.tabs li:hover a { }

.tabs li:hover .sub,
.tabs li.hover .sub {
display: block;
}

.tabs li .sub {
display: none;
position: absolute;
top: 16px;
left: -16px;
height: 16px;
width: 186px;
padding-top: 16px;
background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
width: 186px;
height: auto;
margin: 0 0 0 0;
padding: 4px 0 4px 14px;
list-style: none;
font-size: 9px;
background: url(images/submenu_bg.png) repeat-y;
}

.tabs li:hover li,
.tabs li.current li {
width: 100%;
padding: 0;
background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
color: #3F617F;
background: none !important;
text-decoration: none;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
line-height: 15px;
width: 144px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #FFFFFF;
background: #6B8EAE !important;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
}

/*IE*/
.tabs li li a:hover {
color: #FFFFFF;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background:  #6B8EAE;
}
/**/

.tabs .btm-bg {
width: 186px;
height: 9px;
clear: both;
background: url(images/submenu_bottom.png) no-repeat;
}

/* End of drop menu codes. */


Add these three images to your images folder. The result will look like the screenshot.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fsubmenu_top.png&hash=5e05e28c801d94dec69d4dce0419d47205bc2ab3)

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fsubmenu_bg.png&hash=de2352ba2c8b17a68f2e059de1856576d263cbcb)

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fsubmenu_bottom.png&hash=e9785b9b8acfb6ff83e2ed261337122278a83fdc)

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fbabylon_drops.jpg&hash=4ce1c957024fee83e774a0278a9760b61d53dab3)

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: yoeri on November 03, 2008, 05:37:34 AM
antechinus  can you help me whit
http://custom.simplemachines.org/themes/index.php?lemma=519
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: genusis on November 03, 2008, 10:56:26 AM
thank you so very much antechinus. =]. the dropdown menu buttons work really good. thank you lots  :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 03, 2008, 05:01:37 PM
Quote from: yoeri on November 03, 2008, 05:37:34 AM
antechinus  can you help me whit
http://custom.simplemachines.org/themes/index.php?lemma=519

Got a demo of the theme? If I like it I'll do it next weekend.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 04, 2008, 01:22:35 AM
Hi Antechinus,

Am using Energy theme @ http://discuss.itacumens.com

http://custom.simplemachines.org/themes/index.php?lemma=974

I will be reading your Reply # 205.

If you have any suggestion, then you could add to me for this particular theme.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: yoeri on November 04, 2008, 02:34:21 AM
Demo at
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 04, 2008, 04:52:41 PM
I'll have a look at these over the weekend but frankly this is starting to get a bit silly. You see Hoochie has provided one version of drop menus for themes in general, along with specific tutorials for some individual themes.

I've provided specific examples and tutorials for several themes using different drop menu codes. The thing is that whichever one you use they all rely on similar edits. The same basic principles apply to all themes.

All you are doing is replacing the existing tabs section in your theme with the new one, and then replacing the menu code in your style.css with the new one. After that you're only left with tweaking colours and images to your liking, along with some minor padding adjustments. It really isn't that big a deal as long as you copy the structures set out in this thread or the related threads.

I'll do these last two at the weekend but after that I think I'll pull the pin on this. There are so many existing examples that I think people should be able to have a go themselves with a test copy of their preferred theme. Just pick an example of a theme that has already been done and has a similar look to what you want, then grab the code for that and try it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 10, 2008, 04:58:57 AM
A. SK and yoeri: I can do these themes but you'll have to settle for having the tabs a fixed distance apart. Trying to get a variable spacing for different screen resolutions is a pain in the backside.

Also yoeri: do you have written permission from Yagiz to remove his copyright? If you've cut a deal with him that's fine. If not, no dice. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 10, 2008, 10:18:49 AM
Quote from: antechinus on November 10, 2008, 04:58:57 AM
A. SK and yoeri: I can do these themes but you'll have to settle for having the tabs a fixed distance apart. Trying to get a variable spacing for different screen resolutions is a pain in the backside. 

First of all , thanks for trying to help us.
Give me a fixed distances between tabs. you fix accordingly to your taste.
But the text should not be swapped to next line.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 12, 2008, 10:24:57 PM
A.SK, got it sorted. Grab the three images from the Babylon example on this page. Also use the same javascript preload code in the same place if you want faster initial rendering. As for the rest........

Index.template.php:

Find:

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">';
//ìåíþøêà
template_menu();
echo '</td></tr></table>';


Replace with:

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">

<div id="toolbar">
',template_menu(),'
</div>';
echo '</td></tr></table>';


Find:

// Show the start of the tab section.
echo '

<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="maintab_' , $first , '"></td>';

foreach ($context['menu_buttons'] as $act => $button)
echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '"></td>' : '' , ' <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
<a href="', $button['href'], '">', $button['title'], '</a>
</td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '"></td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
</tr>
</table>';

}


Replace with:

// Show the start of the tab section.
echo '

<div class="tabs">
<ul>';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '   <li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '">         
<span class="menu-right">' , $button['title'] , '</span></a>';

          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                             <div class="sub">
<ul>';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li><a href="', $sub_button['href'], '">' , $sub_button['title'] , '</a></li>';
            echo '
                                 </ul>
<div class="btm-bg"></div>
</div>';     
         }

echo' </li>';

}

echo '
</ul>
</div>
<div class="tabsright"><img src="', $settings['images_url'], '/maintab_last.gif" alt="" border="0" /></div>';

}


Style.css add to the end of the file:

#toolbar {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 47px;
    background: url(images/maintab_back.gif) repeat-x;
}

.tabsright{
    float: right;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
width: 20px;
    background: url(images/maintab_last.gif);
}

/*Drop menu codes*/

.tabs {
float: left;
margin: 0 0 0 0;
font-size: 11px;
font-weight: bold;
list-style: none;
background: url(images/maintab_first.gif) 0 0 no-repeat;
color: #FFFFFF;
     font-family: tahoma, sans-serif;
text-decoration: none;
text-transform: uppercase;
padding: 0 0 5px 30px;
}

.tabs a:link{
     color: #FFFFFF;
cursor: pointer;
}

.tabs a:visited {
     color: #FFFFFF;
}

.tabs ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}

.tabs ul li a.current {
     color: #EAF9C5;
}

.tabs li {
float: left;
padding: 0;
position: relative;
z-index: 1;
background: none;
}

.tabs li:hover {
z-index:2;
}

.tabs li a {
display: block;
overflow: hidden;
float: left;
}

a .menu-right {
width: auto;
height: 47px;
line-height: 47px;
display: block;
float: left;  
margin-right: 2px;
     padding: 0 21px 0 21px;
     background: none;
     text-decoration: none;
}

.tabs li a:hover .menu-right,
.tabs li:hover a .menu-right {
background: none;
color: #EAF9C5;
text-decoration: none;
}

.tabs ul li a.current .menu-right {
     background: none;
}

.tabs li a:hover,
.tabs li.hover a,
.tabs li:hover a {
     color: #FFFFFF;
text-decoration: none;
}

.tabs li:hover .sub,
.tabs li.hover .sub {
display: block;
}

.tabs li .sub {
display: none;
position: absolute;
top: 40px;
left: 0px;
height: 16px;
width: 186px;
padding-top: 16px;
background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
width: 186px;
height: auto;
margin: 0 0 0 0;
padding: 4px 0 4px 14px;
list-style: none;
font-size: 11px;
background: url(images/submenu_bg.png) repeat-y;
}

.tabs li:hover li,
.tabs li.current li {
width: 100%;
padding: 0;
background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
color: #7B8795;
text-decoration: none;
background: none;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
line-height: 15px;
width: 144px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #FFFFFF;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background: url(images/deepblue.jpg) repeat-x;
}

/*IE*/
.tabs li li a:hover {
color: #FFFFFF;
line-height: 15px;
margin: 0 0 0 0;
padding: 2px 7px 2px 7px;
background: url(images/deepblue.jpg) repeat-x;
}
/**/

.tabs .btm-bg {
width: 186px;
height: 9px;
clear: both;
background: url(images/submenu_bottom.png) no-repeat;
}

/* End of drop menu codes. */


I don't know how many links you have in your toolbar but this is set for the standard menu on a 1024 screen. You can adjust the spacing in the css here:

a .menu-right {
width: auto;
height: 47px;
line-height: 47px;
display: block;
float: left;  
margin-right: 2px;
     padding: 0 21px 0 21px;
     background: none;
     text-decoration: none;
}


Change the 21px left and right padding to suit.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 14, 2008, 08:45:45 PM
Thanks a lot antechinus,

I have noted the update before 2 days.

I will workout today night.

Thanks a lot for your care and help.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 15, 2008, 03:18:49 AM
K. Get back to me if you have any trouble with it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jakki on November 15, 2008, 10:48:11 AM
Okay followed the instructions, I did before with no problems but when I did it this time, I get this.

Template Parse Error!
There was a problem loading the /Themes/tday2/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.

Parse error: syntax error, unexpected $end in .../Themes/tday2/index.template.php on line 658

649: if (empty($button_strip))
650: return '<td> </td>';
651:
652: echo '
653: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '"> </td>
654: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
655: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
656: }
657:

658: ?>



Can anyone tell me what is wrong?


NM: I figured it out...LOL
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 15, 2008, 02:12:40 PM
Quote from: antechinus on November 15, 2008, 03:18:49 AM
K. Get back to me if you have any trouble with it.

Hi Antechinus,

I have placed all the three image files under themes image folder.

Did the modification and found the menu, was not loaded properly for long time on all browsers.

http://www.itacumens.com/discuss/Themes/ds-natural_20b4/images/ITA%20Menu%20Tested%20-%2015%20Nov%2008.JPG
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 15, 2008, 03:44:02 PM
Can you post you index.template in code tags please? I think you may have made a mistake somewhere.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 15, 2008, 08:28:24 PM
Quote from: antechinus on November 15, 2008, 03:44:02 PM
Can you post you index.template in code tags please? I think you may have made a mistake somewhere.

Yes I may have did some unusual errors.

<?php
// Version: 2.0 Beta 4 Public; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context$settings$options$txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0 Beta 3 Public';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;

/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;

/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;
}

// The main sub template above the content.
function template_html_above()
{
global $context$settings$options$scripturl$txt$modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="'
$context['page_title'], '" />
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/script.js?b21"></script>
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/theme.js?b21"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_default_theme_url = "'
$settings['default_theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";'$context['show_pm_popup'] ? '
if (confirm("' 
$txt['show_personal_messages'] . '"))
window.open("' 
$scripturl '?action=pm");' '''
var ajax_notification_text = "'
$txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "'
$txt['modify_cancel'], '";
// ]]></script>
<title>'
$context['page_title'], '</title>';

// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />'
;

// The ?b21 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?b21" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/css/print.css?b21" media="print" />';

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/css/fonts-compat.css" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="'
$scripturl'?action=help" />
<link rel="search" href="' 
$scripturl '?action=search" />
<link rel="contents" href="'
$scripturl'" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
$options['collapse_header'] = !empty($_COOKIE['upshrink']);

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// Create the main header object.
var mainHeader = new smfToggle("upshrink", '
, empty($options['collapse_header']) ? 'false' 'true'');
mainHeader.useCookie('
$context['user']['is_guest'] ? 0');
mainHeader.setOptions("collapse_header", "'
$context['session_id'], '");
mainHeader.addToggleImage("upshrink", "/upshrink.gif", "/upshrink2.gif");
mainHeader.addTogglePanel("upshrinkHeader");
mainHeader.addTogglePanel("upshrinkHeader2");
// ]]></script>'
;

echo '
</head>
<body>'
;

//Hopefully this message will encourage the guests to register
if ($context['user']['is_guest'] && !empty($modSettings['enable_mfg_mod']))
        echo '
               <div class="windowbg2" style="margin:0 auto;text-align:center">'
,!empty($modSettings['mf_guests']) ? $modSettings['mf_guests'] : $txt['default_message'],'</div>';
//Display ads on the top of the page
if (function_exists("show_topofpageAds"))
{
$ads show_topofpageAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
}
 
 
echo 
'<script language="JavaScript" type="text/javascript" src="'$settings['default_theme_url'], '/scripts/sha1.js"></script>';


function 
template_body_above()
{
global $context$settings$options$scripturl$txt$modSettings;
 
// òàáëèöà1 Íà÷èíàåòñÿ âåðõíÿÿ òàáëèöà.
echo '<table width="100%" cellpadding="0" cellspacing="0">';

//Äåëàåì àêêóðàòíóþ ëåâóþ êà¸ìêó :)
echo '<tr><td class="lefthightable">&nbsp;</td>';

//Äåëàåì öåíòðàëüíóþ ÷àñòü òàáëèöû. Èìåííî çäåñü áóäåò íàõîäèòñÿ logo è âõîä (ïðàêòè÷åñêè âñ¸ ñàìîå êðàñèâîå â òåìå :))
echo '<td class="hightable">';

// òàáëèöà2 Òåïåðü âñòàâëÿåì â ýòó êîëîíêó åù¸ òàáëèöó, â êîòîðîé áóäóò íàõîäèòñÿ íåïîñðåäñòâåííî ÿ÷åéêè ñ ëîãî è âõîäîì.
echo '<table width="100%" cellspacing="0" cellpadding="1" style="vertical-align: top;"><tr>';

//Âñòàâëÿåì èçîáðàæåíèå logosmf.jpg.
echo '<td><a title="Discussion Home" target="_self" href="/" ><img src="'$settings['images_url'], '/logo.gif" style="margin: 7px;" alt="IT Acumens Discussion" /></a></td>';

//òàáëèöà3 Îòêðûâàåì åù¸ îäíó ÿ÷åéêó.
//Ïåðâàÿ ÿ÷åéêà - ïóñòûøêà.
echo '<td><table><tr><td width="100%">&nbsp;</td>';

//òàáëèöà 4 Òåïåðü íåïîðåäñòâåííî òàáëèöà, ãäå áóäåò âõîä ïîèñê.
echo '<td><table width="100%" cellpadding="0" cellspacing="0"><tr>';

// òàáëèöà5 ñîçäàåì ñòðîêó äëÿ âõîäà.
echo ' <td><table width="250"  cellpadding="0" cellspacing="0"><tr>';

//òàáëèöà6 òóò âñÿ èíôîðìàöèÿ.
echo ' <td><table width="100%" style="height: 162px;" cellpadding="0" cellspacing="0"><tr><td class="leftlogin">&nbsp;</td><td class="centerlogin">';

//òàáëèöà7 äåëèò ïðèâåòñòâèå è âõîä
echo '<table width="100%"><tr style="height: 28px; vertical-align: top;">
 <td bgcolor="#3970b8" align="center" style="vertical-align: middle;">'
;
 //Åñëè ïîëüçîâàòåëü, òî ïðèâåòñòâóåì åãî :)
if($context['user']['is_logged'])
echo '<span style="font-size: 10px; color: #ffffff;"> '$txt['hello_member_ndt'], ' <b>'$context['user']['name'] , '</b></span>';
Else
echo '<span style="font-size: 10px ; color: #ffffff;"> '$txt['quick_login_dec'], '</span>';
  
//çàêðûâàåì ïðâåòñâèå, íà÷èíàåì âõîä èëè àâàòàð.
 echo '</td></tr><tr>';
 if (!empty($context['user']['avatar']))
 echo '<td align="center" valign="middle">'$context['user']['avatar']['image'], '</td></tr>';
//åñëè íåò ëîãèíà ïîêàæåì âõîä.
if($context['user']['is_logged'])
echo '';
Else
{
echo '<td><form action="'$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin:27px 0px 27px 0px;" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" size="10" />&nbsp;<input type="password" name="passwrd" size="10" /><br />
<select name="cookielength" style="margin-top: 4px;">
<option value="60">'
$txt['one_hour'], '</option>
<option value="1440">'
$txt['one_day'], '</option>
<option value="10080">'
$txt['one_week'], '</option>
<option value="43200">'
$txt['one_month'], '</option>
<option value="-1" selected="selected">'
$txt['forever'], '</option>
</select>
<input type="submit" value="'
$txt['login'], '" /><br />';
if (!empty($modSettings['enableOpenID']))
echo'<br />
<input type="text" name="openid_url" id="openid_url" size="25" class="openid_login" />'
;

echo '
<input type="hidden" name="hash_passwrd" value="" />
</form></td></tr>'
;
}

//çàêðûâàåì òàáëèöó 7 
echo '</table>';
//çàêðûâàåì êà¸ìêó è òàáëèöó6.
echo '</td><td class="rightlogin">&nbsp;</td></tr></table></td>';

//çàêðûâàåì ñòðîêó äëÿ âõîäà è îòêðûâàåì äëÿ ïîèñêà.
echo '</tr><tr>';
echo '<td  width="100%" height="27" align="center" valign="middle" style="margin-left: 3px;"><table width="100%" style="height: 28px;" cellpadding="0" cellspacing="0"><tr><td>&nbsp;</td><td bgcolor="#8895a4" align="center" style="border: 1px solid #d2e1f1;">
<form action="'
$scripturl'?action=search2" method="post" accept-charset="'$context['character_set'], '" style="margin: 0;">
<input type="text" name="search" value="" style="width: 120px; height: 14px;" />&nbsp;
<input type="submit" name="submit" value="'
$txt['search'], '" style="width: 11ex; height: 18px;" />
<input type="hidden" name="advanced" value="0" /></form></td><td>&nbsp;</td></tr></table></td>'
;

//çàêðûâàåì òàáëèöó5
echo '</tr></table></td>';

//çàêðûâàåì òàáëèöó4
echo '</tr></table>';

//çàêðûâàåì òàáëèöà3 è ÿ÷åéêó. êîíåö âõîäà
echo '</td></tr></table></td>';

//çàêðûâàåì òàáëèöó2
echo '</tr></table>';

//Òåïåðü çàêðûâàåì öåíòðàëüíóþ ÷àñòü òàáëèöû è îòêðûâàåì ïðàâóþ êà¸ìêó
echo '</td><td class="righthightable">&nbsp;';

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">

<div id="toolbar">
'
,template_menu(),'
</div>'
;
//Below the menu ads
if (function_exists("show_indexAds") && function_exists("show_towerleftAds") && function_exists("show_towerrightAds"))
{
$ads show_indexAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
 
//Tower left Ads
$ads show_towerleftAds();
if(!empty($ads))
echo '<table><tr><td valign="top">'$ads['type']==$ads['content'] : eval($ads['content']) ,'</td><td width="100%" valign="top">';
 
unset($ads);
//Tower Right Ads
$ads show_towerrightAds();
if(!empty($ads))
echo '<table><tr><td width="100%" valign="top">';
unset($ads);
}
 
 
echo '</td></tr></table>';

 //Çàêîí÷åíà øàïêà è ìåíþ. Òåïåðü íà÷èíàåì èíôîðìàöèîííîå òàáëî ñ ëèíêîì íà ñàéò, íîâîñòÿìè è íåïðî÷èòàííûìè ñîîáùåíèÿìè.
echo '<table cellpadding="0" cellspacing="0"><tr style="height: 3px;"><td>&nbsp;</td></tr></table>';
echo '<table cellpadding="5" cellspacing="0" width="100%" class="newsborder">
 <tr>'
;

// êíîïêà íà ñàéò (åñëè íàñòðîåíî)
if (empty($settings['url_link']))
echo '';
else
echo ' <td class="newsboxprev">&nbsp;</td><td class="sitelink"><table><tr><td><img src="'.$settings['images_url'].'/site.gif"  alt="" /></td><td><a href="'$settings['url_link'], '" >'$settings['url_text'], '</a></td></tr></table></td>';

echo ' <td class="newsboxprev">&nbsp;</td><td class="newsbox" width="30%">
  <span class="smalltext"><b>'
$txt['news'], '</b>: '$context['random_news_line'], '</span>
  </td>'
;
//âñòàâëÿåì íåïðî÷èòàííûå ñîîáùåíèÿ, åñëè íå þçåð, òî ïðèâåòñâèå.   
echo '<td class="newsboxprev">&nbsp;</td><td class="newsbox">';

if ($context['user']['is_logged'])
{
echo   '<a href="'$scripturl'?action=unread">'$txt['unread_since_visit'], '</a> <br />
<a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />';
}
Else
echo sprintf($txt['welcome_guest'], $txt['guest_title']);

echo '   </td></tr>   
</table>'
;




//Do we have some new pms? Show the newest.
if(!empty($context['user']['unread_messages'])) {

//The PM Informer is closed by default.
$options['collapse_header_pmi'] = 1;

// PMI collapse object.
echo '
<script language="JavaScript" type="text/javascript"><!-- // -->'
;
echo chr(60) . chr(33) . chr(91) . chr(67) . chr(68) . chr(65) . chr(84) . chr(65) . chr(91);

echo '
// And create the info center object.
var pmInformer = new smfToggle("upshrinkPMI", '
, empty($options['collapse_header_pmi']) ? 'false' 'true'');
pmInformer.useCookie('
$context['user']['is_guest'] ? 0');
pmInformer.setOptions("collapse_header_pmi", "'
$context['session_id'], '");
pmInformer.addToggleImage("upshrink_pmi", "/collapse.gif", "/expand.gif");
pmInformer.addTogglePanel("upshrinkHeaderPMI");
//'
;
echo chr(93) . chr(93) . chr(62);
echo '
</script>'
;

echo '
<table align="center" width="500px">
<tr>
<td>
<div style="padding: 6px; vertical-align: middle; text-align: center;  '
,!empty($modSettings['pmi_style']) ? $modSettings['pmi_style'] : $txt['pmi_style_standard'],'">
<a href="#" onclick="pmInformer.toggle(); return false;"><img id="upshrink_pmi" src="'
$settings['images_url'], '/', empty($options['collapse_header_pmi']) ? 'collapse.gif' 'expand.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin-right: 2ex;" align="right" /></a>';
printf($txt['pmi_title'], $context['user']['unread_messages']);
echo '
</div>
<div id="upshrinkHeaderPMI"'
, empty($options['collapse_header_pmi']) ? '' ' style="display: none;"''>
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="windowbg">
<td>
<b>'
$txt['from'], ':</b> <a href="' $scripturl '?action=profile;u='$context['pm_informer']['from'], '">'$context['pm_informer']['sender'], '</a><br />
<b>'
$txt['subject'], ':</b> '$context['pm_informer']['subject'], '<br />
<b>'
$txt['date'], ':</b> '$context['pm_informer']['msgtime'], '<br />
<b>'
$txt['message'], ':</b> '$context['pm_informer']['body'], '<br /><br />
<div align="right"><a href="' 
$scripturl '?action=pm"><span class="smalltext">'$txt['pmi_view_all'], '</span></a></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>'
;
}
// The main content should go here.
echo '
<div id="bodyarea" style="padding: 2em 0px 2em 0px;">'
;
}

function 
template_body_below()
{
global $context$settings$options$scripturl$txt;

echo '
</div>'
;


//Close table for towerright ads
if (function_exists("show_towerrightAds") && function_exists("show_towerleftAds") && function_exists("show_bottomAds"))
{
$ads show_towerrightAds();
if(!empty($ads))
echo '</td><td valign="top">'$ads['type']==$ads['content'] : eval($ads['content']) ,'</td></tr></table>'
 
unset($ads);
//Close table for towerleft ads
$ads show_towerleftAds();
if(!empty($ads))
echo '</td></tr></table>';
unset($ads);
 
//Show ads on the bottom of the page
$ads show_bottomAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
}
 
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td valign="middle" align="center" style="white-space: nowrap; color">
<table cellpadding="1" cellspacing="1" class="copy"><tr><td class="contacts">
'
theme_copyright(), '
</td></tr></table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
                  <tr>
                    <td width="33%" align="center">
                    <script type="text/javascript" src="//counter.goingup.com/js/tracker.js?st=bnfe536&amp;b=23"></script><noscript><a href="http://www.goingup.com" title="web analysis"><img src="//counter.goingup.com/default.php?st=bnfe536&amp;b=23" border="0" alt="web analysis" /></a></noscript>
                    </td>
                    <td width="33%" align="center"><font size="1"> EnerGy Skin by</font> <a href="mailto: [email protected]">[cer]</a>
</td>
                    <td width="34%" align="center">
<!-- Begin W3Counter Tracking Code -->
<script type="text/javascript" src="http://www.w3counter.com/tracker.js"></script>
<script type="text/javascript">
w3counter(17432);
</script>
<noscript>
<div><a href="http://www.w3counter.com"><img src="http://www.w3counter.com/tracker.php?id=17432" style="border: 0" alt="W3Counter" /></a></div>
</noscript>
<!-- End W3Counter Tracking Code-->
                    </td>
                  </tr>
                </table>
</td>
</tr>
</table>'
;

// Show the load time?
if ($context['show_load_time'])
echo '
<span class="smalltext">'
$txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</span>';

echo '
</div>'
;
}

function 
template_html_below()
{
global $context$settings$options$scripturl$txt$modSettings;

echo '
</body></html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context$settings$options;

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '&nbsp;>&nbsp;';
}

echo '</div>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context$settings$options$scripturl$txt;

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first 'last';
$last 'first';
}
else
{
$first 'first';
$last 'last';
}

// Show the start of the tab section.
echo '

<div class="tabs">
<ul>'
;
foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '   <li><a '$button['active_button'] ? ' class="current"' '' ' href="'$button['href'], '">          
 <span class="menu-right">' 
$button['title'] , '</span></a>';
 
//    Does this button have any subbuttons?
        
if(!empty($button['sub_buttons']))
        {
            echo 
'
                             <div class="sub">
 <ul>'
;
            foreach(
$button['sub_buttons'] as $sub_button)
                    echo 
'
                <li><a href="'
$sub_button['href'], '">' $sub_button['title'] , '</a></li>';
            echo 
'
                                 </ul>
 <div class="btm-bg"></div>    
 </div>'
;      
         }
 
 echo' </li>';
 
 }
 
echo '
</ul>
</div>
<div class="tabsright"><img src="'
$settings['images_url'], '/maintab_last.gif" alt="" border="0" /></div>';

}

// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
global $settings$buttons$context$txt$scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
{
if ($value['url'] === '{SUBMIT}')
$buttons[$key] = '<input type="submit" value="' . (isset($value['custom']) ? $value['custom'] : '') . $txt[$value['text']] . '" class="button_strip_submit" />';
else
$buttons[$key] = '<a href="' $value['url'] . '" ' . (isset($value['custom']) ? $value['custom'] : '') . '>' $txt[$value['text']] . '</a>';
}
$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'last' 'first' '">&nbsp;</td>
<td class="'
$direction == 'top' 'main' 'mirror''tab_back">'implode(' &nbsp;|&nbsp; '$button_strip) , '</td>
<td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'first' 'last' '">&nbsp;</td>';
}

?>

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 15, 2008, 09:49:45 PM
Found it. Starting on Line 270 you should have this:

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
echo '</td></tr><tr><td colspan="3">

<div id="toolbar">
',template_menu(),'
</div>';
echo '</td></tr></table>';


but what you did was enter this:

//Çàêàí÷èâàåòñÿ âåðõíÿÿ òàáëèöà1 è âñòàâëÿåì ìåíþøêó
   echo '</td></tr><tr><td colspan="3">
   
   <div id="toolbar">
               ',template_menu(),'
            </div>';   


That's your problem.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 15, 2008, 10:05:35 PM
Thank you .

See earlier i have the ads management inside the

Template_menu() and echo ',/td></tr></table>'

So i have never used the line you have mentioned.

Could you tell me, if there are going to be two link one after template_menu and one after template tower ads .

Will that change any design.

And now have a look at it and give me some suggestions Antechinus.

http://discuss.itacumens.com/index.php?action=forum
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 15, 2008, 10:11:27 PM
I don't understand what you are asking. It seems to be working except that I can't see any drop menus as a guest. Also you will need to reduce the spacing between tabs. It is fine on a 1280 screen but there is not enough width on a 1024 and it breaks the menu.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 15, 2008, 11:00:32 PM
I mean,

http://www.simplemachines.org/community/index.php?topic=253756.msg1800404#msg1800404

On line 270, you look at the echo td tr and table.

Where i have ads mod installed , so it had came before echo td tr and table.

So now i have added a new echo td tr and table code before the ads mods, will it be a problem if i use it on and before ads mod over line 270 - 280

Ok Testing as a user, i have sent a PM to you.

Thanks a lot and i will now reduce the spacing between tabs.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 15, 2008, 11:06:39 PM
It's only a problem because it will break validation but yes, you should fix it. I don't know anything about that mod you've installed. You asked me to do a menu for Energy so I did, but I was working with a fresh copy of the theme. I've you've hacked theme ask the guy that made the mod about it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 15, 2008, 11:08:13 PM
Anyway you can't run that many links in your toolbar. There simply isn't enough room for them, particularly on a 1024 screen. The whole idea of drop menus is that you don't need so many links in your toolbar.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sudhakar Arjunan on November 15, 2008, 11:29:37 PM
Quote from: antechinus on November 15, 2008, 11:06:39 PM
It's only a problem because it will break validation but yes, you should fix it. I don't know anything about that mod you've installed. You asked me to do a menu for Energy so I did, but I was working with a fresh copy of the theme. I've you've hacked theme ask the guy that made the mod about it.

Thank you, Thank you Antechinus.

Quote from: antechinus on November 15, 2008, 11:08:13 PM
Anyway you can't run that many links in your toolbar. There simply isn't enough room for them, particularly on a 1024 screen. The whole idea of drop menus is that you don't need so many links in your toolbar.

Yes, i was just testing it on all the screens.
And now i was on Night Shift. Even today is Sunday, once i back to the same shift tomorrow. I will work on the toolbox to get minimized. Now i have reduced the padding to 10 from 21.

Thanks a lot Antechinus.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Adish - (F.L.A.M.E.R) on November 17, 2008, 08:17:14 PM
Anyone who can help me get this drop down for orange vista ? ( i would probably like a black drop down with this orange colour) :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on November 19, 2008, 11:17:04 AM
Durr.. If I would want to add a dropdown menu with an image as "parent", what should I do then?
I'm trying to add a dropdown menu under the "profile"-button of the Dogal-theme =/
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 19, 2008, 07:45:29 PM
K, since Dogal is such a lovely theme and I haven't done a 11.x theme with image buttons yet I'll do it. Should be able to sort it next week.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: auss9960 on November 21, 2008, 06:57:14 PM
I have read with interest this thread, but struggled with appling it myself. I am using SMF 1.1.7 with BlueAce theme and would like to declutter my menu bar with dropdown menus. Could someone please help me with this? I's be ever so grateful.

Paul
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 22, 2008, 03:06:32 PM
Kosedragen: I've had a play with Dogal and there are a few things about it that are a bit tricky. I'll have another look at it when I get time. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on November 23, 2008, 09:07:54 AM
Okay ^^ Thanks anyways, I'll be waiting.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Burke ♞ Knight on November 23, 2008, 09:35:21 AM
The 2.0 Beta 4 version is now a mod on the mod site. :)

http://custom.simplemachines.org/mods/index.php?mod=1508
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 25, 2008, 07:27:43 PM
Quote from: Kosedragen on November 23, 2008, 09:07:54 AM
Okay ^^ Thanks anyways, I'll be waiting.

Ok, sorted. Now I have to use the float: left; property with these menus so that means the row of buttons can't centre itself automatically. I've set a left margin on the toolbar that looks pretty good on the standard width of the theme when logged in or out. You can tweak it to suit yourself.

Anyway for index.template.php:

Find:

echo '
</head>


Replace with:

echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';

echo '
</head>


Find:

<div id="toolbar" align="center">',template_menu(),'</div>

Replace with:

<div id="toolbar">',template_menu(),'</div>

Find:

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// Show the [home] and [help] buttons.
echo '
<a href="', $scripturl, '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' : $txt[103]), '</a>', $context['menu_separator'], '
<a href="', $scripturl, '?action=help">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0" />' : $txt[119]), '</a>', $context['menu_separator'];

// How about the [search] button?
if ($context['allow_search'])
echo '
<a href="', $scripturl, '?action=search">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' : $txt[182]), '</a>', $context['menu_separator'];

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<a href="', $scripturl, '?action=admin">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</a>', $context['menu_separator'];

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<a href="', $scripturl, '?action=profile">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' : $txt[467]), '</a>', $context['menu_separator'];

// The [calendar]!
if ($context['allow_calendar'])
echo '
<a href="', $scripturl, '?action=calendar">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0" />' : $txt['calendar24']), '</a>', $context['menu_separator'];

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<a href="', $scripturl, '?action=login">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' : $txt[34]), '</a>', $context['menu_separator'], '
<a href="', $scripturl, '?action=register">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' : $txt[97]), '</a>';
}
// Otherwise, they might want to [logout]...
else
echo '
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</a>';
}


Replace with:

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '   
      <div class="tabs">
                 <ul>';

// Show the [home] and [help] buttons.
echo '
<li><a href="', $scripturl, '"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/home.gif" alt="' . $txt[103] . '" border="0" />' : $txt[103]), '</span></a></li>', $context['menu_separator'], '
<li><a href="', $scripturl, '?action=help"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/help.gif" alt="' . $txt[119] . '" border="0" />' : $txt[119]), '</span></a></li>' , $context['menu_separator'];

// How about the [search] button?
if ($context['allow_search'])
echo '
<li><a href="', $scripturl, '?action=search"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/search.gif" alt="' . $txt[182] . '" border="0" />' : $txt[182]), '</span></a></li>' , $context['menu_separator'];

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<li><a href="', $scripturl, '?action=admin"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</span></a>
     <div class="sub">
                         <ul>
                                <li><a href="index.php?action=viewErrorLog;desc">Error Log</a></li>
<li><a href="index.php?action=packages">Packages</a></li>
<li><a href="index.php?action=regcenter">Registration</a></li>
<li><a href="index.php?action=maintain">Maintenance</a></li>
<li><a href="index.php?action=news">News and Newsletters</a></li>
                        </ul>                     
                  </div>
</li>' ,$context['menu_separator'];

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<li><a href="', $scripturl, '?action=profile"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' : $txt[79]), '</span></a>

<div class="sub">
                         <ul>
                        <li><a href="index.php?action=profile;sa=account">Account Settings</a></li>
<li><a href="index.php?action=profile;sa=theme">Look and Layout</a></li>
<li><a href="index.php?action=profile;u=1;sa=forumProfile">Forum Profile</a></li>
                        </ul>                     
                  </div>
</li>' , $context['menu_separator'];

// The [calendar]!
if ($context['allow_calendar'])
echo '
<li><a href="', $scripturl, '?action=calendar"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/calendar.gif" alt="' . $txt['calendar24'] . '" border="0" />' : $txt['calendar24']), '</span></a></li>' , $context['menu_separator'];

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '
<li><a href="', $scripturl, '?action=login"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/login.gif" alt="' . $txt[34] . '" border="0" />' : $txt[34]), '</span></a></li>' ,$context['menu_separator'],'
<li><a href="', $scripturl, '?action=register"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/register.gif" alt="' . $txt[97] . '" border="0" />' : $txt[97]), '</span></a></li>';
}
// Otherwise, they might want to [logout]...
else
echo '
<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/logout.gif" alt="' . $txt[108] . '" border="0" />' : $txt[108]), '</span></a></li>';

    echo '
         </ul>
      </div>';         
}


For style.css:

Find:

#toolbar {
font-size: 1.0em;
height: 43px;
}


Replace with:

/*Drop menu codes*/

#toolbar {
    font-size: 11px;
height: 40px;
margin: 0 0 0 67px;
    padding: 0 0 0 0;
background: none;
}

.tabs {   
    margin: auto;
    padding: 0 0 0 0;
    list-style: none;
    background: none;
}

.tabs a:link{
    cursor: pointer;
}

.tabs a:visited { }

.tabs ul {   
    height: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
float: left;
}

.tabs ul li a.current { }

.tabs li {
    padding: 0;
    position: relative;
    z-index: 1;
float: left;
}

.tabs li:hover {
    z-index:2;
}

.tabs li a {
    display: block;
    line-height: 40px;
    overflow: hidden;
float: left;
}

a .menu {
    width: 108px;
    height: 40px;
    line-height: 40px;
    display: block;
     padding: 0 2px 0 0;
float: left;
}

.tabs li:hover .sub,
.tabs li.hover .sub {
    display: block;
}

.tabs li .sub {
    display: none;
    position: absolute;
    top: 20px;
    left: 0px;
    height: 16px;
    width: 186px;
    padding-top: 16px;
    background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
    width: 186px;
    height: auto;
    margin: 0 0 0 0;
    padding: 2px 0 12px 9px;
    list-style: none;
    background: url(images/submenu_bg.png) 0 100% no-repeat;
}

.tabs li:hover li,
.tabs li.current li {
    width: 100%;
    padding: 0;
    background: none;
}

.tabs li:hover li a,
.tabs li.current li a {
    color: #335E1F;
    background: none !important;
    text-decoration: none;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 17px;
    line-height: 15px;
    width: 144px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
     color: #4FAF00;
    background: none;   
    line-height: 15px;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 17px;
}

/*IE*/
.tabs li li a:hover {
    color: #4FAF00;
    line-height: 15px;
    margin: 0 0 0 0;
    padding: 2px 7px 2px 17px;
    background: none;
}
/**/

/* End of drop menu codes. */


To adjust the left margin of the toolbar change the 67px to suit.
Also put these two images in the theme's images folder.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fsubmenu_top-1.png&hash=dfea5f48ef67f54d49c47695aa8104a1935dae26)  (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi298.photobucket.com%2Falbums%2Fmm268%2FMurtadHeaven%2Fsubmenu_bg-2.png&hash=955d9dba85875fe2cceec8143feab7ded538df4c)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Adish - (F.L.A.M.E.R) on November 26, 2008, 08:33:34 AM
Anything with orange vista...? Please...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 26, 2008, 04:10:42 PM
Orange Vista makes my eyes bleed and I'm not coding whilst wearing shades. :P

If one of the more mellow looking Vista's uses the same format I might have a look at that. Maybe. Then again, you probably know as much about coding as I do. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Adish - (F.L.A.M.E.R) on November 26, 2008, 04:24:31 PM
naah.. i dunno anything in coding lol... trust me.. i dont know anything.. :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on November 27, 2008, 03:21:31 PM
Haha, funny. Thanks, mate ^^
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 27, 2008, 04:50:41 PM
Meh. I'm kinda over doing these menus. By the time I get my head around a new theme (and they're all different) and sort the css and images so the thing works and looks good it always takes me a minimum of an hour and sometimes more.

There are heaps of examples here already. If anyone wants custom work done they can pm and we'll sort out a price.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Adish - (F.L.A.M.E.R) on November 27, 2008, 04:53:13 PM
 :'(  Price........i know you are doing a great job by helping the users. I appritiate all the work you do. But help out silly noobs like me :P It would be much helpful though.. i checked out many examples myself but messed out the menu alot.. (it isnt i didnt try things, but didnt get it right though. :( )
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on November 27, 2008, 05:00:52 PM
Dude, I didn't get it right the first half a dozen times I tried it either, and I didn't have the benefit of several examples that were already set up for SMF themes. Damned near drove me mental. There are lots of other things I want to do now.

Try doing one or two of the examples that are in the thread already. The themes are free anyway so it isn't as if it will cost you anything. Get those to work (and it's simply a matter of following the instructions) and you'll have a good basis for comparison. You can play with various css properties one at a time and see the effects.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Adish - (F.L.A.M.E.R) on November 27, 2008, 05:09:43 PM
Yea thats what i am trying to do.. its just the drop downs work fine.. but the navigation gets messy.. i need to get into coding soon i think... I understand you have other priorities.. :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: yoeri on December 02, 2008, 05:12:30 AM
I try to edit the visionsmc theme. but it wont work can you help me
http://custom.simplemachines.org/themes/index.php?lemma=519
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on December 02, 2008, 03:43:25 PM
Quote from: antechinus on November 27, 2008, 05:00:52 PM
Dude, I didn't get it right the first half a dozen times I tried it either, and I didn't have the benefit of several examples that were already set up for SMF themes. Damned near drove me mental. There are lots of other things I want to do now.

Try doing one or two of the examples that are in the thread already. The themes are free anyway so it isn't as if it will cost you anything. Get those to work (and it's simply a matter of following the instructions) and you'll have a good basis for comparison. You can play with various css properties one at a time and see the effects.

I know exactly what you mean.  :P
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: HR on December 02, 2008, 05:57:42 PM
Has anybody got any idea how to add a level 3 to this.. I would think it would take additional css but an example would be helpful.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on December 02, 2008, 06:24:39 PM
There are plenty of CSS-based menus that have practically unlimited levels. You can find a bunch of great examples of them here (http://www.dynamicdrive.com/style/csslibrary/category/C1/).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Beltazar_DSA on December 02, 2008, 11:35:26 PM
Oh wow..    I have been looking for this or something like this for a while now..    And while I was just thinking of something completely new...  I just saw this thread..  awesome..    going to attempt this in a bit..   

Thanks..

Beltazar
dreamslayervisions
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on December 03, 2008, 12:50:48 AM
Quote from: yoeri on December 02, 2008, 05:12:30 AM
I try to edit the visionsmc theme. but it wont work can you help me
http://custom.simplemachines.org/themes/index.php?lemma=519
I have already told you that I would do that for you if, and only if, you show me that you have written permission form Yagiz to remove his copyright from your copy of his theme.

As a designer myself who does the right thing by other designers I take copyright removal seriously for my own themes and other people's themes. I even add an extra page to some of my themes to give credit where it is due. If you can't respect other people's work enough to give them credit for it then I see no reason why I should help you.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on December 04, 2008, 06:39:22 AM
Auch..

antechinus; this is not working properly at all =/
The drop down menus have no background (even though I added the images to the image folder) and you've hard coded the txt-strings. My forum runs on two languages, so I tried to add the strings myself.. With minimum success. The strings are only shown after you have clicked on the proper button.

Take a look:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi161.photobucket.com%2Falbums%2Ft226%2FKosedragen%2Fdropdownerror.png&hash=bd9fb40db9bdfda5bdff8fd789dd79a4a593aac3)

Translated it reads:
Account Settings
Look and Layout
Forum Profile

Please help me one more time ^^;
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on December 04, 2008, 03:07:26 PM
Dogal doesn't have its own languages folder so you need to create one.
In this you put the ThemeStrings.whateverlanguage.php files. This example is for English.

<?php
// Version: 1.1; ThemeStrings.

//Admin button sub menu strings.

$txt['banlist'] = 'Ban List';

$txt['packages'] = 'Packages';

$txt['regist'] = 'Registration';

$txt['errorlog'] = 'Forum Error Log';

$txt['maintain'] = 'Forum Maintenance';

$txt['newsand'] = 'News and Newsletters';

// Messages button sub menu strings.

$txt['inbox'] = 'Inbox';

$txt['outbox'] = 'Outbox';

$txt['sendmess'] = 'Send Message';

$txt['searchmess'] = 'Search Messages';

$txt['pm_options'] = 'Personal Message Options';

// Profile button sub menu strings.

$txt['summary'] = 'Summary';

$txt['forpro'] = 'Forum Profile';

$txt['layout'] = 'Look and Layout';

$txt['account'] = 'Account Settings';

?>



To do the same file for Norwegian all you need to do is copy this one and rename it to ThemeStrings.norwegian.php (or maybe norwegian-utf8 if you use that). Then you simply edit the text on the right to whatever you want displayed. So if I change this:

$txt['account'] = 'Account Settings';

to this:

$txt['account'] = 'Your Account Settings Just In Case You Were Wondering What They Were';

it wont fit on the drop menu but it sure will look different. :D
I'm sure you get the idea. You can do the same for any language you want to use.

You also need to find this in index.template.php:

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;


and change it to:

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;

/* Call to Theme String for languages  */
    if(loadlanguage('ThemeStrings') == false)
       loadLanguage('ThemeStrings', 'english');


This will load strings for your selected language and will default to English if one of your strings is missing. Once you have this and the languages folder in place you can create new ThemeStrings files and add whatever $txt strings you want to them.

Using the ThemeStrings.english.php example I gave above the Admin and Profile buttons should look like this.

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
<li><a href="', $scripturl, '?action=admin"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/admin.gif" alt="' . $txt[2] . '" border="0" />' : $txt[2]), '</span></a>
     <div class="sub">
                         <ul>
                                <li><a href="index.php?action=viewErrorLog;desc">',$txt['errorlog'],'</a></li>
<li><a href="index.php?action=packages">',$txt['packages'],'</a></li>
<li><a href="index.php?action=regcenter">',$txt['regist'],'</a></li>
<li><a href="index.php?action=maintain">',$txt['maintain'],'</a></li>
<li><a href="index.php?action=news">',$txt['newsand'],'</a></li>
                        </ul>                     
                  </div>
</li>' ,$context['menu_separator'];

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
<li><a href="', $scripturl, '?action=profile"><span class="menu">' ,($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/' . $context['user']['language'] . '/profile.gif" alt="' . $txt[79] . '" border="0" />' : $txt[79]), '</span></a>

<div class="sub">
                         <ul>
                        <li><a href="index.php?action=profile;sa=account">',$txt['account'],'</a></li>
<li><a href="index.php?action=profile;sa=theme">',$txt['layout'],'</a></li>
<li><a href="index.php?action=profile;u=1;sa=forumProfile">',$txt['forpro'],'</a></li>
                        </ul>                     
                  </div>
</li>' , $context['menu_separator'];


Hope that all makes sense. Now about the images I'm not sure. If they are in the images folder then the stylesheet should call them. I ran this modifed theme on my local host and the images were fine.

Did you add the image preload code before your closing head tag? Without that they can take a few seconds to render if you have a slow connection.


Figured it out. I have several of these images for different themes in the same Photobucket account. You'll need to rename them to submenu_top.png and submenu_bg.png.
Do that and they'll work. ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on December 05, 2008, 04:16:37 PM
Thank you so much : D It works like a charm!

Buuut, there is one minute problem left. That would be this:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi161.photobucket.com%2Falbums%2Ft226%2FKosedragen%2Fdropdownerror-1.png&hash=807dc0660f172928add5cf491017c7e79dcaf897)
When I try to add the forum button again it jumps down for some reason o.O How can I fix that?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on December 05, 2008, 04:19:07 PM
You've run out of space in the menu bar. Use fewer buttons.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on December 05, 2008, 04:22:14 PM
Yeah I figured that might be why; but why did it not happen before? I've had all of those buttons on one row before I added the dropdown.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on December 05, 2008, 04:25:30 PM
Well reduce the left margin then. You have some space there.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Kosedragen on December 05, 2008, 04:26:56 PM
Ah nevermind. The calendar-button was useless anyways x3

Again; I'm extremely grateful. Thank you ^^
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on December 07, 2008, 04:28:08 PM
Quote from: HR on December 02, 2008, 05:57:42 PM
Has anybody got any idea how to add a level 3 to this.. I would think it would take additional css but an example would be helpful.

that´s what i want too....
i tried several codes but only with getting error and i don´t want to install another menubar
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: yoeri on December 18, 2008, 03:55:11 PM
Antechinus.

I dont have written permission form Yagiz to remove the copyright from his theme.
I removed the copyright because the links do not work.

Style by: kreativfantasy.com | Ported to SMF by: cakal93

Regards yoeri
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Acans on December 18, 2008, 09:32:47 PM
Quote from: LHVWB on August 05, 2008, 08:01:55 AM
Wow, Very nice HCM. Works perfectly! :D

For those that are using SMF 2 Beta, here is a quick edit that I did to make it work with the new version of SMF.

You will need to add the style code to the 'style.css' file as described above by HCM. But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta.

For SMF 2 Beta ONLY.

Find the 'template_menu()' function from your index.template.php
You should find some code like this:
    // Show the start of the tab section.

From then on, the function will have some html that serves only to create the buttons.

For the default theme, it looks like this:
    echo '
            <table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
                <tr>
                    <td class="maintab_' , $first , '">&nbsp;</td>';

    foreach ($context['menu_buttons'] as $act => $button)
        echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '                <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
                    <a href="', $button['href'], '">', $button['title'], '</a>
                </td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The end of tab section.
    echo '
                <td class="maintab_' , $last , '">&nbsp;</td>
            </tr>
        </table>';


Replace it with this code:
   // Show the start of the tab section.
   echo '
          <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                   <td class="catbg" height="32">
                    <div id="menu">
                           <ul class="menu">';
                       
    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
                             <li class="level1"><a href="', $button['href'], '" class="level1"><span><span class="title">' , $button['title'] , '</span></span></a>';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                            <ul class="level2">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                                 <li class="level2"><a href="', $sub_button['href'], '" class="level2"><span>' , $sub_button['title'] , '</span></a></li>';
            echo '
                            </ul>';
        }
       
        echo '
                            </li>';
    }
    echo '
                           </ul>
                    </div>
                 </td>
              </tr>
          </table>';


You will have to change it for custom themes, but you get the idea. :D

Thanks again, to HCM.

i can only find template_menu() but nothing else in my index.template.php for smf 2.0.4
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Jessikard on December 27, 2008, 08:01:16 AM
 :( can anyone help to get a level3 in this menu for smf 1.1.7

thx Jessi
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Malpercio on January 01, 2009, 02:25:49 PM
Cool, thanks a lot for this, I'll most likely be implementing this into the next theme I build!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: bulutcini on January 09, 2009, 02:14:23 AM
It looks nice thank you for sharing.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on January 30, 2009, 03:33:01 PM
If anyone is interested I've just done a Babylon-style button menu for the 1.1.x default theme.

http://www.simplemachines.org/community/index.php?topic=288919.msg1903911#msg1903911
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: eviljesus on January 31, 2009, 11:05:14 AM
Has Anyone got this to work with slickgrey theme ive been trying and havent gotten it to work right.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Enders on February 05, 2009, 02:39:49 AM
Is there a way to have this navigation bar always on top?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on February 05, 2009, 01:50:42 PM
Like this (http://www.empireofthesun.net)?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on February 05, 2009, 02:02:09 PM
Nice trick. I like that idea.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Enders on February 05, 2009, 09:49:42 PM
Quote from: SunKing on February 05, 2009, 01:50:42 PM
Like this?

yea like that!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on February 06, 2009, 07:39:08 PM
The css for making the menu static looks like this:

#static{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 1000;
}

* html #static{ /*IE6 only rule, applied on top of the default above*/
position: absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+50+"px" : body.scrollTop+50+"px");
}


Then add id="static" to the containing tag for the menu, something like <div id="static" class="your_menu_class">.....
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Paragaya on February 11, 2009, 03:15:26 AM
Quote from: LHVWB on October 04, 2008, 09:48:40 PM
As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

You will need to add the css style code to the 'style.css' file as described above by HCM in the first post (http://www.simplemachines.org/community/index.php?topic=253756.msg1646830#msg1646830). But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta 4. You will have to copy the images that are attached to that post as well. ;)

For SMF 2 Beta 4 ONLY.

Find the 'template_menu()' function from your index.template.php. The code in the function has the html that shows your menu.

For the default theme, it looks like this:
    echo '
    <div id="main_menu">
        <ul class="clearfix">';

    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li id="button_', $act, '">
                <a', $button['active_button'] ? ' class="active"' : '', ' title="', $act , '" href="', $button['href'], '">
                    <span', isset($button['is_last']) ? ' class="last"' : '', '>', ($button['active_button'] ? '<em>' : ''), $button['title'], ($button['active_button'] ? '</em>' : ''), '</span>
                </a>
            </li>';
    }

    echo '
        </ul>
    </div>';


Replace it with this code:
    echo '
    <div id="menu">
        <ul class="menu">';

    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li class="level1"><a href="', $button['href'], '" class="level1"><span><span class="title">' , $button['title'] , '</span></span></a>';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
            <ul class="level2">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li class="level2"><a href="', $sub_button['href'], '" class="level2"><span>' , $sub_button['title'] , '</span></a></li>';
            echo '
            </ul>';
        }
        echo '
            </li>';
    }
   
    echo '
        </ul>
    </div>';


Also this css fix is required so that it works for SMF 2 Beta 4. Make sure that you have added the css from the first post in this topic (http://www.simplemachines.org/community/index.php?topic=253756.msg1646830#msg1646830) before you try to make this edit.

Find this code from your 'style.css' file:
div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_white.png') no-repeat 100% 0;
}


Replace with this code:
div#menu ul.menu {
   padding-right: 1px;
   background: url(images/catbg.jpg) #88A6C0 repeat-x; /* Change your mainmenu background color/image here */
}


You will have to change the css code for custom themes, but you get the idea. :D

Edit: Updated code, there was a xhtml error with a closing </li> tag. Thank you to antechinus (http://www.simplemachines.org/community/index.php?action=profile;u=129726) for pointing it out. ;)
;

Thanks ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: INamelessI on February 15, 2009, 04:11:19 AM
How do you get this to work with Greenlightv1 with smf 1.1.8? I searched for '// Show the start of the tab section.' in my css file but it didnt find it. Any help please?

My site looks like this: http://www.fussilet.com/index.php?theme=115. Except the buttons, like the "forum' button moves to the side with a icon. Seems like he removed that icon...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: kenny1703 on February 18, 2009, 02:17:05 AM
I can not create my signature in this room :( -

------------
Belly Learn (http://www.bellycommoditytrading.com) Bond Trading (http://www.bondfuturestrading.com)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: aotcsw on February 26, 2009, 08:03:38 PM
Anyone know how to integrate it with Silentwave 115 theme? SMF 1.1.8

Mine doesn't work.  :(

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on February 27, 2009, 12:30:41 PM
http://www.dzinerstudio.com/index.php?topic=2190.0
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: KahneFan on March 03, 2009, 11:16:33 PM
[off topic]

Quote from: Antechinus on October 08, 2008, 11:39:24 PM
Why read the instructions when you can have so much more fun learning by parse error?
It works for me.

I read through this whole thread and this made me LOL :D

[/off topic]

Glad this was made into a Mod (http://custom.simplemachines.org/mods/index.php?mod=1508), I'll give that a go first.

Edit: the mod doesn't seem to like index.template.php on RC1 :(
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Tyrsson on March 04, 2009, 04:11:40 AM
Compare it to a Beta 4 and you will see why ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: bburg5 on March 05, 2009, 12:14:45 PM
I added this feature to my DB_Theme and it works great, but can someone help me get the menu items to be spread out across the menu bar. they are aligned to the left and when I change it to the center, the buttons get messed up. I also added the file.

<?php
// Version: 1.1.5; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context$settings$options$txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '1.1';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;
}

// The main sub template above the content.
function template_main_above()
{
global $context$settings$options$scripturl$txt$modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="'
$context['page_title'], '" />', empty($context['robot_no_index']) ? '' '
<meta name="robots" content="noindex" />'
'
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/script.js?fin11"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";
// ]]></script>
<title>'
$context['page_title'], '</title>';

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/print.css?fin11" media="print" />';

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/fonts-compat.css" />';

            
//eFloating Bar Mod by Ricky.
    
if ($context['user']['is_guest'] && !empty($modSettings['efloatingbar_mode_guest']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
      echo 
'<script language="JavaScript" type="text/javascript" src="'$settings['default_theme_url'], '/floating-bar-guest.js"></script>';
   
   if (
$context['user']['is_logged'] && !empty($modSettings['efloatingbar_mode_logged']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
   echo
'
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/floating-bar-logged.js"></script>
'
;
   echo 
'<style type="text/css"> ',
(empty(
$modSettings['efloatingbar_css_enable']))? $txt['efloatingbar_css_default'] : $modSettings['efloatingbar_user_style'] , '</style>';
      
//End eFloating Bar Mod


// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="'
$scripturl'?action=help" target="_blank" />
<link rel="search" href="' 
$scripturl '?action=search" />
<link rel="contents" href="'
$scripturl'" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
{
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
}

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = '
, empty($options['collapse_header']) ? 'false' 'true'';

function shrinkHeader(mode)
{'
;

// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>'
;

// the routine for the info center upshrink
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header_ic = '
, empty($options['collapse_header_ic']) ? 'false' 'true'';

function shrinkHeaderIC(mode)
{'
;

if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
</head>
<body>'
;

      
//Show the efloating bar only if the MOD is enabled for Guest and Guests are not on Register or Login Pages
     
if ($context['user']['is_guest'] && !empty($modSettings['efloatingbar_mode_guest']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
     {   
      echo 
'<div id="topbar">
<span style="float:right"><a href="javascript:void(0);" onClick="closebar(); return false"><strong>[x]</strong></a></span>
'
, (empty($modSettings['efloatingbar_text_guest'])) ? $txt['efloatingbar_text_guest_default'] : $modSettings['efloatingbar_text_guest'], '
</div>'
;
}
//Show the efloating bar only if the MOD is enabled for Members
     
if ($context['user']['is_logged'] && !empty($modSettings['efloatingbar_mode_logged']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
     {   
      echo 
'<div id="topbar">
<span style="float:right"><a href="javascript:void(0);" onClick="closebar(); return false"><strong>[x]</strong></a></span>
'
, (empty($modSettings['efloatingbar_text_logged'])) ? $txt['efloatingbar_text_logged_default'] : $modSettings['efloatingbar_text_logged'], '
</div>'
;
}



// Show the menu here, according to the menu sub template.
template_menu_2();


echo '
<table cellspacing="6" cellpadding="0" border="0" width="100%">

<tr>
<td  valign="top">
<a href="'
.$scripturl.'?action=forum" title=""><img src="'$settings['images_url'], '/logo.png"  alt="" />

</td>
<td  valign="top">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3594965">
<table>
<tr><td><input type="hidden" name="on0" value="Sponsors">Sponsors</td></tr><tr><td><select name="os0">
<option value="Bronze Sponsor">Bronze Sponsor $10.00
<option value="Silver Sponsor">Silver Sponsor $25.00
<option value="Gold Sponsor">Gold Sponsor $50.00
<option value="Platinum Sponsor">Platinum Sponsor $100.00
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

</td>
</tr></table>'

echo 
'


'
;

// Show the menu here, according to the menu sub template.
template_menu();


// display user name
echo '
<table width="100%" cellpadding="2" cellspacing="2" border="2" >
<tr>'
;




// display the time



if (!empty($context['user']['avatar']))
echo '
</td>'
;

echo '
<td colspan="0" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a> <br />
<a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />';

}
// Otherwise they're a guest - send them a lovely greeting...
else
echo $txt['welcome_guest'];

// Now, onto our second set of info, are they logged in again?
if ($context['user']['is_logged'])
{
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<b>'
$txt[616], '</b><br />';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
'
$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '<br />';

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
'
$txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}
echo ' </span>';

}


// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo ' </span>
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>

<form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
$txt['smf53'], '</option>
<option value="1440">'
$txt['smf47'], '</option>
<option value="10080">'
$txt['smf48'], '</option>
<option value="43200">'
$txt['smf49'], '</option>
<option value="-1" selected="selected">'
$txt['smf50'], '</option>
</select>
<input type="submit" value="'
$txt[34], '" /><br />
<span class="middletext">'
$txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>'
;
}

echo '
</td>
</tr>
</table>'
;



echo '

'
;





// The main content should go here.
echo '
<div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

function 
template_main_below()
{
global $context$settings$options$scripturl$txt;

echo '
</div>'
;

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function smfFooterHighlight(element, value)
{
element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
}
// ]]></script>
<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'right' 'left''">
<a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="'
$settings['images_url'], '/powered-mysql.gif" alt="'$txt['powered_by_mysql'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://www.php.net/" target="_blank"><img id="powered-php" src="'
$settings['images_url'], '/powered-php.gif" alt="'$txt['powered_by_php'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
<td valign="middle" align="center" style="white-space: nowrap;">
'
theme_copyright(), '


<br />

<a href="http://www.bilisimzamani.net" title="DB Theme" target="_blank"> DB Theme: deruni </a>



</td>
<td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'left' 'right''">
<a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="'
$settings['images_url'], '/valid-xhtml10.gif" alt="'$txt['valid_xhtml'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="'
$settings['images_url'], '/valid-css.gif" alt="'$txt['valid_css'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
</tr>
</table>'
;

// Show the load time?
if ($context['show_load_time'])
echo '
<span class="smalltext">'
$txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '</span>';

// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
{
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
}'
;
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
}'
;
else
echo '
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
}'
;

echo '
// ]]></script>'
;
}

echo '
</div>'
;

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</body></html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context$settings$options;

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '&nbsp;>&nbsp;';
}

echo '</div>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context$settings$options$scripturl$txt;

// Work out where we currently are.
$current_action 'home';
if (in_array($context['current_action'], array('admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
$current_action 'admin';
if (in_array($context['current_action'], array('search''admin''calendar''profile''mlist''register''login''help''pm')))
$current_action $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action 'search';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first 'last';
$last 'first';
}
else
{
$first 'first';
$last 'last';
}

// Show the start of the tab section.
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left: 0px;">
<tr>
<td class="catbg" height="32">


            <div id="menu">
               <ul class="menu">
                     
                  <li class="level1"><a href="'
$scripturl'" class="level1"><span><span class="title">' $txt[103] , '</span></span></a></li>

                  <li class="level1"><a href="'
$scripturl'?action=help" class="level1"><span><span class="title">' $txt[119] , '</span></span></a></li>';

                  
// How about the [search] button?
                  
if ($context['allow_search'])
                  echo 
'
                                  <li class="level1"><a href="'
$scripturl'?action=search" class="level1"><span><span class="title">' $txt[182] , '</span></span></a></li>';

                  
// Is the user allowed to administrate at all? ([admin])
                  
if ($context['allow_admin'])
                  echo 
'
                                  <li class="level1"><a href="'
$scripturl'?action=admin" class="level1"><span><span class="title">' $txt[2] , '</span></span></a></li>';
                             
                  
// Edit Profile... [profile]
                  
if ($context['allow_edit_profile'])
                  echo 
'
                                  <li class="level1 parent"><a href="'
$scripturl'?action=profile" class="level1 parent"><span><span class="title">' $txt[79] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="'
$scripturl'?action=profile" class="level2"><span>' $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="'
$scripturl'?action=profile;sa=account" class="level2"><span>' $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="'
$scripturl'?action=profile;sa=forumProfile" class="level2"><span>' $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>'
;


                  
// Go to PM center... [pm]
                  
if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo 
'
                                  <li class="level1 parent"><a href="'
$scripturl'?action=pm" class="level1 parent"><span><span class="title">' $txt['pm_short'] , ' '$context['user']['unread_messages'] > '[<strong>'$context['user']['unread_messages'] . '</strong>]' '' '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="'
$scripturl'?action=pm" class="level2"><span>' $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="'
$scripturl'?action=pm;sa=send" class="level2"><span>' $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>'
;

// New button... [Media]
                  
if ($context['allow_edit_profile'])
                  echo 
'
                                  <li class="level1 parent"><a href="MAIN ITEM LINK" class="level1 parent"><span><span class="title">Media</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="http://google.com" class="level2"><span>Gallery</span></a></li>
                      <li class="level2"><a href="http://google.com" class="level2"><span>Video</span></a></li>
                      <li class="level2"><a href="http://google.com" class="level2"><span>ITEM 3</span></a></li>
                  </ul></li>'
;
                  
                  
// The [calendar]!
                  
if ($context['allow_calendar'])
                  echo 
'
                                  <li class="level1"><a href="'
$scripturl'?action=calendar" class="level1"><span><span class="title">' $txt['calendar24'] , '</span></span></a></li>';


                  
// the [member] list button
                  
if ($context['allow_memberlist'])
                  echo 
'
                                  <li class="level1 parent"><a href="'
$scripturl'?action=mlist" class="level1 parent"><span><span class="title">' $txt[331] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="'
$scripturl'?action=mlist" class="level2"><span>' $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="'
$scripturl'?action=mlist;sa=search" class="level2"><span>' $txt['hcm_searchmembers'] , '</span></a></li>
                  </ul></li>'
;

                           
                  
// If the user is a guest, show [login] button.
                  
if ($context['user']['is_guest'])
                  echo 
'
                                  <li class="level1"><a href="'
$scripturl'?action=login" class="level1"><span><span class="title">' $txt[34] , '</span></span></a></li>';
                           
                  
// If the user is a guest, also show [register] button.
                  
if ($context['user']['is_guest'])
                  echo 
'
                                 <li class="level1"><a href="'
$scripturl'?action=register" class="level1"><span><span class="title">' $txt[97] , '</span></span></a></li>';
                           
                  
// Otherwise, they might want to [logout]...
                  
if ($context['user']['is_logged'])
                  echo 
'
                      <li class="level1"><a href="'
$scripturl'?action=logout;sesc='$context['session_id'], '" class="level1"><span><span class="title">' $txt[108] , '</span></span></a></li>';

            echo 
'
                            </ul>
                  </div>

</td>
</tr>
</table></center>'
;

}
function 
template_menu_2()
{
global $context$settings$options$scripturl$txt;

// Work out where we currently are.
$current_action 'home';
if (in_array($context['current_action'], array('admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
$current_action 'admin';
if (in_array($context['current_action'], array('search''admin''calendar''profile''mlist''register''login''help''pm')))
$current_action $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action 'search';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first 'last';
$last 'first';
}
else
{
$first 'first';
$last 'last';
}

// Show the start of the tab section.
   
echo '
         <center><table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-left: 0px;">
            <tr>
               <td class="maintab_' 
$first '">&nbsp;</td>';

   
// Show the [home] button.
   
echo ($context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
            <td align="center" valign="top" class="maintab_' 
$current_action == 'home' 'active_back' 'back' '">
               <a href="http://ffwaterfowl.com"?action=Main_Page">' 
$txt[103] , '</a>
            </td>' 
$current_action == 'home' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

   
// Show the [Forum] button.
   
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
            <td align="center" valign="top" class="maintab_' 
$current_action == 'help' 'active_back' 'back' '">
               <a href="http://ffwaterfowl.com/Forum_Page.html"?action=Field_Report">' 
$txt[8] , '</a>
            </td>' 
$current_action == 'help' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

   
// How about the [About_Us] button?
   
if ($context['allow_search'])
      echo (
$current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
            <td align="center" valign="top" class="maintab_' 
$current_action == 'search' 'active_back' 'back' '">
               <a href="http://ffwaterfowl.com/About_Us.html"?action=About_Us">' 
$txt[15] , '</a>
            </td>' 
$current_action == 'search' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

   
// The end of tab section.
   
echo '
            <td class="maintab_' 
$last '">&nbsp;</td>
         </tr>
      </table></center>'
;

}


// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
global $settings$buttons$context$txt$scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'last' 'first' '">&nbsp;</td>
<td class="'
$direction == 'top' 'main' 'mirror''tab_back">'implode(' &nbsp;|&nbsp; '$button_strip) , '</td>
<td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'first' 'last' '">&nbsp;</td>';
}

?>


thanks
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 05, 2009, 03:50:52 PM
The css based menus rely on the float:left property. Get rid of that and they go crazy, as you found out. If you are using a fixed width you can adjust the left padding on the toolbar.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: KahneFan on March 05, 2009, 04:08:17 PM
Quote from: Antechinus on March 05, 2009, 03:50:52 PM
...you can adjust the left padding on the toolbar.

But then you have an unknown variable when it comes to WHO is logged in and WHICH buttons appear. You can center it for regular members, but then it won't be centered for guests and/or mods and/or admins.

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 05, 2009, 04:20:15 PM
One of the joys of life on the internet. Perfection is unattainable for mere humans. :)

Actually you could still do it by using a conditional statement in the template. ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: bburg5 on March 05, 2009, 06:46:39 PM
Quote from: Antechinus on March 05, 2009, 04:20:15 PM
Actually you could still do it by using a conditional statement in the template. ;)

What would be the conditional statement. Is it just adjusting the float in the template file? ???

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 05, 2009, 10:51:24 PM
Off the top of my head I'd do it by echoing a different class or id for the spacer, depending on screen res. It could get a bit messy though, depending on how many resolutions you wanted to cover. There's probably a better way.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: KahneFan on March 05, 2009, 11:15:51 PM
Could you echo a different class based on membergroup? Then set up (3) separate classes?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 06, 2009, 01:53:52 AM
You could go as crazy as you liked with it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: willerby on March 06, 2009, 04:51:20 PM
Quote from: KahneFan on March 03, 2009, 11:16:33 PM
Edit: the mod doesn't seem to like index.template.php on RC1 :(

Would be good to have this upgraded to work with RC1 when someone has a chance... ;D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: KahneFan on March 06, 2009, 05:01:01 PM
You can actually use the manual code to install it manually. There's only two edits to make. And, even though the installer can't see what change to make, they are pretty easy edits as a human :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: willerby on March 06, 2009, 05:30:27 PM
Yeah it works but since upgrade to RC1 its causing multiple errors in error log as per http://www.simplemachines.org/community/index.php?topic=275802.msg1956405#msg1956405 (http://www.simplemachines.org/community/index.php?topic=275802.msg1956405#msg1956405)...

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: bburg5 on March 06, 2009, 05:38:05 PM
Quote from: KahneFan on March 05, 2009, 11:15:51 PM
Could you echo a different class based on membergroup? Then set up (3) separate classes?

Could you help me out with the code as I do not understand where to add the echo or the membergroup in the php files.

Thanks
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: KahneFan on March 06, 2009, 06:05:02 PM
willerby: I'm testing it HERE (http://ipostyoupost.com/SMFThemes/index.php?theme=23) and have received no errors. You can login with test/test to see it in action.

bburg: I understand conditional statements, unfortunately I'm still not up to the level to build them. And no, it's not cause I'm a Horn's fan and you're a Buckeye :P
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: bburg5 on March 06, 2009, 07:47:37 PM
 ::) It is something about "Bowls" that we can not get over.  >:(

Does anyone else know how I can get them centered on the menu bar like the theme has them. I've changed several codes and can not get to work correctly...

Thanks
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: willerby on March 07, 2009, 06:56:13 AM
Quote from: KahneFan on March 06, 2009, 06:05:02 PM
willerby: I'm testing it HERE (http://ipostyoupost.com/SMFThemes/index.php?theme=23) and have received no errors. You can login with test/test to see it in action.

Hmmm. So what's going wrong with my site? Everything works as it should but getting errors on every board index click or topic - undefined index href and title referring back to index.template line 396 which is the drop down menu. The code in the index template is identical to that in the mod so must be some other conflict and as its happening in default theme too this could take a while to resolve.

Got any suggestions where to look and what for? subs.php?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: willerby on March 07, 2009, 12:28:06 PM
Sorry. Having compared Subs.php with fresh RC1 Subs.php found the error - uninstall of SimplePortal failed to erase all additional code causing the errors.

oops
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: PedroMRP on March 08, 2009, 12:09:10 PM
Can someone make a drop down menu for the theme fade2white SMF 1.1.8 ? I've tried almost every solutions in this topic but the menu always goes under the body...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: JBlaze on March 08, 2009, 04:58:15 PM
I am having trouble implementing this tip in my forum. I am using 1.1.8, but I have alot of MODS installed and maybe that is the reason. This is what my index.template.php file looks like:

My website is at www.elitekillersclan.com



<?php
// Version: 1.1.5; index

/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context$settings$options$txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '1.1';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;
}

// The main sub template above the content.
function template_main_above()
{
global $context$settings$options$scripturl$txt$modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''><head>
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="'
$context['page_title'], '" />', empty($context['robot_no_index']) ? '' '
<meta name="robots" content="noindex" />'
'
<meta name="keywords" content="call of duty, world at war, modern warfare, elite, killers clan, brotherhood, xbox 360, video game, video games, entertainment software, entertainment, software, activision, treyarch, games." />
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/script.js?fin11"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";
// ]]></script>
<title>'
$context['page_title'], '</title>';

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/print.css?fin11" media="print" />';

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/fonts-compat.css" />';


//eFloating Bar Mod by Ricky.
 
if ($context['user']['is_guest'] && !empty($modSettings['efloatingbar_mode_guest']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
echo '<script language="JavaScript" type="text/javascript" src="'$settings['default_theme_url'], '/floating-bar-guest.js"></script>';

if ($context['user']['is_logged'] && !empty($modSettings['efloatingbar_mode_logged']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
echo'
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/floating-bar-logged.js"></script>
'
;
echo  
'<style type="text/css"> ',
(empty(
$modSettings['efloatingbar_css_enable']))? $txt['efloatingbar_css_default'] : $modSettings['efloatingbar_user_style'] , '</style>';
//End eFloating Bar Mod
// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="'
$scripturl'?action=help" target="_blank" />
<link rel="search" href="' 
$scripturl '?action=search" />
<link rel="contents" href="'
$scripturl'" />';

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name'], ' - RSS" href="'$scripturl'?type=rss;action=.xml" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?topic='$context['current_topic'], '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' 
$scripturl '?board=' $context['current_board'] . '.0" />';

// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
{
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
}

// Output any remaining HTML headers. (from mods, maybe?)

// Snap Shots Mod
snapShotsMod();


echo $context['html_headers'], '

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = '
, empty($options['collapse_header']) ? 'false' 'true'';

function shrinkHeader(mode)
{'
;

// Guests don't have theme options!!
if ($context['user']['is_guest'])
echo '
document.cookie = "upshrink=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>'
;

// the routine for the info center upshrink
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header_ic = '
, empty($options['collapse_header_ic']) ? 'false' 'true'';

function shrinkHeaderIC(mode)
{'
;

if ($context['user']['is_guest'])
echo '
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);'
;
else
echo '
smf_setThemeOption("collapse_header_ic", mode ? 1 : 0, null, "'
$context['session_id'], '");';

echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
</head>
<body>'
;
//Show the efloating bar only if the MOD is enabled for Guest and Guests are not on Register or Login Pages
     
if ($context['user']['is_guest'] && !empty($modSettings['efloatingbar_mode_guest']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
     {
 
echo '<div id="topbar">
<span style="float:right"><a href="javascript:void(0);" onClick="closebar(); return false"><strong>[x]</strong></a></span>
'
, (empty($modSettings['efloatingbar_text_guest'])) ? $txt['efloatingbar_text_guest_default'] : $modSettings['efloatingbar_text_guest'], '
</div>'
;
}
//Show the efloating bar only if the MOD is enabled for Members 
     
if ($context['user']['is_logged'] && !empty($modSettings['efloatingbar_mode_logged']) && $context['current_action'] != 'login' && $context['current_action'] != 'register')
     {
 
echo '<div id="topbar">
<span style="float:right"><a href="javascript:void(0);" onClick="closebar(); return false"><strong>[x]</strong></a></span>
'
, (empty($modSettings['efloatingbar_text_logged'])) ? $txt['efloatingbar_text_logged_default'] : $modSettings['efloatingbar_text_logged'], '
</div>'
;
}

//Display ads on the top of the page
if (function_exists("show_topofpageAds"))
{
$ads show_topofpageAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
}



echo '
<div class="tborder" '
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' '''>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">'
;

if (empty($settings['header_logo_url']))
echo '
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">'
$context['forum_name'], '</span>';
else
echo '
<center><img src="'
$settings['header_logo_url'], '" style="margin: 4px;" alt="'$context['forum_name'], '" /></center>';

echo '
</td>
<td align="right" class="catbg">
<img src="'
$settings['images_url'], '/blank.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>'
;


// display user name
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>'
;

if($context['user']['is_logged'])
echo '
<td class="titlebg2" height="32">
<span style="font-size: 130%;"> '
$txt['hello_member_ndt'], ' <b>'$context['user']['name'] , '</b></span>
</td>'
;

// display the time
echo '
<td class="titlebg2" height="32" align="right">
<span class="smalltext">' 
$context['current_time'], '</span>';

// this is the upshrink button for the user info section
echo '
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="'
$settings['images_url'], '/', empty($options['collapse_header']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" align="bottom" style="margin: 0 1ex;" /></a>
</td>
</tr>
<tr id="upshrinkHeader"'
, empty($options['collapse_header']) ? '' ' style="display: none;"''>
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>'
;

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">'
$context['user']['avatar']['image'], '</td>';

echo '
<td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">'
;

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a> <br />
<a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a><br />';

}
// Otherwise they're a guest - send them a lovely greeting...
else
echo $txt['welcome_guest'];

// Now, onto our second set of info, are they logged in again?
if ($context['user']['is_logged'])
{
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<b>'
$txt[616], '</b><br />';
if (isset($context['user']['awaiting_mod']))
echo '<br /><a href="' $scripturl '?action=warnpmman">' $context['user']['awaiting_mod'] . '</a><br />';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
'
$context['unapproved_members'] == $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="'$scripturl'?action=viewmembers;sa=browse;type=approve">'$context['unapproved_members'] == $txt['approve_member'] : $context['unapproved_members'] . ' ' $txt['approve_members'], '</a> '$txt['approve_members_waiting'], '<br />';

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
'
$txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'] . $txt['totalTimeLogged2'];

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'] . $txt['totalTimeLogged3'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
}
if ($modSettings['enableChatBelowPM']){
if (count(array_unique(getChatOnlineUserIDs())) == )
echo '<br />' $txt['chat_no_user'];
elseif (count(array_unique(getChatOnlineUserIDs())) == )
  
echo '<br />  1' $txt['chat_aUser']. '.<br />';
else
  
echo '<br /> ' count(array_unique(getChatOnlineUserIDs())). $txt['chat_users']. '<br />';
}
echo ' </span>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo ' </span>
<script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/sha1.js"></script>

<form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" class="middletext" style="margin: 3px 1ex 1px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">'
$txt['smf53'], '</option>
<option value="1440">'
$txt['smf47'], '</option>
<option value="10080">'
$txt['smf48'], '</option>
<option value="43200">'
$txt['smf49'], '</option>
<option value="-1" selected="selected">'
$txt['smf50'], '</option>
</select>
<input type="submit" value="'
$txt[34], '" /><br />
<span class="middletext">'
$txt['smf52'], '</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>'
;
}

echo '
</td>'
;
//Welcome Ads
if (function_exists("show_welcomeAds"))
{
$ads show_welcomeAds();
if(!empty($ads))
{
echo '<td class="windowbg2">';
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
echo '</td>';
}
unset($ads);
}
echo '

</tr>
</table>
</td>
</tr>
</table>'
;

echo '
<table id="upshrinkHeader2"'
, empty($options['collapse_header']) ? '' ' style="display: none;"'' width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>'
;

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<td width="90%" class="titlebg2">
<span class="smalltext"><b>'
$txt[102], '</b>: '$context['random_news_line'], '</span>
</td>'
;
echo '
<td class="titlebg2" align="right" nowrap="nowrap" valign="top">

       
                                <form target="_blank" action="http://www.elitekillersclan.com/google-results.html" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-4604363135206419:69o51df1ge6" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="40" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>


</td>
</tr>
</table>
</div>'
;


// Show the menu here, according to the menu sub template.
template_menu();
//Below the menu ads
if (function_exists("show_indexAds") && function_exists("show_towerleftAds") && function_exists("show_towerrightAds"))
{
$ads show_indexAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);

//Tower left Ads
$ads show_towerleftAds();
if(!empty($ads))
echo '<table><tr><td valign="top">'$ads['type']==$ads['content'] : eval($ads['content']) ,'</td><td width="100%" valign="top">';

unset($ads);
//Tower Right Ads
$ads show_towerrightAds();
if(!empty($ads))
echo '<table><tr><td width="100%" valign="top">';
unset($ads);
}

if ($modSettings['enableShoutBox']){
echo '
<script language="JavaScript" type="text/javascript">
var sb_current_header = false;

function ajax_shoutBox_collapse(mode)
{
document.getElementById("ajax_shoutbox_collapse").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("ShoutBox").style.display = mode ? "none" : "";

sb_current_header = mode;
}
</script>
'
;
if ($modSettings['anyPageShoutBox'])
echo getShoutBoxContent();
else
if (isset($context['chat_isHome']))
echo getShoutBoxContent();
}


// The main content should go here.
echo '
<div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">'
;
}

function 
template_main_below()
{
global $context$settings$options$scripturl$txt;

echo '
</div>'
;


//Close table for towerright ads
if (function_exists("show_towerrightAds") && function_exists("show_towerleftAds") && function_exists("show_bottomAds"))
{
$ads show_towerrightAds();
if(!empty($ads))
echo '</td><td valign="top">'$ads['type']==$ads['content'] : eval($ads['content']) ,'</td></tr></table>'

unset($ads);
//Close table for towerleft ads
$ads show_towerleftAds();
if(!empty($ads))
echo '</td></tr></table>';
unset($ads);

//Show ads on the bottom of the page
$ads show_bottomAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);
}

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;'
$context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' '''">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function smfFooterHighlight(element, value)
{
element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
}
// ]]></script>
<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'right' 'left''">
<a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="'
$settings['images_url'], '/powered-mysql.gif" alt="'$txt['powered_by_mysql'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://www.php.net/" target="_blank"><img id="powered-php" src="'
$settings['images_url'], '/powered-php.gif" alt="'$txt['powered_by_php'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
<td valign="middle" align="center" style="white-space: nowrap;">
'
theme_copyright(), '
</td>
<td width="28%" valign="middle" align="'
, !$context['right_to_left'] ? 'left' 'right''">
<a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="'
$settings['images_url'], '/valid-xhtml10.gif" alt="'$txt['valid_xhtml'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="'
$settings['images_url'], '/valid-css.gif" alt="'$txt['valid_css'], '" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
</tr>
</table>'
;

// Show the load time?
if ($context['show_load_time'])
echo '
<span class="smalltext">'
$txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '</span>';

// This is an interesting bug in Internet Explorer AND Safari. Rather annoying, it makes overflows just not tall enough.
if (($context['browser']['is_ie'] && !$context['browser']['is_ie4']) || $context['browser']['is_mac_ie'] || $context['browser']['is_safari'] || $context['browser']['is_firefox'])
{
// The purpose of this code is to fix the height of overflow: auto div blocks, because IE can't figure it out for itself.
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA['
;

// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
}'
;
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
}'
;
else
echo '
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
}'
;

echo '
// ]]></script>'
;
}

echo '
</div>'
;

// The following will be used to let the user know that some AJAX process is running
echo '
<div id="ajax_in_progress" style="display: none;'
$context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' '''">'$txt['ajax_in_progress'], '</div>
</body></html>'
;
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context$settings$options;

echo '<div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>'$settings['linktree_link'] && isset($tree['url']) ? '<a href="' $tree['url'] . '" class="nav">' $tree['name'] . '</a>' $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '&nbsp;>&nbsp;';
}

echo '</div>';
}

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context$settings$options$scripturl$txt$modSettings;

// Work out where we currently are.
$current_action 'home';
if (in_array($context['current_action'], array('admin''ban''boardrecount''cleanperms''detailedversion''dumpdb''featuresettings''featuresettings2''findmember''maintain''manageattachments''manageboards''managecalendar''managesearch''membergroups''modlog''news''optimizetables''packageget''packages''permissions''pgdownload''postsettings''regcenter''repairboards''reports''serversettings''serversettings2''smileys''viewErrorLog''viewmembers')))
$current_action 'admin';
if (in_array($context['current_action'], array('staff','search''admin''calendar''profile''mlist''register''login''help''pm''forum''tpadmin')))
$current_action $context['current_action'];

if ($context['current_action'] == 'awards')
$current_action 'admin';

if ($context['current_action'] == 'search2')
$current_action 'search';

if (isset($_GET['dl']))
$current_action 'dlmanager';

if (isset($_GET['board']) || isset($_GET['topic']) || $context['current_action']=='forum')
$current_action 'forum';

if ($context['current_action']=='tpadmin')
$current_action 'admin';

if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' 'profile' 'admin';

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first 'last';
$last 'first';
}
else
{
$first 'first';
$last 'last';
}

// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_' 
$first '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'home' 'active_back' 'back' '">
<a href="'
$scripturl'">' $txt[103] , '</a>
</td>' 
$current_action == 'home' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

if(
$settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action=='forum' 'active_back' 'back' '">
<a href="'
$scripturl'?action=forum">'.$txt['tp-forum'].'</a>
</td>' 
$current_action=='forum' '<td class="maintab_active_last">&nbsp;</td>' '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'help' 'active_back' 'back' '">
<a href="'
$scripturl'?action=help">' $txt[119] , '</a>
</td>' 
$current_action == 'help' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'search' 'active_back' 'back' '">
<a href="'
$scripturl'?action=search">' $txt[182] , '</a>
</td>' 
$current_action == 'search' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'admin' 'active_back' 'back' '">
<a href="'
$scripturl'?action=admin">' $txt[2] , '</a>
</td>' 
$current_action == 'admin' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'profile' 'active_back' 'back' '">
<a href="'
$scripturl'?action=profile">' $txt[79] , '</a>
</td>' 
$current_action == 'profile' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'pm' 'active_back' 'back' '">
<a href="'
$scripturl'?action=pm">' $txt['pm_short'] , ' '$context['user']['unread_messages'] > '[<strong>'$context['user']['unread_messages'] . '</strong>]&nbsp;&nbsp;<img src="' $settings['images_url'] . '/msg.gif" border="0" />' '' '</a>


</td>' 
$current_action == 'pm' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'calendar' 'active_back' 'back' '">
<a href="'
$scripturl'?action=calendar">' $txt['calendar24'] , '</a>
</td>' 
$current_action == 'calendar' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'mlist' 'active_back' 'back' '">
<a href="'
$scripturl'?action=mlist">' $txt[331] , '</a>
</td>' 
$current_action == 'mlist' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// the [staff list] button
if ($context['allow_view_stafflist'])
echo ($current_action == 'staff' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'staff' 'active_back' 'back' '">
<a href="'
$scripturl'?action=staff">' $txt['smfstaff_stafflist']  , '</a>
</td>' 
$current_action == 'staff' '<td class="maintab_active_' $last '">&nbsp;</td>' '';



// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'login' 'active_back' 'back' '">
<a href="'
$scripturl'?action=login">' $txt[34] , '</a>
</td>' 
$current_action == 'login' '<td class="maintab_active_' $last '">&nbsp;</td>' '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'register' 'active_back' 'back' '">
<a href="'
$scripturl'?action=register">' $txt[97] , '</a>
</td>' 
$current_action == 'register' '<td class="maintab_active_' $last '">&nbsp;</td>' '';
// the [chat] button
if ($modSettings['chatPopUp'])
echo '    <script type="text/javascript">
            function openWindow(url,width,height,options,name) {
                width = width ? width : 800;
                height = height ? height : 600;
                options = options ? options : \'resizable=yes\';
                name = name ? name : \'openWindow\';
                window.open(
                    url,
                    name,
                    \'screenX=\'+(screen.width-width)/2+\',screenY=\'+(screen.height-height)/2+\',width=\'+width+\',height=\'+height+\',\'+options
                )
            }
    </script>'
;

$chatPath str_replace("index.php""chat/index.php"$scripturl);
$num = ($modSettings['enableChatButtonNo']) ? count(array_unique(getChatOnlineUserIDs())) : 0;
echo $context['browser']['is_ie4'] ? '<td class="maintab_active_' $first '">&nbsp;</td>' '''
<td valign="top" class="maintab_back">
<a href="'
$chatPath'"'$modSettings['chatPopUp'] ? ' onclick="openWindow(this.href);this.blur();return false;"' 'target="_blank"''>'$txt['chat'], ($num 0) ?  ('('.$num.')') : '' '</a>
</td>'
;
// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' $first '">&nbsp;</td>' '' '
<td valign="top" class="maintab_' 
$current_action == 'logout' 'active_back' 'back' '">
<a href="'
$scripturl'?action=logout;sesc='$context['session_id'], '">' $txt[108] , '</a>
</td>' 
$current_action == 'logout' '<td class="maintab_active_' $last '">&nbsp;</td>' '';

// The end of tab section.
echo '
<td class="maintab_' 
$last '">&nbsp;</td>
'
;
// TinyPortal
 if($context['TPortal']['leftbar'])
             echo 
'<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="'$settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempLeftbar" src="'$settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
         if(
$context['TPortal']['rightbar'])
             echo 
'<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="'$settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' 'upshrink2.gif''" alt="*" title="'$txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempRightbar" src="'$settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
// TinyPortal end
echo '
</tr>
</table>'
;

}

// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$force_reset false$custom_td '')
{
global $settings$buttons$context$txt$scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'last' 'first' '">&nbsp;</td>
<td class="'
$direction == 'top' 'main' 'mirror''tab_back">'implode(' &nbsp;|&nbsp; '$button_strip) , '</td>
<td class="'
$direction == 'top' 'main' 'mirror''tab_' $context['right_to_left'] ? 'first' 'last' '">&nbsp;</td>';
}

function 
getChatInterface() {
    global 
$scripturl;
    static 
$ajaxChat;
 
    if (!
$ajaxChat) {
        
// URL to the chat directory:
        
if (!defined('AJAX_CHAT_URL')) {
            
define('AJAX_CHAT_URL'str_replace("index.php""chat/"$scripturl));
        }
 
        
// Path to the chat directory:
        
if (!defined('AJAX_CHAT_PATH')) {
            
define('AJAX_CHAT_PATH'dirname(__FILE__) . '/../chat/');
        }
 
        
// Validate the path to the chat:
        
if (@is_file(AJAX_CHAT_PATH.'lib/classes.php')) {
            
// Include Class libraries:
            
require_once(AJAX_CHAT_PATH.'lib/classes.php');
 
            
// Initialize the chat interface:
            
$ajaxChat = new CustomAJAXChatInterface();
        }
    }
 
    return 
$ajaxChat;
}

function 
getShoutBoxContent()
{
    global 
$scripturl;
 
    
// Get the URL to the chat directory:
    
if (!defined('AJAX_CHAT_URL'))
    {
        
define('AJAX_CHAT_URL'str_replace("index.php""chat/"$scripturl));
    }
    
    
// Get the real path to the chat directory:
    
if (!defined('AJAX_CHAT_PATH'))
    {
define('AJAX_CHAT_PATH'dirname(__FILE__) . '/../chat/');
    }
    
    
// Validate the path to the chat:
    
if (@is_file(AJAX_CHAT_PATH 'lib/classes.php'))
    {
        
// Include Class libraries:
        
require_once(AJAX_CHAT_PATH.'lib/classes.php');
 
        
// Initialize the shoutbox:
        
$ajaxChat = new CustomAJAXChatShoutBox();
 
        
// Parse and return the shoutbox template content:
        
return $ajaxChat->getShoutBoxContent();
    }
    return 
null;
}
 
function 
getChatOnlineUserIDs() {
    return (
$chatInterface getChatInterface()) ? $chatInterface->getOnlineUserIDs() : array();
}

// Snap Shots Mod
function snapShotsMod(){

global  $modSettings;

if ( !empty($modSettings['snapShots_enabled']) )
echo $modSettings['snapShots_code'];
}
?>



Any help would be appreciated.

Also, I have TinyPortal installed if this could be the problem?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: JBlaze on March 08, 2009, 05:11:03 PM
Nevermind. I have found what I need =)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 08, 2009, 05:47:09 PM
Quote from: PedroMRP on March 08, 2009, 12:09:10 PM
Can someone make a drop down menu for the theme fade2white SMF 1.1.8 ? I've tried almost every solutions in this topic but the menu always goes under the body...
It could be something very simple. It had a problem with the Overview theme and it was because the header div that contains the menu on that theme had hidden overflow set in the css. Of course this meant that when the drop menu tried to go outside the header div it was hidden. Try checking your css for overflow settings.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: PedroMRP on March 08, 2009, 06:37:17 PM
I can't find any header related overflow settings in my css file :\
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: capabmx on March 17, 2009, 12:29:02 PM
Hey, thanks for the tutorial, I have smf version 1.1.8 and followed your instructions to the "T" I'm pretty sure and it gave me a template parse error (unexpected $end line 635 index.template.php). Not sure why I'm getting this, but I'll attach my index.template.php page. If anyone could check it out and maybe point me in the direction as to fix anything I made a mistake with or any info would be greatly appreciated. Thanks again!! Ok well not sure how to attach a file lol don't see the option to so...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: - Lawrence - on March 17, 2009, 04:14:47 PM
Ahh great guide, I have been wondering how sites have dones this, now I know.

Thanks. :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 17, 2009, 04:25:47 PM
Quote from: capabmx on March 17, 2009, 12:29:02 PM
Hey, thanks for the tutorial, I have smf version 1.1.8 and followed your instructions to the "T" I'm pretty sure and it gave me a template parse error (unexpected $end line 635 index.template.php). Not sure why I'm getting this, but I'll attach my index.template.php page. If anyone could check it out and maybe point me in the direction as to fix anything I made a mistake with or any info would be greatly appreciated. Thanks again!! Ok well not sure how to attach a file lol don't see the option to so...
Use the code tags ( # button ).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: capabmx on March 18, 2009, 06:24:52 AM
Hey, fresh install, got it working, thank you very much :], this tutorial is excellent and I will be using this for every theme!! The problem I was having before I think was due to me rushing and editing the root style.css not the individual theme style.css. I'm clumsy haha but anyways thanks again
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Harvester on March 29, 2009, 03:00:50 PM
I got this working no problems.. added my chat, links, bookmarks and gallery links to the menu too.

Had a few problems though...

1. It was so wide it broke my template... even though the buttons were only about 66% of the screen width.

2. its too tall. Id like it to be only about 25.. maybe 30 pixels tall.. seems to be about 50+

3. Fonts too big

4. the new css mods overwrote all the background images on my headers of my forum instead of just being used on the dropdown menus.

5.  I have the Ads Management Mod installed. I have adds at the top of my page below the menu. The drop down menus go BEHIND the ads up top rather than in front. Therefore they can not be seen.

How can i fix these issues?

Please help.

thank you
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 29, 2009, 10:50:54 PM
Link?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Harvester on March 30, 2009, 11:30:56 AM
I removed the modified files until I can get a resolution. My site is live and well established and I had to go back to the default buttons until I can resolve this, unless i want to have an inbox flooded with complaining members ;)

What information do you need though? I will be more than happy to PM you any necessary information that could help you.   url,... login info.. whatever you need.

Thank you
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on March 30, 2009, 04:51:43 PM
Set up a test copy of the theme in question (your members don't have to use it) and sort us out a link and a test account.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Xavi-Nena on April 11, 2009, 07:24:14 AM
I also posted a request on Tiny Portal but wanted to ask here too..

I am looking for a drop down compatible with the theme His Own
http://custom.simplemachines.org/themes/index.php?lemma=1050
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 11, 2009, 07:32:49 AM
So what's the problem then? :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Xavi-Nena on April 11, 2009, 07:52:57 AM
When I apply these changes here it does not have the same menu tabs section as the one given and i get syntax errors.

I changed the site im working on this with back to the regular hisown default button strip but the buttons for this theme look like this:


// Show the start of the tab section.

echo '
<ul>';

// Show the [home] button.
echo '<li><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

// Show the [forum] button.
echo '<li><a href="', $scripturl, '?action=forum">' , Forum , '</a></li>';

// Show the [help] button.
echo '<li><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li><a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<li><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo '<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo '<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';


// the [chat] button
echo '<li><a href="', $scripturl, '?action=chat">' , Chat, '</a></li>';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

echo '</ul>';


}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td> </td>';

echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '"> </td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
}


And I apparently do not know where the menu section ends or how to alter it to be compatible with this theme.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 11, 2009, 07:56:17 AM
Meh. I'll knock one up for ya. Not tonight though. Manana.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Xavi-Nena on April 11, 2009, 08:03:39 AM
gracias ;)

if I happen to get support on TP before than I will post here to let ya know. :) thanks again.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 12, 2009, 03:48:22 AM
Sorted. I did something a little different this time. If you want anything changed I'll think about it if you ask nicely. :D
I'm assuming you can sort tabs and submenu links to suit yourself. These files are for 1.1.x only.
I didn't add a TP forum button coz I couldn't be bothered but you know the drill for that anyway.
Happy chocolate rabbits n stuff.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Xavi-Nena on April 12, 2009, 03:11:00 PM
thank ya sir... now i did attempt to fix it on my own but take a look at how it displays www.FrenchieTalk.com

there is that gap block between each horizontal tab..

edited:
also I see on the drop down in index.template.php it shows view calendar as the first link for Home drop down, however it is not showing and permission is enabled for everyone.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 12, 2009, 05:27:23 PM
Mate you have three different menus in that style.css: mine , Crip's original and some other one I've never seen before. No wonder your poor old forum is confused. :D

Get rid of this lot for a start and see how it looks:

#nav li.active_menu a {
background: url(images/toolbar-select.png) 0 0 no-repeat;
}

#nav {
background: url(images/img/toolbar-div.png) 0 0 no-repeat;
}

#nav li {
background: url(images/img/toolbar-div.png) 100% 0 no-repeat;
}

#nav li a {
color: #fff;
}

#nav a:hover {
color: #FCE001;
}

#nav {
margin: 0 0 0 20px;
padding: 0;
height: 31px;
}

#nav ul {
padding: 0;
margin: 0;
margin-left: 2px;
}

#nav li {
margin: 0;
padding: 0;
float: left;
display: block;
}

#nav a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
}

#nav li.on li.on a {
text-decoration: underline;
}

#nav li a {
display: block;
float: left;
height: 31px;
line-height: 31px;
padding: 0 15px;
}


Also you really need to learn how to do HTML validation. Much easier to track errors if you know the site is clean to start with (although there is nothing you can do about Google ads since they are always a mess).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Xavi-Nena on April 12, 2009, 06:09:06 PM
Well I do know how to run the validation check at http://validator.w3.org/ but not sure if that is the same thing, nor do i know really how to interpret the findings...but than I haven't really put much time into it...but will make attempt to do so now.

and also...that other menu code was from HCM's original post in this TIP thread. But thank you sir for pointing that out I had forgotten completely I added that when I was adding yours. Anyhow I did remove both the one you suggest which im guessing is Crip's theme one and the other one I put in there trying to do this originally and it worked.

you so smart...;)

thank you mate.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 12, 2009, 06:55:55 PM
Get this Firefox add-on for validation. https://addons.mozilla.org/en-US/firefox/addon/249

If you set it to SGML parser it'll run the same algorithm as the W3 gizmo, but the formatting of the results is much more user-friendly.

As for the menu, when I was setting it up I initially left Crip's menu in place to make it easier transfer colour codes and padding, so I knew exactly what was causing the double dividers.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Xavi-Nena on April 12, 2009, 07:04:51 PM
also interesting how you left the gaps between each drop down button..
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 12, 2009, 07:20:46 PM
Yeah I thought I'd do that just for a change. I've seen it elsewhere and though it looked cool for something different. It's just a top margin on the relevant css class.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: PalmBeachPreps on April 17, 2009, 08:32:32 PM
Quote from: Eliana Tamerin on August 05, 2008, 07:14:28 AM
For me, it appears as a huge block instead of a horizontal list. See the attached screenshot.
Same here!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: genusis on April 22, 2009, 12:57:21 PM
has a code been developed for smf 2 RC1 yet? i really don;t have to much time to read through everything sorry ^^.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: KahneFan on April 22, 2009, 12:58:10 PM
Quote from: genusis on April 22, 2009, 12:57:21 PM
has a code been developed for smf 2 RC1 yet? i really don;t have to much time to read through everything sorry ^^.

Yes...
http://custom.simplemachines.org/mods/index.php?mod=1508
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SoLoGHoST on April 23, 2009, 11:42:06 AM
Please note the SMF Manual Installation instructions say to open up style.css and fine ?>

This is a .css file, not a .php file, so there is no ?> You can simply say, at the end of this file, add...

Also, there are 2 ;; double semi-colons in the css that need to be fixed.

Just thought you should know, really like this, thanks :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 23, 2009, 06:10:01 PM
Quote from: AlreeGator on April 17, 2009, 08:32:32 PM
Quote from: Eliana Tamerin on August 05, 2008, 07:14:28 AM
For me, it appears as a huge block instead of a horizontal list. See the attached screenshot.
Same here!
If you had read the posts just after that you'd know you need to clear your cache.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Chair on April 25, 2009, 01:13:51 PM
I've done what you've asked but i have a problem. The code you wanted me to delete was nonexistent in the styles.css folder. So I've left out that step as I don't know what to do with it, and I was hoping i could get some assistance, perhaps another code to try out. Here is a copy of my styles.css:

/* Normal, standard links. */
a:link
{
color: #476C8E;
text-decoration: none;
}
a:visited
{
color: #476C8E;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #cc3333;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #000000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: normal;
color: #000000;
font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}

/* No image should have a border when linked */
a img
{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000000;
background-color: #ECEDF3;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: black;
font-style: normal;
background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/catbg.jpg) #88A6C0 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error
{
color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background: url(images/maintab_first.gif) left bottom no-repeat;
width: 10px;
}
.maintab_back
{
background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
background: url(images/maintab_last.gif) left bottom no-repeat;
width: 8px;
}
.maintab_active_first
{
background: url(images/maintab_active_first.gif) left bottom no-repeat;
width: 6px;
}
.maintab_active_back
{
background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
background: url(images/maintab_active_last.gif) left bottom no-repeat;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: url(images/mirrortab_first.gif) no-repeat;
width: 10px;
}
.mirrortab_back
{
background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
background: url(images/mirrortab_last.gif) no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background: url(images/mirrortab_active_first.gif) no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
background: url(images/mirrortab_active_last.gif) no-repeat;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}

/* The AJAX notifier */
#ajax_in_progress
{
background: #32CD32;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

/* DropDownMenu */

div#menu {
   left: 40px;
   z-index: 11;
   height: 39px;
   background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   float: left;
}

div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
}

div#menu li a, #menu li span.separator {
   height: 39px;
   display: block;
   float: left;
   line-height: 32px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #D2D2D2;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_white.png') no-repeat 100% 0;
}

div#menu li.level1 {
   background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat 100% 0;
   color: #FFFFFF; /*Change your menu link color in here*/
   font-size: 110%; /*Change your menu font size in here*/
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 5px 20px 0px 20px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
   padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#menu ul.menu ul {
   position: absolute;
   top: 40px;
   left: -999em;
   width: 165px;
        font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 15px;
}


div#menu li.level1 li a, div#menu li.level1 li span.separator{
   height: 25px;
   padding: 0px;
   margin: 0px 1px;;
   background: #89A7C1; /*Change your submenu background color in here*/
   float: none;
   display: block;
   line-height: 25px
}


As you can see there is no "//show the start of the tab section" code anywhere there, and therefore cannot put this anywhere:

   // Show the start of the tab section.
   echo '
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
               <td class="catbg" height="32">


            <div id="menu">
               <ul class="menu">
                     
                  <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>

                  <li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>';

                  // How about the [search] button?
                  if ($context['allow_search'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span><span class="title">' , $txt[182] , '</span></span></a></li>';

                  // Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span><span class="title">' , $txt[2] , '</span></span></a></li>';
                             
                  // Edit Profile... [profile]
                  if ($context['allow_edit_profile'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span><span class="title">' , $txt[79] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
                  </ul></li>';


                  // Go to PM center... [pm]
                  if ($context['user']['is_logged'] && $context['allow_pm'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
                  </ul></li>';


                  // The [calendar]!
                  if ($context['allow_calendar'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=calendar" class="level1"><span><span class="title">' , $txt['calendar24'] , '</span></span></a></li>';


                  // the [member] list button
                  if ($context['allow_memberlist'])
                  echo '
                                  <li class="level1 parent"><a href="', $scripturl, '?action=mlist" class="level1 parent"><span><span class="title">' , $txt[331] , '</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
                      <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
                  </ul></li>';

                           
                  // If the user is a guest, show [login] button.
                  if ($context['user']['is_guest'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
                  // If the user is a guest, also show [register] button.
                  if ($context['user']['is_guest'])
                  echo '
                                 <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                           
                  // Otherwise, they might want to [logout]...
                  if ($context['user']['is_logged'])
                  echo '
                      <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

            echo '
                            </ul>
                  </div>

               </td>
            </tr>
         </table>';


And I have NO programming knowledge whatsoever. I've done everything except that step. my website is www.speedscapers.com
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 25, 2009, 04:46:57 PM
That code is in index.template.php, not style.css.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Chair on April 26, 2009, 06:34:29 AM
the first post doesnt say that...thanks ^^
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Chair on April 26, 2009, 08:00:10 AM
it doesn't work :(
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on April 26, 2009, 06:19:52 PM
You're running a custom theme and that code is for the SMF default. It'll need to be adapted for your theme. You'll also need to add the forum button for Simple Portal, otherwise you wont be able to access the forum with the menu.

When you say "doesn't work", what happens?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Enders on May 05, 2009, 10:32:12 PM
Can anyone help me input this navigation to this theme:

http://custom.simplemachines.org/themes/index.php?lemma=1593
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [̲̅J̲̅][̲̅U̲̅][̲̅R̲̅][̲̅E̲̅][̲̅K̲̅] ٩(×̯×)۶ on May 14, 2009, 04:47:21 PM
Is it possibly to modify width and height of tabs? And maybe a color of dropdown menu..? I have green theme..and dropdowns are lightblue?? Thanks.. BTW: Great mod..

EDIT: And is it possible to change the time of drop down? I cant even click on "Send a message" because it disappears quickly..
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: R4C3R on May 26, 2009, 02:08:38 PM
Code to add new button (correct me if I'm wrong)

Quote
// New button... [BUTTON NAME]
                  echo '
                                  <li class="level1 parent"><a href="MAIN ITEM LINK" class="level1 parent"><span><span class="title">MAIN ITEM</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="ITEM 1 LINK" class="level2"><span>ITEM 1</span></a></li>
                      <li class="level2"><a href="ITEM 2 LINK" class="level2"><span>ITEM 2</span></a></li>
                      <li class="level2"><a href="ITEM 3 LINK" class="level2"><span>ITEM 3</span></a></li>
                  </ul></li>';


Example of the button I want

Quote
// The List [The List]
                  echo '
                                  <li class="level1 parent"><a href="?board=10.0" class="level1 parent"><span><span class="title">MAIN ITEM</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="?topic=1126.0" class="level2"><span>Private List</span></a></li>
                      <li class="level2"><a href="?topic=343.0" class="level2"><span>Public List</span></a></li>
                      <li class="level2"><a href="?topic=342.0" class="level2"><span>Random List</span></a></li>
                  </ul></li>';


I was wondering what "MAIN ITEM" is and if it is necessary, please help!

File attached, the theme is named 'DropDown'.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on May 26, 2009, 06:12:40 PM
Indecipherable Username: You can change anything you like. It's just css and images. The problem you're having with the drops disappearing is caused by the top of them being below your menu. This leaves a gap that causes the drop to vanish when you reach the gap. The fix is to raise it so that it just touches the bottom of your menu bar.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dzinerfusion on May 31, 2009, 12:26:16 PM
hi I would like to make a dropdown like this
In the order

Home
Forum-dropdown = help,search,city showcases
Profile-dropdown= my messages,members
Admin
Calender
Affiliates
Downloads
Chat
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: cosp on June 04, 2009, 07:17:53 AM
I searched the whole topic for how to do it with Vicarious theme, but couldn't find anything. Can someone guide me?
I am using 1.1.9.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 04, 2009, 07:27:34 AM
Link to the theme?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: cosp on June 04, 2009, 07:34:47 AM
http://custom.simplemachines.org/themes/index.php?lemma=1056
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: speedyuk7 on June 04, 2009, 05:54:59 PM
Could anyone make it for BacknBlack theme? With the BackNBlack buttons?
http://custom.simplemachines.org/themes/index.php?lemma=126
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 06, 2009, 04:37:20 AM
Ok guys, as I mentioned earlier in the thread I'm kinda over doing complete custom menus for every theme out there. If you are willing to have a go at it yourself and run into problems then I or someone else will probably give you tips, but there are so many themes around and making a slick custom menu for one theme always takes at least an hour of my time.

So load a test copy of the theme you want to use and start playing with it. Read the instructions carefully. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dzinerfusion on June 08, 2009, 09:28:49 PM
ok I just want to know what I have to edit in subs.php to get a dropdown, i use 2.0 RC1-1
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on June 08, 2009, 10:00:34 PM
Set up an array (just like for the main buttons) inside the sub_buttons array.

Here is an example of a button without sub-buttons (dropdown):

'somebutton' => array(
'title' => $txt[somestring'],
'href' => $scripturl . '?action=someaction',
'show' => $context['allow_some_permission'],
'sub_buttons' => array(
),
),


Here is the same example with sub-buttons (dropdown):

'somebutton' => array(
'title' => $txt[somestring'],
'href' => $scripturl . '?action=someaction',
'show' => $context['allow_some_permission'],
'sub_buttons' => array(
               'subbutton1' => array(
'title' => $txt['text1'],
'href' => $scripturl . '?action=action1',
'show' => allowedTo('permission1'),
),
'subbutton2' => array(
'title' => $txt['text2'],
'href' => $scripturl . '?action=action2',
'show' => allowedTo('permission2'),
),
),
),
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Stormfront on June 08, 2009, 10:20:18 PM
Please tell how to create a group Friend of Stormfront Of Stormfront?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Dark-Skript on June 09, 2009, 02:37:46 AM
any ideas how to edit for darkbreak theme? http://www.dzinerstudio.com/index.php?action=tpmod;dl=cat60
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 09, 2009, 07:08:03 AM
I've already done a drop menu for Darkbreak. It's over at Dziner in the Darkbreak board. :P
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Foreclosurepedia on June 13, 2009, 09:20:41 PM
I really messed up I think and I hope someone still reads this thread.  It all works except I get two menus!  The top menu I need to get rid of.

My site is http://www.ibrr.org/forum/ (http://www.ibrr.org/forum/).  The theme is Intifada.  The SMF Version is 1.1.9.  PLEASE HELP!!!  I would've included the files I modified, but didn't know how.  I did notice that the line item section @407 is similar to the next section in 538.  The 407 section has my treasury link that I want to keep and incorporate and simply do away with the register and login as I have simpleportal that does that stuff.  Mnnn, I lost my simpleportal forum button, too.  Sorry I am such a looser.  :(
This starts in the line 407 section  note:by some fluke I got the gallery button to add from reading thru here.

ok, fixed it on the fly.  found out I copied in the 538 section.  now the only thing I need to do is figure out how to move the donations button to where the logout button is, add a forum button and remove the other logout button.

So, I guess here's a shining example of a novice at work? :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Foreclosurepedia on June 14, 2009, 02:23:10 AM
so, i fixed it all and learned on the way!!!  i guess i just needed somewhere to put my thoughts.  if someone can read thru all the modifications to the post you'll laugh yourself to death!  thanx for being here!  and i love ur program!  i just can't tell you how i did anything!  i am willing to copy all th efile stuff if anyone needs info for the intifada theme, though.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 02:32:26 PM
i've read this topic through, and I'm sorry if I've missed something somewhere along the way.

I would be interested in a dropdown menu for the main menu and the boards using 2.0 RC1. That in the mod section doesn't appear to work with RC1 - I get a warning not to proceed when I try to install it. and the BK support site has been suspended at this time - it's been about a week now.

The template I'm using is based on the Babylon Theme

http://sv11.byethost11.org/suspended.page/

If anyone can advise me on this it would be most appreciated.

Many thanks
Steve J
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 03:34:12 PM
I've now got this to work by placing the script in the default indextemplate.php and then copying this file to replace the one my site is using. but I'm not at all sure how I can include the boards in the dropdown list too.

Any help would be great.
Many thanks.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 04:54:06 PM
Boards? What exactly do you want to do?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 05:28:52 PM
Hi, thanks for replying.
I would like to include the list of boards in the dropdown menu.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 05:39:12 PM
Oh. Ok, can be done but is going to be a pretty big drop menu and frankly I doubt the utility of it since the boards are available on the index anyway. Up to you though. ;)

For SMF 2.0 all the menus are controlled in Sources/Subs.php. You can add boards just like adding any other url. This is an example of a drop menu link from under the Profile tab:

'profile' => array(
'title' => $txt['forumprofile'],
'href' => $scripturl . '?action=profile;area=forumprofile',
'show' => allowedTo(array('profile_extra_any', 'profile_extra_own')),
),


To do a board (number 4) under that tab you would use something like this:

'profile' => array(
'title' => $txt['whateveryouwanttocallit'],
'href' => $scripturl . '?board=4.0',
'show' => true,
),


That would display the board to all members and guests. Of course you'd have to make the $txt string and put it in languages/ThemeStrings.english.php.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 05:57:03 PM
Thanks very much for your help. I'll have a look at that.

The reason why I want the dropdown menu is because I've removed the jumpto feature due to its  styling abilities not being fully supported. In some browsers it's still prone to look naff, particularly when the colours around it don't go with it.

It's for an art forum, with the boards according to medium. Maybe a dozen boards at most.

Thanks again.  :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 06:18:21 PM
Cool. Sounds ok. Have you tried styling the selects in style.css? You can do quite a bit with css, even down to individually styling each select and/or input.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 06:43:30 PM
No I can't say that I have. I tried what you have written there, and it went a bit pearshaped.
I must admit I'm in two minds now anyway about the dropdown because the code is outside of the theme. It'll need replacing everytime there is an update.

I'll do a bit of reading I think. What you have suggested there on selects has got me intrigued. If I can do it that way, then that might be my better option.

Thanks again Antechinus :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 06:49:59 PM
How do you mean outside the theme? If you mean the menu content is controlled in Sources that shouldn't matter unless the update affects that section of that file. If it doesn't (and updates are unlikely to re-write the menu) then the patch should work around your edits. In any case you can backup the file before any updates and then copy/paste the menu code back in if necessary.

When you say "pear-shaped", exactly what happened?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 07:09:17 PM
Outside of the theme being elsewhere than the template theme.

I got an unexpected ; and an unexpected ) message. Not sure what I was doing really though. HTLML and CSS is currently where I'm at. I haven't really messed about with Php and Javascript that much.
I've now found this:

http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#hs3

It's a CSS dropdown menu tutorial.

It might be ideal for just adding the boards.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 07:20:52 PM
:D That will drive you mental trying to integrate it with an SMF theme, unless you're pretty good at adapting things. In any case it just gives a basic box menu without any real styling. There are already a stack of examples in this thread. I've done Babylon for 2.0 and you said your template was based on Babylon.

The error you got must have just been a basic syntax error and should be easy to fix. Exactly what code where you trying to use?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 07:49:24 PM
They were  syntax error4

               'forum' => array(
                  'title' => $txt['whateveryouwanttocallit'],
                  'href' => $scripturl . '?board=1.0',
                  'show' => true,
               ),


Oops posted before ready so this is an edit:
I added that to the end of the one for the forum.

It is based on Babylon becase that's the one I think is the best. My site doesn't look anything like that now though.

There might be lack of styling in the css but a background image can be added to spruce it up. Until you mentioned it though I didn't know css could create a dropdown menu. It must have a disadvantage though because Javascript wouldn't have been used to make something that works better... I think.  :-\

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 07:54:13 PM
That bit is ok. How were you putting it under the forum button itself? What was the complete code for the whole thing?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 07:59:33 PM
I've since editted that last reply as I posted it accidentally.

This is one of the configurations I tried, showing the whole string for that section:

'forum' => array(
'title' => empty($txt['sp-forum']) ? 'Forum' : $txt['sp-forum'],
'href' => $scripturl . ($modSettings['sp_portal_mode'] == 1 ? '?action=forum' : ''),
'show' => in_array($modSettings['sp_portal_mode'], array(1, 3)),
'sub_buttons' => array(
),
               'forum' => array(
                  'title' => $txt['whateveryouwanttocallit'],
                  'href' => $scripturl . '?board=1.0',
                  'show' => true,
               ),
),
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 08:12:32 PM
Yep, basic error. Do it like this instead:

         'forum' => array(
            'title' => empty($txt['sp-forum']) ? 'Forum' : $txt['sp-forum'],
            'href' => $scripturl . ($modSettings['sp_portal_mode'] == 1 ? '?action=forum' : ''),
            'show' => in_array($modSettings['sp_portal_mode'], array(1, 3)),
            'sub_buttons' => array(
                  'forum' => array(
                  'title' => $txt['whateveryouwanttocallit'],
                  'href' => $scripturl . '?board=1.0',
                  'show' => true,
               ),
         ),


You had a closing ), before the drop code. It wouldn't like that.  ;)

CSS is great for drop menus and javascript is only necessary to get them to work in IE6 or earlier (because it's a bit dodgey calling elements on hover), and even then you only need a few short lines of js to haul out one or two elements. Other than that a well made css menu will be fine in all browsers.
I did Babylon for 2 Beta 4 here: http://www.simplemachines.org/community/index.php?topic=253756.msg1780206#msg1780206
That didn't have the js for IE6 and earlier though, plus I could do better code now anyway. Might have a look at it this week.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 27, 2009, 08:32:22 PM
You're a star. Most appreciated. I'll look at that tomorrow as it's a bit late in the UK now - 1.30.

What you have said there is very interesting. IE7 does display the css dropdown menu properly without having to take it into account coding wise. So dropdown menus in Javascript could become obsolete in theory.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 27, 2009, 09:30:00 PM
You need js if you want to do fade in/fade out effects or whatever but you don't need it for much else. The rest can be done with css, including preloading the drop images so there is no delay in rendering on hover.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dzinerfusion on June 27, 2009, 11:23:37 PM
Ok I tried to edit my style.css but didn't have any luck. How would I be albe to perserve my main menu exactly like it is now but with a drop down on it too??


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi420.photobucket.com%2Falbums%2Fpp284%2Fbluesinjid%2FSnippey.jpg&hash=d2375e5854d48e3d3ec2b5e799681a74c2c99d3d)

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 28, 2009, 12:01:57 AM
Check this out: http://www.dzinerstudio.com/index.php?topic=2220.msg16828#msg16828
The menu structure for that theme is basically the same as yours. Only differences are font, toolbar height and toolbar background image (and maybe some slight adjustment of paddings).
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dzinerfusion on June 28, 2009, 04:50:41 PM
I dont wanna use javascript I'm sorry. Mind if you could help me if I put up my index.css with my style.css which will have my main menu css??

My index.css

/* The main menu. */
#nav_down
{
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #fffefc;
}
#main_menu
{
  background: url(../images/nav_bg.gif) repeat-x;
}


#main_menu ul
{
  margin:0;
}

#main_menu li
{
  display:inline;
  margin:0;
  padding:0;
}

#main_menu a
{
  float:left;
  margin:0;
  text-decoration:none;
}

#main_menu a span
{
  float:left;
  display:block;
  color:#fff;
  padding: 16px 10px 18px 10px;
  background:url(../images/nav_link.gif) no-repeat right top;
}
   
#main_menu a:hover span
{
  color:#fdeacc;
  background:url(../images/nav_hover.gif) no-repeat right top;
}
#main_menu li.active span
{
  color:#fff;
  background:url(../images/nav_hover.gif) no-repeat right top;
}


The dropdown code .

/* DropDownMenu */

div#menu {
   left: 40px;
   z-index: 11;
   height: 39px;
   background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   float: left;
}

div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
}

div#menu li a, #menu li span.separator {
   height: 39px;
   display: block;
   float: left;
   line-height: 32px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #D2D2D2;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_white.png') no-repeat 100% 0;
}

div#menu li.level1 {
   background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat 100% 0;
   color: #FFFFFF; /*Change your menu link color in here*/
   font-size: 110%; /*Change your menu font size in here*/
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 5px 20px 0px 20px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
   padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#menu ul.menu ul {
   position: absolute;
   top: 40px;
   left: -999em;
   width: 165px;
        font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 15px;
}


div#menu li.level1 li a, div#menu li.level1 li span.separator{
   height: 25px;
   padding: 0px;
   margin: 0px 1px;;
   background: #89A7C1; /*Change your submenu background color in here*/
   float: none;
   display: block;
   line-height: 25px
}
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 28, 2009, 04:57:21 PM
The javascript is only for calling the drop menus in IE6. CSS-only menus wont work in IE6 because it doesn't support hover properly.

I'm not playing with Hoochie's code because I gave up using it some time ago when I found what were, in my opinion, better alternatives.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dzinerfusion on June 28, 2009, 05:13:58 PM
OK looked at yuor code you linked me to and what do I have to add and teka out to fit my theme?>

*EDIT* Can you show me the css code for a drop down so I can modify it?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SteveFJ on June 28, 2009, 05:42:21 PM
Quote from: Antechinus on June 27, 2009, 09:30:00 PM
You need js if you want to do fade in/fade out effects or whatever but you don't need it for much else. The rest can be done with css, including preloading the drop images so there is no delay in rendering on hover.

I had a good think about how best to go about things. I think the fewer files to update the better. So I've spent all day doing it in CSS. Fades with JS I'm not bothered about really.
Had a few niggling problems with IE, but that was more mistakes on my part than anything else. There are gaps between the vertical menus, but somehow, the way I've styled it, I think it works. The main menu dropped in vertically like a charm too.

Thanks very much for your help. It's been very much appreciated.  :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on June 28, 2009, 10:10:48 PM
Quote from: bluesinjid on June 28, 2009, 05:13:58 PM
OK looked at yuor code you linked me to and what do I have to add and teka out to fit my theme?>

*EDIT* Can you show me the css code for a drop down so I can modify it?
I did show you the css. It's in the OP of that topic I linked you to. That topic contains complete instructions for installing a drop menu.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on July 02, 2009, 05:24:22 PM
So how are you going with this?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SPerroud on July 04, 2009, 01:38:35 PM
Cool man.
Thx
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: akosiparusa on July 05, 2009, 02:41:06 PM
is there a way to install this on 1.1.9, i can't find the codes on default's style.css?!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: H on July 10, 2009, 03:38:31 PM
Do you still want help with this on 1.1.9?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: akosiparusa on July 11, 2009, 02:57:58 AM
what was really added on the index.template? im asking this because i have other mods installed, maybe there is a format i jut need to follow.

this is how i wanted mine to look like. using 1.1.9

1. HOME

2. FORUM

3. RULES

4. SITE PANEL
   - HELP
   - CALENDAR
   - GALLERY
   - MEMBERS
   - TAGS
   - SEARCH

5. USER CPANEL
   - ADMIN
   - PROFILE
   - MY BOOKMARKS
   - MY MESSAGES

6. CONTACT

7. LOGOUT

currently, I have SMF Media Gallery,  bookmarks, rules, contact, tinyportal based on the codes below:

// Show the start of the tab section.
echo '
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
               <td class="catbg" height="32">


            <div id="menu">
               <ul class="menu">
                     
                  <li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>

                  <li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>';
 
// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>' , $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

if($settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_first">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action=='forum' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=forum">'.$txt['tp-forum'].'</a>
</td>' , $current_action=='forum' ? '<td class="maintab_active_last">&nbsp;</td>' : '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Show the [rules] button.
global $user_info, $modSettings;
if ($user_info['is_guest'] ? !empty($modSettings['rules_enable_guest_access']) : !empty($modSettings['rules_enable_member_access']))
echo ($current_action == 'rules' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'rules' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=rules">', !empty($modSettings['rules_tab_label']) ? $modSettings['rules_tab_label'] : $txt['rules'], '</a>
</td>' , $current_action == 'rules' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>' , $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>' , $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The [bookmarks] button
if (allowedTo('make_bookmarks'))
echo ($current_action == 'bookmarks' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'bookmarks' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=bookmarks">' , $txt['bookmarks'] , '</a>
</td>' , $current_action == 'bookmarks' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>' , $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>' , $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// [SMF Media Gallery]
if (allowedTo('mgallery_access'))
echo ($current_action == 'mgallery' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mgallery' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mgallery">' , $txt['mgallery_gallery'] , '</a>
</td>' , $current_action == 'mgallery' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>' , $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [contact] button
if ($context['allow_view_contact'])
echo ($current_action == 'contact' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'contact' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=contact">' , $txt['smfcontact_contact']  , '</a>
</td>' , $current_action == 'contact' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// the [tags] button
echo ($current_action == 'tags' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'tags' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=tags">' , $txt['smftags_menu']  , '</a>
</td>' , $current_action == 'tags' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';



// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>' , $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a onclick="return log_out()" href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
';
// TinyPortal
if($context['TPortal']['leftbar'])
             echo '<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="', $settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
         if($context['TPortal']['rightbar'])
             echo '<td style="padding-left: 1ex;"><a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="', $settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 2px 0;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" /></td>';
// TinyPortal end
echo '
</tr>
</table>';

}
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: sepulchre on July 14, 2009, 08:39:36 PM
Apologies for the daft question... but how do I create a menu without a link (i.e. a header to sub menus which will carry links) my php is not great and I've tried all evening to get it to work without much success.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on July 15, 2009, 03:30:32 AM
Just use <a href="#"> for the anchor tag part of it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: JeremyB. on July 15, 2009, 03:37:06 AM
Spanish Translation:
$ txt [ 'hcm_summary'] = 'Resumen';
$ txt [ 'hcm_account'] = 'Configuración de la cuenta »;
$ txt [ 'hcm_forumProfile'] = 'Foro de perfil ";
$ txt [ 'hcm_readmessages'] =' leer tus mensajes';
$ txt [ 'hcm_sendmessage'] = 'Enviar un mensaje';
$ txt [ 'hcm_viewmembers'] =' Ver los Miembros ";
$ txt [ 'hcm_searchmembers'] =' Buscar los diputados;


Polish Translation:
$ txt [ 'hcm_summary'] = 'Opis';
$ txt [ 'hcm_account'] = "Ustawienia konta";
$ txt [ 'hcm_forumProfile'] = 'Forum Profil ";
$ txt [ 'hcm_readmessages'] =' Czytaj Wiadomości ";
$ txt [ 'hcm_sendmessage'] = 'Wyślij wiadomość';
$ txt [ 'hcm_viewmembers'] =' Pokaż Memberlist ";
$ txt [ 'hcm_searchmembers'] =' Search for Members ";


Portuguese Translation:
$ txt [ 'hcm_summary'] = 'Resumo';
$ txt [ 'hcm_account'] = 'Configurações;
$ txt [ 'hcm_forumProfile'] = 'Forum Perfil';
$ txt [ 'hcm_readmessages'] =' leia suas mensagens';
$ txt [ 'hcm_sendmessage'] = 'Enviar uma mensagem';
$ txt [ 'hcm_viewmembers'] =' Ver As Membros »;
$ txt [ 'hcm_searchmembers'] =' Search For Members';


-JB



Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: sepulchre on July 15, 2009, 03:45:14 AM
Quote from: Antechinus on July 15, 2009, 03:30:32 AM
Just use <a href="#"> for the anchor tag part of it.

Knew it would be simple, cheers!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 09, 2009, 10:00:02 PM
I'm on 1.1.10, with a slightly altered default layout;

My menu is going to have 6 tabs + the Log in/out/registers showing up "if" as applicable.
I don't want the main tabs to be links, I just want them to be... sitting there.
Under those, I'll have all the links to the places I want to go.

I have three issues I would like help with:

1. How do I make it so none of the top level are actually links, but just tabs that hide the second level tabs that are links?
2. How do I link to external pages; I want to link to my website from the forum menu.]
3. How do I change the menu names? So, instead of "Profile" I can have "Personal" and so such?

An example of what I want, menu wise:
{I shoved it in code box to make it take up a little less space}

Website [not a link]
- Link 1
- Link 2

Information [not a link]
- Admin [if]
- Staff Listing
- Member List [if]
- Contact [it's a mod]
- Help
- Search

Forums [Not a link]
- Administration I'd like to make this an if, so if you don't have administrative powers, you can't access these forums]
- area 1
- area 2
- area 3 etc [I use the multi-forums mod]

Personal [if, not a link]
- Profile
- Messages
- Personas [another mod]

Forms [not a link, also a mod]
- Form 1
- Form 2
- Form 3

Other [not a link]
- Chat [is a mod]
- Pages [another mod]
- Gallery [and again]
- Calendar


Log In / Log Out / Register



Many thanks for any help, guys.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 02:20:19 AM
1/ Read the post above yours. I just answered that question. ;)

2/ You put the url for the page you want to link to. <a href="http://www.goatseftw.com" class="level1">

3/ If you're just running English and don't care about supporting multiple languages, replace the $txt strings with whatever you like.  span class="title">Personal</span>
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 06:08:00 AM
Ahh, thank you very much.

And sorry about #1. Didn't realise that was the answer to what I was asking. >_>;
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 06:52:55 AM
Ehk, I've gone wrong somewhere. Would someone please be kind enough to point out where?

I implemented this, and got a Template Parse Error that reads the following:

Template Parse Error!

There was a problem loading the /Themes/Landing1/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.
syntax error, unexpected '<'


The code I used is this:

// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto 0 auto">
<tr>
<td class="catbg" height="32">


            <div id="menu">
               <ul class="menu">
                     
                  <li class="level1"><a href="#"><span><span class="title">Website</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="http://landing.dreamscaperpgs.net"><span>Home</span></a></li>
                      <li class="level2"><a href="http://landing.dreamscaperpgs.net/pernese.html"><span>Pernese</span></a></li>
                      <li class="level2"><a href="http://landing.dreamscaperpgs.net/rp.html"><span>Role Play</span></a></li>
                      <li class="level2"><a href="http://landing.dreamscaperpgs.net/links.html"><span>Links</span></a></li>
                  </ul></li>';

                  <li class="level1"><a href="#" class="level1"><span><span class="title">Information</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="' $scripturl, '?action=admin"><span>Admin</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=staff"><span>Staff</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=mlist"><span>Members</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=contact"><span>Contact</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=help"><span>Help</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=search"><span>Search</span></a></li>
                  </ul></li>';

                  <li class="level1"><a href="#" class="level1"><span><span class="title">Forums</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="' $scripturl, '?action=Admin"><span>Administration</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=Apps"><span>Applications</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=Info"><span>Information Desk</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=OOC"><span>Out of Character</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=Landing"><span>Landing</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=North"><span>Explore North</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=East"><span>Explore East</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=South"><span>Explore South</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=West"><span>Explore West</span></a></li>
                  </ul></li>';
                 
                  <li class="level1"><a href="#" class="level1"><span><span class="title">Personal</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="' $scripturl, '?action=profile"><span>Profile Main</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=profile;u=1;sa=account"><span>Profile Settings</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=profile;u=1;sa=forumProfile"><span>Profile Info</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pm"><span>Message Inbox</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pm;f=outbox"><span>Message Outbox</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pm;sa=send"><span>Send Message</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=profile;u=3;sa=editPersonas"><span>Assign Persona</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=personas"><span>Change Persona</span></a></li>
                  </ul></li>';
                 
                  <li class="level1"><a href="#" class="level1"><span><span class="title">Other</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="' $scripturl, '?action=chat"><span>Live Chat</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Pages</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=gallery"><span>Gallery</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=calendar"><span>Calendar</span></a></li>
                  </ul></li>';
                 
                  <li class="level1"><a href="#" class="level1"><span><span class="title">Join</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="' $scripturl, '?action=chat"><span>Persona Application</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Persona Adoption</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Candidate Application</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Candidate Adoption</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Weyrling Application</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=gallery"><span>Weyrling Adoption</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=calendar"><span>Dragonrider Application</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Dragonrider Adoption</span></a></li>
                  </ul></li>';
                 
                  <li class="level1"><a href="#" class="level1"><span><span class="title">Rank Change</span></span></a>
                                  <ul class="level2">
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Apprentice</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Journeyman</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Master</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Head Woman</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Search Rider</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=chat"><span>Candidate Master</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>Weyrling Master</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>WingRider</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>WingThird</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=gallery"><span>WingSecond</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=calendar"><span>WingLeader</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>WeyrSecond - male</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>WeyrSecond - female</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>WeyrLeader</span></a></li>
                      <li class="level2"><a href="' $scripturl, '?action=pages"><span>WeyrWoman</span></a></li>
                  </ul></li>';
                 
                                           
                  // If the user is a guest, show [login] button.
                  if ($context['user']['is_guest'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
                  // If the user is a guest, also show [register] button.
                  if ($context['user']['is_guest'])
                  echo '
                                 <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                           
                  // Otherwise, they might want to [logout]...
                  if ($context['user']['is_logged'])
                  echo '
                      <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

            echo '
                            </ul>
                  </div>

</td>
</tr>
</table>';
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 06:55:06 AM
If you would be kind enough to provide some details on what the problem actually is...............
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 07:00:40 AM
The code in the second box, I put in the index.template.php in order to make the menu change.

It brought up the Parse Error in the first box.

Link to site (http://landing.dreamscaperpgs.net/forum/)


Obviously I missed or did something wrong in the piece of code I made, but I cannot find what or where.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 07:27:33 AM
Post the template as an attachment, please. Easier for me that way.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 07:51:13 AM
I would have in my very first post, but for some reason it's not allowing me to add attachments; It's just listing "Notify me of replies." "Return to this topic." and "Don't use smileys." as the Additional Options...


... Hopefully this is okay like this...

Or not... Would you like me to post it in chunks?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 08:03:42 AM
This will fix all the parse errors but you will still have some problems with your links.


Parse error: when you have this sort of thing

                  </ul></li>';
           

                  <li class="level1">


you need to do it like this instead:

                  </ul></li>';
           
echo '
                  <li class="level1">


or like this:

                  </ul></li>
           

                  <li class="level1">


Either of the latter two will work. Which one you choose depends on exactly what you are trying to do. If you are using a proper code editor ( like this one (http://sourceforge.net/project/showfiles.php?group_id=95717&package_id=102072) ) you will be able to see the difference because the syntax highlighting will change.

For the links, you have your admin link displaying to everyone (guests and members) and your profile link is only linking to your profile (so it wont work for anyone else's). Get rid of the u=1; and u=3; bits to make the profile links general.

ETA: I think that file is missing a bit off the end. I took what you had posted before you edited your post.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 08:09:50 AM
I've got Dreamweaver 3 running, and yes, I had noticed the difference how it jumps about in colour; sometimes what I take to be coloured correctly and other times just pure red.

I will try the codes you posted. Thank you for your help!



And the file ends:

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';
}

?>


If it is missing something, I honestly have no idea where it went o_O
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 08:19:36 AM
This section is causing me issues now:

// Show the start of the tab section.

<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto 0 auto">
<tr>
<td class="catbg" height="32">

            <div id="menu">

               <ul class="menu">
   echo '
                     
                  <li class="level1">... blahblahblah



If, after the 0 auto 0 auto"> I add an '; then the colorus of all the links go correct, BUT the above code between the
"...auto"> and the <li class="level1"> go all red.

If I don't put in the '; then the above is correct colours, and all the links afterwards are red...


Did that make sense?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 08:28:59 AM
Don't add an apostrophe there. It will give you a parse error. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 08:35:14 AM
Oh hang on, I just had another look. You've removed the echo '. That is why you're getting an error. Download the file I attached and take a look at it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 08:39:24 AM
... You don't have a file attached..?

Or not one I can see, at any rate.

Where about's should the echo go that I removed?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 08:42:16 AM
File is attached to this post: http://www.simplemachines.org/community/index.php?topic=253756.msg2204693#msg2204693 ;)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 08:56:51 AM
Oops, sorry ><;

... Okay, this is what I've got at the moment.

Is the area outlined meant to be all red? Are the following echoes?

Image Link (http://img265.imageshack.us/img265/8660/temp.gif)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 09:10:50 AM
Take a look at how I did that section in the file I attached. That is why I attached it. So you could see how the code should work.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 09:15:59 AM
I did; the file you attached is all red... The echoes are blue and the $scripturl, is black, but everything else is red...

And it brings up the following error when used:

syntax error, unexpected T_VARIABLE, expecting ',' or ';'
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 09:24:25 AM
Red doesn't mean anything to me because I never use Dreamweaver anyway so I have no idea what their highlighting system is. The error you're seeing would be because the file is truncated. I mentioned that already. You didn't post the entire template and I just copied the code you had posted and corrected the errors in that. All you need out of it is the menu section. 
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 10, 2009, 04:52:20 PM
Which I used, and which gave me the error I posted in my last post.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 10, 2009, 05:47:10 PM
Start a thread in Graphics and Templates. Attach the entire file in its current state.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: FireDitto on August 11, 2009, 05:30:05 AM
Done. It's here (http://www.simplemachines.org/community/index.php?topic=330212.0)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on August 11, 2009, 05:43:31 AM
Cool.Give me a few minutes.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Vendetta7 on September 09, 2009, 07:16:38 PM
Hiya folks!

This is exactly what I was looking for... only there are 20 pages to sort through this topic now, so frankly I don't know what is currently appropriate for my needs.   :(

I am running:  SMF 2.0 RC1.2  (fresh install)
Theme;  Pixel Perfect v1:  http://custom.simplemachines.org/themes/index.php?lemma=1903

Drop down menus on the main menu bar (admin bar is ok) don't seem to be present in the theme.  Frankly, no drop down menus seemed to work on the main menu bar for the default theme for SMF either.

I didn't notice this until I realized that I am in need of more menu links than the menu bar is wide...

If it isn't too much trouble, could someone post what is currently appropriate for activating / modding this feature into my current theme?  It would be EXTREMELY appreciated!

Thank you all, and again, sorry for bothering ya!

:D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on September 09, 2009, 07:27:52 PM
I'll take a look at it. Can't do it immediately but give me 24 hours or so and I'll sort something out.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Vendetta7 on September 09, 2009, 07:33:29 PM
Thank you so much!

:)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Shortie on September 09, 2009, 07:51:08 PM
Quote from: Vendetta7 on September 09, 2009, 07:16:38 PM
Hiya folks!

This is exactly what I was looking for... only there are 20 pages to sort through this topic now, so frankly I don't know what is currently appropriate for my needs.   :(

I am running:  SMF 2.0 RC1.2  (fresh install)
Theme;  Pixel Perfect v1:  http://custom.simplemachines.org/themes/index.php?lemma=1903

Drop down menus on the main menu bar (admin bar is ok) don't seem to be present in the theme.  Frankly, no drop down menus seemed to work on the main menu bar for the default theme for SMF either.

I didn't notice this until I realized that I am in need of more menu links than the menu bar is wide...

If it isn't too much trouble, could someone post what is currently appropriate for activating / modding this feature into my current theme?  It would be EXTREMELY appreciated!

Thank you all, and again, sorry for bothering ya!

:D

Okay you have a couple of options - if you are after the drop down menus which are present in Subs.php then a couple of edits and they will  be there but if you keep the menu centered then it adds a scroll bar to the bottom of your browser and it makes the theme look as though it is over sized - well that is option 1 now if you take this option and left align the menu then the scroll bar issue disappears so that option 2

these can be done but will need to add a couple more edit just to get the drop down items aligned

if this is what you are after let me know but if you are after additional menu items which are not generated by SMF then you will need to edit subs.php add them in and then decide how you want to display them not difficult to do just time consuming

hope this helps

Shortie

Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Vendetta7 on September 09, 2009, 07:55:08 PM
Quote from: Shortie on September 09, 2009, 07:51:08 PM
Quote from: Vendetta7 on September 09, 2009, 07:16:38 PM
Hiya folks!

This is exactly what I was looking for... only there are 20 pages to sort through this topic now, so frankly I don't know what is currently appropriate for my needs.   :(

I am running:  SMF 2.0 RC1.2  (fresh install)
Theme;  Pixel Perfect v1:  http://custom.simplemachines.org/themes/index.php?lemma=1903

Drop down menus on the main menu bar (admin bar is ok) don't seem to be present in the theme.  Frankly, no drop down menus seemed to work on the main menu bar for the default theme for SMF either.

I didn't notice this until I realized that I am in need of more menu links than the menu bar is wide...

If it isn't too much trouble, could someone post what is currently appropriate for activating / modding this feature into my current theme?  It would be EXTREMELY appreciated!

Thank you all, and again, sorry for bothering ya!

:D

Okay you have a couple of options - if you are after the drop down menus which are present in Subs.php then a couple of edits and they will  be there but if you keep the menu centered then it adds a scroll bar to the bottom of your browser and it makes the theme look as though it is over sized - well that is option 1 now if you take this option and left align the menu then the scroll bar issue disappears so that option 2

these can be done but will need to add a couple more edit just to get the drop down items aligned

if this is what you are after let me know but if you are after additional menu items which are not generated by SMF then you will need to edit subs.php add them in and then decide how you want to display them not difficult to do just time consuming

hope this helps

Shortie



I am after Menu Items that are additional to the standard ones that SMF normally generates because of some Mods installed...

I understand what you are saying to a degree.  My issue is, exactly how to do it.  :\

Thank you for your help Shortie!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SoLoGHoST on September 09, 2009, 10:15:33 PM
Vendetta7, as Shortie has pointed out already, open Subs.php found in your Sources directory.  If you need to add menu items, this is the place to do it.  You can also add Submenu's in here if you want them too, however, this is not the case.  I'm shocked that the MOD's you have installed do not add the buttons in Subs.php already, since this is the only logical place to add buttons to the Main Menu in SMF 2.0.x (I believe same thing applies to SMF 1.1.x versions also).  You should take a look at this file and you will see all of the buttons you currently have on the Main menu in here.  They will be defined as arrays.  This is where you will add your buttons, and the placement of those buttons in here will determine the order in which the buttons appear on your forum.  Bro, this was among the 1st things I learned how to do and is very simple to understand, just open Subs.php and you will see.

Cheers :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Shortie on September 10, 2009, 03:20:16 AM
Hi Ya

If you are going to edit subs.php

Have a search for something like this - This is the HELP menu option

'help' => array(
'title' => $txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),


As you can see it is made up from a couple of arrays which control how the menu is titled and what sub menus it has

so if we were to create a menu item call "I Want a Menu Item" with a number of Sub menus you will need some code like this - but you will need to change it to suit you enviroment (Here I agree with SoLo that a mod which installs should do these edit for you)

'my-unique-array-name' => array(
'title' => $txt['what-ever-you-want-to-call-me-needs-to-be-added-to-modifications.php'],
'href' => 'This is where you add the URL to the item you want displayed',
'show' => This is where you set any permissions - you can just enter true, if you want everyone to see it,
'sub_buttons' => array(
'another-unique-array-name' => array(
'title' => $txt['what-ever-you-want-to-call-me-needs-to-be-added-to-modifications.php'],
'href' => 'This is where you add the URL to the item you want displayed',
'show' => his is where you set any permissions - you can just enter true, if you want everyone to see it,
'sub_buttons' => array(
'another-unique-array-name' => array(
'title' => $txt['what-ever-you-want-to-call-me-needs-to-be-added-to-modifications.php'],
'href' => 'This is where you add the URL to the item you want displayed',
'show' => his is where you set any permissions - you can just enter true, if you want everyone to see it,
'sub_buttons' => array(
'another-unique-array-name' => array(
'title' => $txt['what-ever-you-want-to-call-me-needs-to-be-added-to-modifications.php'],
'href' => 'This is where you add the URL to the item you want displayed',
'show' => his is where you set any permissions - you can just enter true, if you want everyone to see it,
'sub_buttons' => array(
'another-unique-array-name' => array(
'title' => $txt['what-ever-you-want-to-call-me-needs-to-be-added-to-modifications.php'],
'href' => 'This is where you add the URL to the item you want displayed',
'show' => his is where you set any permissions - you can just enter true, if you want everyone to see it,
),
),
),


Now once you have the code put together you can place it anywhere within the

$buttons = array(

Which will enable you to change the order in which items are displayed


NOTE This is for SMF 2.x Branch

And I have done this from memory so there may be some odd formating errors but I am sure someone will enlighten me

Shortie
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Matthew K. on September 12, 2009, 02:21:02 PM
What code do I remove in the index.template.php for version 1.1.10?

index.template.php (button section):
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// Work out where we currently are.
$current_action = 'home';
if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers')))
$current_action = 'admin';
if (in_array($context['current_action'], array('staff','tags','treasury','forum','search', 'bookmarks', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm', 'banlist')))
$current_action = $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action = 'search';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';



// EzPortal
if (isset($context['current_action2']))
$current_action = $context['current_action2'];

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first = 'last';
$last = 'first';
}
else
{
$first = 'first';
$last = 'last';
}

// Show the start of the tab section.
echo '
<table align="center" cellpadding="0" cellspacing="0" border="0" style="margin-left: auto; margin-right: auto;">
<tr>
<td class="maintab_' , $first , '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>' , $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';



// EzPortal Forum Button
global $ezpSettings;

if ($ezpSettings['ezp_portal_enable'] == 1)
echo ($current_action == 'forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'forum' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=forum">' , $txt['ezp_forum_tab'] , '</a>
</td>' , $current_action == 'forum' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>' , $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>' , $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">

<a href="', $scripturl, '?action=pm">' , 'Inbox' , $context['user']['unread_messages'] > 0 ? '&nbsp;[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>';
                   echo ' </td>' , $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The [bookmarks] button
if (allowedTo('make_bookmarks'))
echo ($current_action == 'bookmarks' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'bookmarks' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=bookmarks">' , 'Bookmarks' , '</a>
</td>' , $current_action == 'bookmarks' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>' , $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [recenttopics]!
echo ($current_action == 'recenttopics' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'recenttopics' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=recenttopics">' , $txt['recent_topics'] , '</a>
</td>' , $current_action == 'recenttopics' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>' , $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [staff list] button
if ($context['allow_view_stafflist'])
echo ($current_action == 'staff' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'staff' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=staff">' , $txt['smfstaff_stafflist']  , '</a>
</td>' , $current_action == 'staff' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// the [tags] button
echo ($current_action == 'tags' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'tags' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=tags">' , $txt['smftags_menu']  , '</a>
</td>' , $current_action == 'tags' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// the [treasury] button
if ($context['allow_view_treasury'])
echo ($current_action == 'treasury' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_', $current_action == 'treasury' ? 'active_back' : 'back', '">
<a href="', $scripturl, '?action=treasury">', $txt['treasury_menu'], '</a>
</td>', $current_action == 'treasury' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';



// the [banlist] list button
if ($context['allow_banlist'])
echo ($current_action == 'banlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'banlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=banlist">' , $txt['banlist_menu'] , '</a>
</td>' , $current_action == 'banlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>' , $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
</tr>
</table>';

}


// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';
}

?>


Thanks!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Matthew K. on September 12, 2009, 02:55:30 PM
Resolved!
Quote from: Labradoodle-360 on September 12, 2009, 02:21:02 PM
What code do I remove in the index.template.php for version 1.1.10?

index.template.php (button section):
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// Work out where we currently are.
$current_action = 'home';
if (in_array($context['current_action'], array('admin', 'ban', 'boardrecount', 'cleanperms', 'detailedversion', 'dumpdb', 'featuresettings', 'featuresettings2', 'findmember', 'maintain', 'manageattachments', 'manageboards', 'managecalendar', 'managesearch', 'membergroups', 'modlog', 'news', 'optimizetables', 'packageget', 'packages', 'permissions', 'pgdownload', 'postsettings', 'regcenter', 'repairboards', 'reports', 'serversettings', 'serversettings2', 'smileys', 'viewErrorLog', 'viewmembers')))
$current_action = 'admin';
if (in_array($context['current_action'], array('staff','tags','treasury','forum','search', 'bookmarks', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm', 'banlist')))
$current_action = $context['current_action'];
if ($context['current_action'] == 'search2')
$current_action = 'search';
if ($context['current_action'] == 'theme')
$current_action = isset($_REQUEST['sa']) && $_REQUEST['sa'] == 'pick' ? 'profile' : 'admin';



// EzPortal
if (isset($context['current_action2']))
$current_action = $context['current_action2'];

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first = 'last';
$last = 'first';
}
else
{
$first = 'first';
$last = 'last';
}

// Show the start of the tab section.
echo '
<table align="center" cellpadding="0" cellspacing="0" border="0" style="margin-left: auto; margin-right: auto;">
<tr>
<td class="maintab_' , $first , '">&nbsp;</td>';

// Show the [home] button.
echo ($current_action=='home' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>' , $current_action == 'home' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';



// EzPortal Forum Button
global $ezpSettings;

if ($ezpSettings['ezp_portal_enable'] == 1)
echo ($current_action == 'forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'forum' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=forum">' , $txt['ezp_forum_tab'] , '</a>
</td>' , $current_action == 'forum' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';
// Show the [help] button.
echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// How about the [search] button?
if ($context['allow_search'])
echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>' , $current_action == 'admin' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>' , $current_action == 'profile' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">

<a href="', $scripturl, '?action=pm">' , 'Inbox' , $context['user']['unread_messages'] > 0 ? '&nbsp;[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>';
                   echo ' </td>' , $current_action == 'pm' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The [bookmarks] button
if (allowedTo('make_bookmarks'))
echo ($current_action == 'bookmarks' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'bookmarks' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=bookmarks">' , 'Bookmarks' , '</a>
</td>' , $current_action == 'bookmarks' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [calendar]!
if ($context['allow_calendar'])
echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>' , $current_action == 'calendar' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The [recenttopics]!
echo ($current_action == 'recenttopics' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'recenttopics' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=recenttopics">' , $txt['recent_topics'] , '</a>
</td>' , $current_action == 'recenttopics' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [member] list button
if ($context['allow_memberlist'])
echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>' , $current_action == 'mlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// the [staff list] button
if ($context['allow_view_stafflist'])
echo ($current_action == 'staff' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'staff' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=staff">' , $txt['smfstaff_stafflist']  , '</a>
</td>' , $current_action == 'staff' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// the [tags] button
echo ($current_action == 'tags' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'tags' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=tags">' , $txt['smftags_menu']  , '</a>
</td>' , $current_action == 'tags' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// the [treasury] button
if ($context['allow_view_treasury'])
echo ($current_action == 'treasury' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_', $current_action == 'treasury' ? 'active_back' : 'back', '">
<a href="', $scripturl, '?action=treasury">', $txt['treasury_menu'], '</a>
</td>', $current_action == 'treasury' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';



// the [banlist] list button
if ($context['allow_banlist'])
echo ($current_action == 'banlist' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'banlist' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=banlist">' , $txt['banlist_menu'] , '</a>
</td>' , $current_action == 'banlist' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo ($current_action == 'login' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'login' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>' , $current_action == 'login' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
<td valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

// The end of tab section.
echo '
<td class="maintab_' , $last , '">&nbsp;</td>
</tr>
</table>';

}


// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td>&nbsp;</td>';

echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '">&nbsp;</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode(' &nbsp;|&nbsp; ', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '">&nbsp;</td>';
}

?>


Thanks!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Matthew K. on September 12, 2009, 03:02:57 PM
I would suggest adding border-bottom: 1px solid black; to div#menu ul.menu ul

Here is what that looks like:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi32.tinypic.com%2F120mgy8.jpg&hash=88486aa7165824a41c6f60de98d4c7ae24ef2b5c)

As you can see it adds a nice finishing touch to a nice menu!
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Sabre™ on September 20, 2009, 08:42:08 PM
Hello peeps,
I've just started really getting into the layout of smf2(boy have alot of things changed!), and by reading this thread Ive figured out how to add dropdown menus to my theme(s).
But, Im a little stuck on how to get a dropdown such as this
eg.

home
  - help
  - rules

profile
  - forum
  - account
  - messages - inbox
             - sent

calendar

etc etc etc...


The css section is relatively forward, as not much has changed in that regard, it is just trying to figure out what to put in the subs.php, or even if there is another file that needs modifying.
I've touched on  'subsections' => array(   but as stated, Im only just getting into smf2 and dont even know if that has any bearing on this.

Just using the profile array as an example, could somebody possibly point me in the right direction please?
'profile' => array(
'title' => $txt['profile'],
'href' => $scripturl . '?action=profile',
'show' => $context['allow_edit_profile'],
'sub_buttons' => array(
'summary' => array(
'title' => $txt['summary'],
'href' => $scripturl . '?action=profile',
'show' => true,
),
'account' => array(
'title' => $txt['account'],
'href' => $scripturl . '?action=profile;area=account',
'show' => allowedTo(array('profile_identity_any', 'profile_identity_own', 'manage_membergroups')),
),
'profile' => array(
'title' => $txt['forumprofile'],
'href' => $scripturl . '?action=profile;area=forumprofile',
'show' => allowedTo(array('profile_extra_any', 'profile_extra_own')),
),
),
),


I know how to sit the messages etc array in there, but how to get to the above example is a mystery for me at the moment.

Thanks in advance for any assistance :)

regards
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: naiTao on September 29, 2009, 08:53:05 AM
I will try this sulution and if i have any problem i will back, again.

thank your for your code.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Arantor on October 11, 2009, 05:59:51 AM
naiTao: did this work for you?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dkharp on October 19, 2009, 08:00:11 PM
Greetings!

I am running smf 1.1.10 / TinyPortal v1.0 beta 4
http://www.36thid.info (http://www.36thid.info)

WOOWEE! This looks great!  I have one question.  How do you make the buttons (tabs) closer together so you can add more?



Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: dkharp on October 22, 2009, 12:13:02 AM
How do you remove the help button (tab) off?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Dave009 on October 23, 2009, 11:06:46 AM
For above post
open Sources/Subs.php

find
'help' => array(
            'title' => $txt['help'],
            'href' => $scripturl . '?action=help',
            'show' => true,
            'sub_buttons' => array(
            ),
         ),


and remove thats what i did

My Question about dropdown
im trying to create a dropdown menu i read forum and followed guide im using SMF RC1.2 to create this dropdown menu.  the button appears but no dropdown appears can someone tell me if it is if you need files i get them i bet its something to do with css (css hates me for some reason lol)
i am using custom themes quite a few of them but the one thats at the top of the list is black rain v2
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: SoLoGHoST on October 23, 2009, 11:10:11 AM
It's actually in the buttons array within the 'sub_buttons' index array in Sources/Subs.php.  Look at how the other one's do it and you should be able to follow their examples on this.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Dave009 on October 23, 2009, 05:16:34 PM
i know that much lol
smf 2 rc1.2 allready has the code
sample from my subs.php
'mlist' => array(
'title' => $txt['members_title'],
'href' => $scripturl . '?action=mlist',
'show' => $context['allow_memberlist'],
'sub_buttons' => array(
'mlist_view' => array(
'title' => $txt['mlist_menu_view'],
'href' => $scripturl . '?action=mlist',
'show' => true,
),
'mlist_search' => array(
'title' => $txt['mlist_search'],
'href' => $scripturl . '?action=mlist;sa=search',
'show' => true,
),
),
),
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on October 24, 2009, 03:57:45 PM
To remove a button from the menu, you could just change

     'show' => true,     to     'show' => false,

This way, if you ever decide to display the button again, you don't have to worry about what code was deleted or where to put it, simple change false back to true.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Nameless? on October 27, 2009, 09:40:48 AM
im using smf 2.0 rc1.2 and i need something like this:

Main
- Home
- Staff
- Contact us
- Arcade


Community
- Forums


etc.

please, would be great to get help with this.
Thanks
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: hariS. on December 26, 2009, 02:08:52 PM
// Show the start of the tab section.
   echo '
<ul id="topmenu">';
// Show the [home] button.
echo '<li><a' , $current_action=='home' ? ' class="chosen"' : '' , ' href="', $scripturl, '">' , $txt[103] , '</a></li>';

// Show the [help] button.
echo '<li><a' , $current_action=='help' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li><a' , $current_action=='search' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<li><a' , $current_action=='calendar' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li><a' , $current_action=='admin' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li><a' , $current_action=='profile' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li><a' , $current_action=='pm' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li><a ' , $current_action=='mlist' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li class="last"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

if ($context['user']['is_guest'])
{
echo '<li><a' , $current_action=='login' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';
echo '<li class="last"><a' , $current_action=='register' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';
}
echo '
</ul>';
}

// Generate a strip of buttons.


Could any one paste the code for this template , DS V1


Btw , here's the eror I get :


Parse error: syntax error, unexpected $end in .../Themes/dsV1_117/index.template.php on line 761

752: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
753:
754: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
755:
756: }
757:
758:
759:
760: ?>

761:

762:
763:
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on December 26, 2009, 04:19:17 PM
Told you before: we don't support illegal usage here. If you want support on DSv1 get a Dziner Studio Theme Club membership and you'll have access to the support boards for all their premium themes.

Oh and just for your information: I have already made a custom drop menu for DSv1. It's styled for the theme. Looks fantastic. Works in all browsers including IE6. There's a complete tutorial for it with everything you need to get it working perfectly. You can find it in the DSv1 support board at Dziner. :D
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: InsaneMustang on January 10, 2010, 03:52:22 PM
Can this tutorial be applied if I am using SMF 1.1.11?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on January 10, 2010, 04:32:50 PM
It can.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ~DS~ on January 10, 2010, 11:42:34 PM
This tutorial is old and I believe it applied older SMF version. Looking one for 2.0 RC2
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on January 10, 2010, 11:54:32 PM
For which theme? Your site seems to be using a Curve variant and they already have drop menus.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ~DS~ on January 11, 2010, 12:01:36 AM
Quote from: Antechinus on January 10, 2010, 11:54:32 PM
For which theme? Your site seems to be using a Curve variant and they already have drop menus.
Yes, I am trying to attempt a drop down on slogan like SMF on the top since there's no mod for it.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Garou on January 11, 2010, 08:18:13 AM
Have you looked at
http://www.simplemachines.org/community/index.php?topic=352811.0

If you apply whats in that thread along with some of the tips for drop down menus here you should be able to make it work.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: InsaneMustang on January 11, 2010, 11:16:07 AM
Quote from: Antechinus on January 10, 2010, 04:32:50 PM
It can.

On a scale of 1 to 10 (10 being the hardest) how hard is it to do this? :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Antechinus on January 11, 2010, 02:34:50 PM
It was written for 1.1.x. It will work with any version of 1.1.x.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: p1tereq on January 22, 2010, 08:53:09 AM
Is there someone who can make this tutorial suitable for all 2.0 RC2 engine's?

Cheers,
Pete.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: ~DS~ on January 22, 2010, 12:35:31 PM
Quote from: p1tereq on January 22, 2010, 08:53:09 AM
Is there someone who can make this tutorial suitable for all 2.0 RC2 engine's?

Cheers,
Pete.
Try this:
http://www.simplemachines.org/community/index.php?topic=360100.0
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: p1tereq on January 27, 2010, 10:51:53 AM
You're a legend.

Cheers, I let the rest know after working on this one.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Divaksh on February 06, 2010, 12:21:43 PM
Can i Use 2.0 RC2? ? ?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: [unplugged] on February 06, 2010, 03:54:44 PM
Quote from: Dismal Shadow on January 22, 2010, 12:35:31 PM
Quote from: p1tereq on January 22, 2010, 08:53:09 AM
Is there someone who can make this tutorial suitable for all 2.0 RC2 engine's?

Cheers,
Pete.
Try this:
http://www.simplemachines.org/community/index.php?topic=360100.0

That was just two posts above yours..........
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: vishvijay on February 08, 2010, 01:22:07 PM
I find all this stuff very useful very very thanks for providing such a useful information.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: sanax on February 28, 2010, 12:09:20 PM
 ...it was probably asked before but there are so many pages in this thread. Is it possible to call the actual categories into the menu?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: harrysgantzias on May 29, 2010, 02:15:14 AM
hi guys... very interesting topic!
i made a dropdown menu for my forum but i have a question.. i followed the instructions given in the first message of this topic...

what additions or changes to the php and css code do i have to make in order to create a Level3 in the dropdown?
i cannot make it work... :(
and i search the community and i found nothing about that...

i want to create something like that:

-Home
-Account
--Settings
---Notification settings
---Ultimate profile
---Appearance
---Account settings
--Profile
--Logout
-Contact us
-Links

SMF version: 1.1.11

Can anyone please help me with this?  O:)
Thx in advance..
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: harrysgantzias on June 01, 2010, 11:26:22 AM
anybody??
???
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: harrysgantzias on June 20, 2010, 05:08:36 AM
I made it alone finally, with a guide (which u can find here: hxxp://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html )

In the index.template.php i have this part of code:
// Show the start of the tab section.
   echo '
         <div id="menu">
               <ul class="menu">';

// Show the Home Button                     
echo'
<li class="level1"><a href="', $scripturl, '" class="level1"><span class="title">' , $txt[103] , '</span></a>
</li>';


// How about the [search] button?
         if ($context['allow_search'])
         echo '
<li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span class="title">' , $txt[182] , '</span></a>
</li>';

// New button... [multimedia]
        $chatPath = str_replace("index.php", "chat/index.php", $scripturl);
        $num = (empty($modSettings['enableChatButtonNo'])) ? 0 : count(chatOnlineUsers());
        if ($context['allow_edit_profile'])
        echo '
<li class="level1 parent"><a href="', $scripturl, '?action=media" class="level1"><span class="title">Ψυχαγωγία</span></a>
<ul class="level2">
  <li class="level2"><a href="', $chatPath, '"', empty($modSettings['chatPopUp']) ? 'target="_blank"' : ' onclick="openWindow(this.href);this.blur();return false;"', '" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/comments.png" style="margin-bottom:-3px;"> ', $txt['chat'], ($num > 0) ?  ('('.$num.')') : '' , '</span></a>
  </li>
  <li class="level2"><a href="', $scripturl, '?action=media" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/folder_camera.png" style="margin-bottom:-3px;"> ', $txt['aeva_gallery'], '<span style="float: right;">▶</span></span></a>
   <ul class="level3">
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=92" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/application_double.png" style="margin-bottom:-3px;"> Προγράμματα</span></a></li>
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=3" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/music.png" style="margin-bottom:-3px;"> Αρχεία Ήχου</span></a></li>
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=1" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/images.png" style="margin-bottom:-3px;"> Φωτογραφίες</span></a></li>
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=2" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/film.png" style="margin-bottom:-3px;"> Βίντεο</span></a></li>
   </ul>
  </li>                         
  <li class="level2"><a href="', $scripturl, '?action=calendar" class="level2"><span class="title"><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/callendar.png" style="margin-bottom:-3px;"> ' , $txt['calendar24'] , '</span></a>
  </li>               
</ul>
</li>';

// Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span class="title">' , $txt[2] , '</span></a>
                <ul class="level2">
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=news" class="level2"><span>Ειδήσεις & ενημερωτικά δελτία</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=packages" class="level2"><span>Πακέτα</span></a>
                <ul class="level3">
                    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=packages" class="level3"><span>Πακέτα</span></a></li>
                </ul>
            </li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=featuresettings" class="level2"><span>Χαρακτηριστικά & Επιλογές</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=theme;sa=admin;sesc=ac9f8e1c4b8c4c3257b0d54378cdc6f3" class="level2"><span>Εμφάνιση και Διάταξη</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=twittersettings" class="level2"><span>Twitter & Fb publisher Mod</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=globalhf;sesc=ac9f8e1c4b8c4c3257b0d54378cdc6f3" class="level2"><span>Global Headers & Footers</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=admin;area=aeva_settings;sesc=ac9f8e1c4b8c4c3257b0d54378cdc6f3" class="level2"><span>Aeva Media</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=manageboards" class="level2"><span>Πίνακες</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=postsettings" class="level2"><span>Μηνύματα και θέματα</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=viewmembers" class="level2"><span>Μέλη</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=membergroups;" class="level2"><span>Ομάδες μελών</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=permissions" class="level2"><span>Δικαιώματα</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=regcenter" class="level2"><span>Εγγραφές</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=ban" class="level2"><span>Απαγορεύσεις σε μέλη</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=maintain" class="level2"><span>Συντήρηση Δημόσιας συζήτησης</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=viewErrorLog;desc" class="level2"><span>Αρχείο καταγραφής σφαλμάτων</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=modlog" class="level2"><span>Αρχείο καταγραφής συντονισμού</span></a></li>
                                  </ul></li>';

// Go to PM center... [pm]
       if ($context['user']['is_logged'] && $context['allow_pm'])
       echo '
<li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></a>
   <ul class="level2">
      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/email.png" style="margin-bottom:-3px;"> ' , $txt['hcm_readmessages'] , '</span></a></li>
      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/email_edit.png" style="margin-bottom:-3px;"> ' , $txt['hcm_sendmessage'] , '</span></a></li>
   </ul>
</li>';

// Edit Account... [Account]
     if ($context['allow_edit_profile'])
     echo '
<li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span class="title">Λογαριασμός</span></a>
  <ul class="level2">
     <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/icons/profile_sm.gif" style="margin-bottom:-3px;"> Προφίλ<span style="float: right;">▶</span></span></a>
        <ul class="level3">
           <li class="level3"><a href="', $scripturl, '?action=profile" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/user.png" style="margin-bottom:-3px;"> Προβολή Προφίλ</span></a>
           <li class="level3"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/user_edit.png" style="margin-bottom:-3px;"> Επεξεργασία Προφίλ</span></a>
        </ul>
     </li>
     <li class="level2"><a><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/cog.png" style="margin-bottom:-3px;"> Ρυθμίσεις<span style="float: right;">▶</span></span></a>
       <ul class="level3">
         <li class="level3"><a href="', $scripturl, '?action=profile;sa=account" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/cog_edit.png" style="margin-bottom:-3px;"> Ρυθμίσεις λογαριασμού</span></a>
         <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=notification" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/cog_error.png" style="margin-bottom:-3px;"> Ρυθμίσεις ειδοποιήσεων</span></a></li>
         <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=theme" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/eye.png" style="margin-bottom:-3px;"> Ρυθμίσεις εμφάνισης</span></a></li>
         <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=customized" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/vcard_edit.png" style="margin-bottom:-3px;"> Ρυθμίσεις πλήρους προφίλ</span></a></li>
       </ul>
     </li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=buddies" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/group.png" style="margin-bottom:-3px;"> Λίστα φίλων</span></a>
     </li>
     <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/members.gif" style="margin-bottom:-3px;"> Λίστα μελών<span style="float: right;">▶</span></span></a>
       <ul class="level3">
          <li class="level3"><a href="', $scripturl, '?action=mlist" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/members.gif" style="margin-bottom:-3px;"> ' , $txt['hcm_viewmembers'] , '</span></a></li>
          <li class="level3"><a href="', $scripturl, '?action=mlist;sa=search" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/group_key.png" style="margin-bottom:-3px;"> ' , $txt['hcm_searchmembers'] , '</span></a></li>
          <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=13" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/group_gear.png" style="margin-bottom:-3px;"> Moderating Team</span></a></li>
       </ul>
     </li>
     <li class="level2"><a href="', $scripturl, '?action=help" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/help.png" style="margin-bottom:-3px;"> Βοήθεια</span></a></li>
     <li class="level2"><a href="', $scripturl, '?action=rules" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/script.png" style="margin-bottom:-3px;"> Κανόνες</span></a></li>
     <li class="level2"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/door_in.png" style="margin-bottom:-3px;"> ' , $txt[108] , '</span></a></li>           
  </ul>
</li>';

// New button... [Contact]
    echo '
<li class="level1 parent"><a href="', $scripturl, '?action=contact" class="level1"><span class="title">' ,  $txt['smfcontact_contact'] , '</span></a>
  <ul class="level2">
     <li class="level2"><a href="', $scripturl, '?action=contact" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/email_go.png" style="margin-bottom:-3px;"> Επικοινωνήστε μαζί μας</span></a></li>
     <li class="level2"><a href="', $scripturl, '?action=help" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/help.png" style="margin-bottom:-3px;"> Βοήθεια</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=11" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/facebook.gif" style="margin-bottom:-3px;"> Fan Page στο Facebook</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=12" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/world.png" style="margin-bottom:-3px;"> Forum Alimentarius on Social Networks<span style="float: right;">▶</span></span></a>
       <ul class="level3">
        <li class="level3"><a href="http://www.facebook.com/pages/Athens-Greece/Forum-Alimentarius/353291482384" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/facebook.gif" style="margin-bottom:-3px;"> Fan Page on Facebook</span></a></li>
        <li class="level3"><a href="http://www.twitter.com/f_alimentarius" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/twitter.gif" style="margin-bottom:-3px;"> Follow us on Twitter</span></a></li>
        <li class="level3"><a href="http://www.perfspot.com/forumalimentarius" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/perfspot.png" style="margin-bottom:-3px;"> Perfspot</span></a></li>
       </ul>
     </li>
  </ul>
</li>';

// New button... [pages]
            echo '
<li class="level1 parent"><a href="', $scripturl, '?action=pages" class="level1 parent"><span class="title">', !empty($modSettings['dozen_pages_tab_label']) ? $modSettings['dozen_pages_tab_label'] : $txt['dozen_pages_tab_default'], '</span></a>
   <ul class="level2">
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/aua.png" style="margin-bottom:-3px;"> Γεωπονικό Πανεπιστήμιο Αθηνών</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=2" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/aua.png" style="margin-bottom:-3px;"> Σελίδες Καθηγητών ΓΠΑ</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=4" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/agriculture.png" style="margin-bottom:-3px;"> Γεωπονικά - Αγροτικά</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=5" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/page_find.png" style="margin-bottom:-3px;"> Αναζήτηση Επιστημονικής Βιβλιογραφίας</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=7" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/book_open.png" style="margin-bottom:-3px;"> Ελληνικές Βιβλιοθήκες στο Διαδίκτυο</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=6" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/link.png" style="margin-bottom:-3px;"> Food Science & Technology: Useful Links</span></a></li>
   </ul>
</li>';
 
// New button... [Lessons]
  echo '
<li class="level1 parent"><a href="http://www.gewponoi.com/trofima/ygieini" class="level1 parent"><span class="title">Εκπαιδευτικό Υλικό</span></a>
     <ul class="level2">
         <li class="level2"><a href="http://www.gewponoi.com/trofima/ygieini" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/bullet_black.png" style="margin-bottom:-4px;">Υγιεινή τροφίμων & εγκατ. βιομηχ. τροφίμων</span></a>
         </li>
     </ul>
</li>';
                                         
// If the user is a guest, show [login] button.
         if ($context['user']['is_guest'])
         echo '
<li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span class="title">' , $txt[34] , '</span></a>
</li>';
                           
// If the user is a guest, also show [register] button.
         if ($context['user']['is_guest'])
         echo '
<li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span class="title">' , $txt[97] , '</span></a>
</li>';
                     

            echo '
                            </ul>
                  </div>';
         }


And i have this code in style.css :
/* DropDownMenu */

div#menu {
   float: auto;
   left: 0px;
   top: 0px;
   margin-top: 0px;
   z-index: 11;
   height: 36px;
   background: url('images/sep_black.png') no-repeat; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px;

}

div#menu ul {
   list-style: none;
   float: left;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;

}


div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px 0px 0px 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
   font-size: 12px;
   font-family: Arial
}
div#menu li a, #menu li span.separator {
   height: 36px;
   display: block;
   float: left;
   line-height: 40px;
   text-decoration: none;
   color: #000000;
   font-size: 11px;
}
div#menu li span {
   display: block;
}
div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;

}
div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #ffffff;
   font-size: 11px;
   background: url(images/catbg.jpg) #2A2A2C repeat-x; /*Change your submenu background color in here*/
}
div#menu li.active {
   font-weight: bold;
   font-size: 12px;

}
div#menu li.active ul {
   font-weight: normal;
   font-size: 12px;

}
div#menu li.parent span.separator {
   cursor: pointer;
}
div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_black.png') no-repeat;
   height: 36px;
}
div#menu ul.menu ul {
padding-right: 0px;
}
div#menu li.level1 {
   background: url('images/sep_black.png') no-repeat;
   height: 36px;
}
div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat;
   height: 36px;
   color: #000000; /*Change your menu link color in here*/
   font-size: 12px; /*Change your menu font size in here*/
   padding: 0px 6px 0px 6px;   
}
div#menu a.level1 span, div#menu span.level1 span {
   padding: 5px 20px 5px 20px;
}
div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
   background: #513D2B url(images/catbg.jpg);
   background-position:left bottom;
   font-weight:bold;
   text-decoration:none;
}

div#menu li.active a.level1, div#menu li.active span.level1, div#menu li.active a.level2, div#menu li.active span.level2 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
   font-size: 11px;
}

div#menu a.level1 span.title, div#menu span.level1 span.title, div#menu a.level2 span.title, div#menu span.level2 span.title{
   padding: 0px;

}
div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #000000;
   margin-top: -6px;
   line-height: 10px;
}
div#menu a.level2 span.sub, div#menu span.level2 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #000000;
   margin-top: -6px;
   line-height: 10px;
}

div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub, div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub
{
   color: #000000;
   background: #695A43;
   background-position: left bottom;
   font-weight: bold;
   text-decoration: none;
}
div#menu ul.menu ul {
   position: absolute;
   top: 36px;
   left: -999em;
   width: 265px;
   font-size: 80%;
   border-bottom: 1px solid #402F14;
   border-top: 1px solid #402F14;
   border-left: 1px solid #402F14;
   border-right: 1px solid #402F14;
-moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topright: 4px;
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-right-radius: 4px;
   -webkit-border-top-left-radius: 4px;
   background: #cbc394; /*Change your submenu background color in here*/
}
div#menu ul.menu ul ul {
   position: absolute;
   display: none;
   top: 0px;
   width: 180px;
   font-size: 80%;
-moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topright: 4px;
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-right-radius: 4px;
   -webkit-border-top-left-radius: 4px;
   background: #cbc394; /*Change your submenu background color in here*/
}
div#menu li:hover ul, div#menu li.sfhover ul{
   left: 0px;
   z-index: 100; 
}
div#menu ul ul li:hover ul {
   left: 265px;
   z-index: 100;
   display: block;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 3px;
}
div#menu li.level2 li {
      width: 100%;
   text-indent: 3px;
}
div#menu li.level1 li a, div#menu li.level1 li span.separator {
   height: 25px;
   width: 265px;
   padding: 0px;
   margin: 0px 0px;
   border-right: 0px solid #000000;
   border-left: 0px solid #000000;
   float: none;
   display: block;
   line-height: 25px;
}

div#menu li.level2 li a, div#menu li.level2 li span.separator {
   height: 25px;
   width: 180px;
   padding: 0px;
   margin: 0px 0px;
   border-right: 0px solid #000000;
   border-left: 0px solid #000000;
   float: none;
   display: block;
   line-height: 25px;
}
/* End of DropDownMenu */



I don't know if all these in the style.css are required, because i m not a programmer. I was experimenting with this alone, and finally i made it work! :)
I put some 16*16 icons in the left side of the submenu to make it more friendly for members. These icons are a free set named "Silk icons". You can find them on the Internet for free (google it ;) )
Finally, i have put a symbol "▶" in the right side of the level2 menu in those options that have another submenu.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: h3aD$h0t on August 16, 2010, 01:03:05 PM
Hi , i have DzinerStudio's SilentWave, i was edit it. If have codes for dropdown menu for silent wave, pls give them to me xD i cnat find them, sorry, my english is bad again xD
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: Weite13 on August 26, 2010, 09:01:58 AM
can someone plss upload pic http://img527.imageshack.us/img527/10/menuitempw9.png (as menu_item.png)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: NoFeaR / NFSMW on October 07, 2010, 05:37:41 AM
I have a big problem, i made a small dropdown menu and put it insite a TP block. But the dropdown menu goes under the other block. How can i fix that problem?
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: harrysgantzias on October 07, 2010, 05:41:18 AM
I had a similar problem, and i fixed it by doing this:

in style.css i changed the:
div#menu {
   float: left;
  ...


to:
float: none;

tell me if this helps you!  :)
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: NoFeaR / NFSMW on October 07, 2010, 05:44:32 AM
Let me try quick
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: NoFeaR / NFSMW on October 07, 2010, 05:57:45 AM
Nope, This is what my css looks like this.
Quoteul#css3menu,ul#css3menu ul{
    margin:0;list-style:none;background-color:#C0C0C0;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#FFF;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#d8d9da;}
ul#css3menu li:hover>*{
    display:block;}
ul#css3menu li:hover{
    position:relative;}
ul#css3menu ul ul{
    position:absolute;left:100%;top:0;}
ul#css3menu{
    padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu li{
    display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
    margin:0 0 0 1px;}
ul#css3menu ul>li{
    margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
    outline-style:none;}
ul#css3menu a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial,sans-serif;color:#262626;cursor:default;padding:10px;background-color:#C0C0C0;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu ul li{
    float:none;margin:9px 0 0;}
ul#css3menu ul a{
    text-align:left;padding:8px 0 0 0;background-color:#FFF;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial,sans-serif;color:#333333;text-decoration:none;}
ul#css3menu li:hover>a{
    background-color:#C0C0C0;border-style:none;font:bold 12px Arial,sans-serif;color:#efefef;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu img{
    border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu img.over{
    display:none;}
ul#css3menu li:hover > a img.def{
    display:none;}
ul#css3menu li:hover > a img.over{
    display:inline;}
ul#css3menu span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul span{
    background-image:url("arrowsub.gif");padding-right:27px;}
ul#css3menu ul li:hover>a{
    background-color:#FFF;background-image:none;border-style:solid;border-color:#D9D9D9;font:13px Arial,sans-serif;color:#55de3d;text-decoration:none;}
ul#css3menu li.topfirst>a{
    height:35px;line-height:35px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.topfirst:hover>a{
    line-height:35px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.topmenu>a{
    height:35px;line-height:35px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.topmenu:hover>a{
    line-height:35px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.toplast>a{
    height:35px;line-height:35px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.toplast:hover>a{
    line-height:35px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu ._>li>a{
    padding:0;}
ul#css3menu li.subfirst>a{
    border-width:0;border-style:none;padding:0;}
ul#css3menu li.subfirst:hover>a{
    border-style:none;}
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: TheSniperK2R on October 22, 2010, 11:04:55 AM
Could i possibly get any help with this? I'm running SMF 2.0 RC3 and using the DarkBreak theme . I am sorry for asking but i do not have any coding experience and i don't feel comfortable with editing any files. But i do feel this would really help out my website a lot.
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: TheSniperK2R on October 24, 2010, 07:03:28 PM
bump
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: TheSniperK2R on October 26, 2010, 01:50:21 PM
bump
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: harrysgantzias on October 26, 2010, 05:23:11 PM
i personally dont know man... sorry
i m not a programmer and i dont have smf 2 rc3...
if i had... my pleasure to help...

any others here?

somebody inside the community may know...
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: TheSniperK2R on October 28, 2010, 06:43:54 AM
thanks tho, hopefully someone here could help since im a noob at this.. :(
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: TheSniperK2R on October 29, 2010, 03:24:28 PM
bump
Title: Re: [Tip] Drop Down Menu Tutorial (..for all themes)
Post by: TheSniperK2R on November 01, 2010, 02:54:44 PM
bump