Advertisement:

Author Topic: [Tip] Additional Dropdown Menu for Curve Theme 2.0 RC3  (Read 89965 times)

Offline ScopeXL

  • Jr. Member
  • **
  • Posts: 130
  • Gender: Male
  • In a box on an island...with broadband.
    • BnetWeb
[Tip] Additional Dropdown Menu for Curve Theme 2.0 RC3
« on: January 15, 2010, 02:12:21 AM »
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:
Code: [Select]
function template_menu()

Add Before:
Code: [Select]
// 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:
Code: [Select]
', 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:
Code: [Select]
', template_menu_top(), '

Step 2:
In /Sources/Subs.php

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

Add After:
Code: [Select]
// 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:
Code: [Select]
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}

Replace With:
Code: [Select]
#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:
Code: [Select]
'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:
Code: [Select]
'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!
« Last Edit: March 09, 2010, 07:43:02 PM by ScopeXL »

Offline ~DS~

  • SMF Hero
  • ******
  • Posts: 2,599
  • Gender: Male
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #1 on: January 15, 2010, 02:20:27 AM »
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

Offline ScopeXL

  • Jr. Member
  • **
  • Posts: 130
  • Gender: Male
  • In a box on an island...with broadband.
    • BnetWeb
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #2 on: January 15, 2010, 02:24:46 AM »
Thank for this tutorial and I will be working on this one.

no problem, let me know how it goes :)

Offline p1tereq

  • Semi-Newbie
  • *
  • Posts: 18
  • Gender: Male
  • Results might vary
    • Faithful for Homeland
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #3 on: January 28, 2010, 10:00:52 AM »
Well, works perfectly on every SMF 2.x engine, good work. You're a star.

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

Offline sAce

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,992
    • @sbplus_t on Twitter
    • SB+
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #4 on: January 28, 2010, 11:00:13 AM »
indeed, very good tip, thanks a lot buddy

Offline Sabre™

  • SMF Hero
  • ******
  • Posts: 2,527
  • Gender: Male
  • IF IT AINT BROKE, I CAN FIX IT TILL IT IS!!
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #5 on: January 28, 2010, 01:37:20 PM »
Cheers mate, I'll be using this for sure! :)
Do NOT give admin and/or ftp details to just anybody, see if they are trust worthy first!!  Do your homework ;)


Offline ~DS~

  • SMF Hero
  • ******
  • Posts: 2,599
  • Gender: Male
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #6 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:
“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

Offline steve51184

  • Sr. Member
  • ****
  • Posts: 781
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #7 on: February 07, 2010, 03:58:02 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 :(

Offline ~DS~

  • SMF Hero
  • ******
  • Posts: 2,599
  • Gender: Male
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #8 on: February 07, 2010, 04:00:01 PM »
I wonder how SMF did with 9 tabs  :o
“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

Offline tfs

  • Full Member
  • ***
  • Posts: 422
  • Gender: Male
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #9 on: February 07, 2010, 04:32:10 PM »
Nice tip!  Ping for later reading...
A good tree cannot bring forth evil fruit, neither can an evil tree bring forth good fruit.

Offline ~DS~

  • SMF Hero
  • ******
  • Posts: 2,599
  • Gender: Male
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #10 on: February 07, 2010, 08:48:04 PM »
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

« Last Edit: February 07, 2010, 10:48:33 PM by Dismal Shadow »
“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

Offline ScopeXL

  • Jr. Member
  • **
  • Posts: 130
  • Gender: Male
  • In a box on an island...with broadband.
    • BnetWeb
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #11 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.

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.

Offline ~DS~

  • SMF Hero
  • ******
  • Posts: 2,599
  • Gender: Male
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #12 on: February 08, 2010, 12:02:13 AM »
@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...
Code: [Select]
#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

Offline ScopeXL

  • Jr. Member
  • **
  • Posts: 130
  • Gender: Male
  • In a box on an island...with broadband.
    • BnetWeb
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #13 on: February 08, 2010, 12:04:58 AM »
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.

Offline steve51184

  • Sr. Member
  • ****
  • Posts: 781
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #14 on: February 08, 2010, 12:05:49 AM »
@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...
Code: [Select]
#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

Offline steve51184

  • Sr. Member
  • ****
  • Posts: 781
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #15 on: February 08, 2010, 12:16:36 AM »
wait no that changes the wrong bit lol how do we get more on one line?

Offline ScopeXL

  • Jr. Member
  • **
  • Posts: 130
  • Gender: Male
  • In a box on an island...with broadband.
    • BnetWeb
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #16 on: February 08, 2010, 12:18:42 AM »
@ppbz: That hasn't been fixed yet.

Offline steve51184

  • Sr. Member
  • ****
  • Posts: 781
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #17 on: February 08, 2010, 12:20:40 AM »
ok but isn't it just a matter of making that space at the top right a little bigger?

Offline ScopeXL

  • Jr. Member
  • **
  • Posts: 130
  • Gender: Male
  • In a box on an island...with broadband.
    • BnetWeb
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #18 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.

Offline steve51184

  • Sr. Member
  • ****
  • Posts: 781
Re: [Tip] Additional Dropdown Menu for Curve Theme
« Reply #19 on: February 08, 2010, 12:30:07 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 :)