[Tip] Additional Dropdown Menu for Curve Theme 2.0 RC3

Started by ScopeXL, January 15, 2010, 02:12:21 AM

Previous topic - Next topic

ScopeXL

Possible Tip for Tips/Tricks board?

Ok, so I noticed how SMF has 2 dropdown menus (one for the community forum which is in Curve already, and one in the header Home, Community, Download, Customize, etc... which is not included in Curve). So I modified it to add another menu to the header much like SMF does there menu.

Demo

This Tip is moderate/advanced to accomplish entirely. Follow the steps and you should be able to figure out the rest.

Thanks to ElectricSquid for finding the location of the dropdown in Subs.php

Step 1:
In /Themes/default/index.template.php

Find:

function template_menu()


Add Before:

// Show the menu up top. The header navigation
function template_menu_top()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="site_menu" class="align_right">
<ul class="dropmenu" id="site_nav">';

foreach ($context['custom_menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a', $grandchildbutton['active_button'] ? ' class="active"' : '', ' href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

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


Find:

', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="align_right">' . $settings['site_slogan'] . '</div>', '


Replace With:

', template_menu_top(), '


Step 2:
In /Sources/Subs.php

Find:

$context['menu_buttons']['pm']['title'] .= ' [<strong>' . $context['user']['unread_messages'] . '</strong>]';
}


Add After:

// Header Menu Dropdown Begin.
   if (($menu_buttons = cache_get_data('menu_buttons-' . implode('_', $user_info['groups']) . '-' . $user_info['language'], $cacheTime)) === null || time() - $cacheTime <= $modSettings['settings_updated'])
   {
      $buttonsTop = array(
         'menu1' => array(
            'title' => 'Menu 1',
            'href' => $scripturl,
            'show' => true,
            'sub_buttons' => array(
               'sub_menu1' => array(
                  'title' => 'Sub Menu 1',
                  'href' => $scripturl,
                  'show' => true,
               ),
               'sub_menu2' => array(
                  'title' => 'Sub Menu 2',
                  'href' => $scripturl,
                  'show' => true,
               ),
               'sub_menu3' => array(
                  'title' => 'Sub Menu 3',
                  'href' => $scripturl,
                  'show' => true,
               ),
            ),
         ),
         'menu2' => array(
            'title' => 'Menu 2',
            'href' => $scripturl,
            'show' => true,
            'sub_buttons' => array(
               'sub_menu4' => array(
                  'title' => 'Sub Menu 4',
                  'href' => $scripturl,
                  'show' => true,
               ),
               'sub_menu5' => array(
                  'title' => 'Sub Menu 5',
                  'href' => $scripturl,
                  'show' => true,
               ),
            ),
         ),
         'menu3' => array(
            'title' => 'Menu 3',
            'href' => $scripturl,
            'show' => true,
            'sub_buttons' => array(
            ),
         ),
      );

      // Now we put the buttons in the context so the theme can use them.
      $menu_buttonsTop = array();
      foreach ($buttonsTop as $act => $button)
         if (!empty($button['show']))
         {
            $button['active_button'] = false;

            // Make sure the last button truely is the last button.
            if (!empty($button['is_last']))
            {
               if (isset($last_button))
                  unset($menu_buttonstop[$last_button]['is_last']);
               $last_button = $act;
            }

            // Go through the sub buttons if there are any.
            if (!empty($button['sub_buttons']))
               foreach ($button['sub_buttons'] as $key => $subbutton)
               {
                  if (empty($subbutton['show']))
                     unset($button['sub_buttons'][$key]);
               }

            $menu_buttonsTop[$act] = $button;
         }

      if (!empty($modSettings['cache_enable']) && $modSettings['cache_enable'] >= 2)
         cache_put_data('menu_buttons-' . implode('_', $user_info['groups']) . '-' . $user_info['language'], $menu_buttonstop, $cacheTime);
   }

   $context['custom_menu_buttons'] = $menu_buttonsTop;
// Header Menu Dropdown End.


Step 3:
In /Themes/default/css/index.css

Find:

#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}


Replace With:

#top_section
{
min-height: 65px;
/*overflow: hidden;*/
margin-bottom: 3px;
}
#site_menu
{
padding: 12px 0 4px 1em;
margin: 0;
/*overflow: hidden;*/
font-size: 1.1em;
font-family: tahoma, sans-serif;
}
h1.forumtitle
{
font-family: "Century Gothic", tahoma, sans-serif;
position: absolute;
}
#main_menu
{
margin-top: 1em;
}
#site_nav li a.active
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -31px;
}
#site_nav li a.active span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 -31px;
}


Step 4:
Go back into /Sources/Subs.php and edit the menu items you added from this tutorial. For example to change 'Menu 1' to 'About Us' with some links

Find:

'menu1' => array(
'title' => 'Menu 1',
'href' => $scripturl,
'show' => true,
'sub_buttons' => array(
'sub_menu1' => array(
'title' => 'Sub Menu 1',
'href' => $scripturl,
'show' => true,
),
'sub_menu2' => array(
'title' => 'Sub Menu 2',
'href' => $scripturl,
'show' => true,
),
'sub_menu3' => array(
'title' => 'Sub Menu 3',
'href' => $scripturl,
'show' => true,
),
),
),


Replace With:

'about_us' => array(
'title' => 'About Us',
'href' => $scripturl,
'show' => true,
'sub_buttons' => array(
'member_list' => array(
'title' => 'Member List',
'href' => $scripturl . '?action=mlist',
'show' => true,
),
'search_site' => array(
'title' => 'Search',
'href' => $scripturl . '?action=search',
'show' => true,
),
'help_us' => array(
'title' => 'Help',
'href' => $scripturl . '?action=help',
'show' => true,
),
),
),


Step 5:
Done!

You can add as many menu items and sub items as you want, just be sure to edit Subs.php accordingly.

Attached is a screenshot of the customization when its complete. If you have any questions regarding this tip, please respond to this topic, no pm support.

I have only tested this on the default Curve theme, if you use a custom theme your results might vary.

Updated 2/25/2010: Fixed the issue with only being able to have 4 or so menu items. Should be able to use as many as you like.
Updated 3/9/2010: Updated to work with 2.0RC3 and also fixed issue of word wrapping to a new line. Should be fully functional now

Enjoy!

~DS~

Thank for this tutorial and I will be working on this one.
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

ScopeXL

Quote from: Dismal Shadow on January 15, 2010, 02:20:27 AM
Thank for this tutorial and I will be working on this one.

no problem, let me know how it goes :)

p1tereq

Well, works perfectly on every SMF 2.x engine, good work. You're a star.

Thanks a million!
Seeing the beauty of diversity in...

sAce


Sabre™

Do NOT give admin and/or ftp details to just anybody, see if they are trust worthy first!!  Do your homework ;)


~DS~

It works, but I can't add more than 4 tabs or else it will look like this:
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

steve51184

Quote from: Dismal Shadow on February 07, 2010, 03:40:18 PM
It works, but I can't add more than 4 tabs or else it will look like this:

yeah i had that same problem :(

~DS~

"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

tfs

A good tree cannot bring forth evil fruit, neither can an evil tree bring forth good fruit.

~DS~

#10
BTW...I believed the editing in index.css isn't needed since it works fine without it and also mess up the header related here:

http://www.simplemachines.org/community/index.php?topic=364715.msg2492256#msg2492256

"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

ScopeXL

@Dismal Shadow: I am working on a fix to be able to add more tabs to the header. Also, the edit in index.css is needed as it will just align on the top if not used, you have to tweak to your settings when using a logo that doesn't match SMF2.0 default theme.

I am no CSS wizard, and that's the only problem causing the multiple tab issues, so hopefully I'll find the underlying cause because it is "Supposed" to align on the right but when I tweak it it goes to the left. If anyone would like to take a stab at it be my guest and I'll update the existing code. I'm still fiddling with it.

~DS~

Quote from: ScopeXL on February 07, 2010, 11:48:17 PM
@Dismal Shadow: I am working on a fix to be able to add more tabs to the header. Also, the edit in index.css is needed as it will just align on the top if not used, you have to tweak to your settings when using a logo that doesn't match SMF2.0 default theme.
That's what I did...
#top_section
{
min-height: 65px;
/*overflow: hidden;*/
margin-bottom: 3px;
}


I changed 65px to 120px and it works beautiful.
I was hoping someone would make it into a mod, but I guess it's not worth it since this tip is not so hard.
http://www.simplemachines.org/community/index.php?topic=362589.0
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

ScopeXL

I was asked if someone could turn this into a mod, I agreed. I have yet to hear from that person on progress of it. Hopefully I can fix the width of the tab bar to stretch across the entire header, which is easy, but for some reason it won't align on the right. So its being a pain.

steve51184

Quote from: Dismal Shadow on February 08, 2010, 12:02:13 AM
Quote from: ScopeXL on February 07, 2010, 11:48:17 PM
@Dismal Shadow: I am working on a fix to be able to add more tabs to the header. Also, the edit in index.css is needed as it will just align on the top if not used, you have to tweak to your settings when using a logo that doesn't match SMF2.0 default theme.
That's what I did...
#top_section
{
min-height: 65px;
/*overflow: hidden;*/
margin-bottom: 3px;
}


I changed 65px to 120px and it works beautiful.
I was hoping someone would make it into a mod, but I guess it's not worth it since this tip is not so hard.
http://www.simplemachines.org/community/index.php?topic=362589.0

nice tip ty

steve51184

wait no that changes the wrong bit lol how do we get more on one line?

ScopeXL


steve51184

ok but isn't it just a matter of making that space at the top right a little bigger?

ScopeXL

You would think so, but no. Making it a little bigger won't fix everyone's problem. So I'm attempting to make it 100% wide and align it on the right by default, which isn't going so well. A quick fix would be to add width: XXXpx; to the #siteslogan CSS and edit the width to whatever size you need, but you'll need to change it with every tab you decide to add.

steve51184

Quote from: ScopeXL on February 08, 2010, 12:23:41 AM
You would think so, but no. Making it a little bigger won't fix everyone's problem. So I'm attempting to make it 100% wide and align it on the right by default, which isn't going so well. A quick fix would be to add width: XXXpx; to the #siteslogan CSS and edit the width to whatever size you need, but you'll need to change it with every tab you decide to add.

yeah i did change it to 27px and it looks good for me but for people with different screen sizes it still drops it onto a new line

wait nm that was 27% i think i use but px works fine thank you :)

Advertisement: