[Tip] Drop Down Menu Feature of Dilber MC Theme

Started by Hoochie Coochie Man, August 04, 2008, 06:14:12 AM

Previous topic - Next topic

Adish - (F.L.A.M.E.R)

Thank you very much, I tried it onto that theme and it rocks. I was trying to use somewhat the same things but just the differense is the colours of navigation bar. I am now using Dark Night theme and Dilber MC theme's navigation bar is same as Dark Night. Hence should have much problem i suppose.

Can you please tell me the edits for it please.

Thank you.

Antechinus

#41
Uh-oh, here we go. Ive just made the mistake of checking this menu in IE7 and yup, it has problems.
Cross-browser compatibility strikes again.

Beats me why anyone would be stupid enough to use IE but a lot of people do.
Anyway screenshot follows..............................




ETA: Just to double check I've tested it again without the forum button or upshrinks and the problem is still the same. Altering the 148px dimension in ie.css makes absolutely no difference either. Sorry mate but I have to go by what my server is telling me.

I'll also add that this sort of thing is precisely what I encountered when trying to add drop menus to the Outline theme. I could get them perfect in Firefox or perfect in IE, but...........................

ETA 2: Just had a brainwave (which I should have had before). I think it should be possible to get around this by adding quite a few more classes to the ie.css
Basically making it a duplicate of the standard css but with different paddings and margins or whatever. I'll test this out later.

Hoochie Coochie Man

Hi @F.L.A.M.E.R

I made a few images for that theme.

http://img142.imageshack.us/img142/1810/menubgyu0.png (as menu_bg.png)

http://img142.imageshack.us/img142/2824/menuitemiz9.png (as menu_item.png)




Hi @asudhakar

You must do what I said.
just increase it..

top: 145px;

Your other menu (very on top) creates this error, so you must increase it 155 or 160

İnadına SMF 1.1.X

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 07, 2008, 02:49:35 AM

Your other menu (very on top) creates this error, so you must increase it 155 or 160


Sir, i have already tried between 145 - 185 px ;

When i change it to  top: 145px; - Guest shows top out of menu - User is perfectly fitted
When i change it to  top: 165px; - Guest Shows Perfect Menu - User menu is down to the menu bar.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

@antechinus
did you try increase top: 148px; in ie.css

@asudhakar
Can you give me an account please?
İnadına SMF 1.1.X

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 07, 2008, 03:52:21 AM

@asudhakar
Can you give me an account please?


Hi HCM, I have sent a PM of my account details.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

Quote from: asudhakar on August 07, 2008, 03:59:42 AM
Quote from: Hoochie Coochie Man on August 07, 2008, 03:52:21 AM

@asudhakar
Can you give me an account please?


Hi HCM, I have sent a PM of my account details.

@asudhakar, you didn't say to me when users log in, on very on top menu dissapear.

Open style.css
Find:
div#menu {
position: absolute;
top: 145px;
left: 40px;
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
}


Replace:
div#menu {
left: 40px;
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
}


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


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


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


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


finally replace these images with oldies..

http://img382.imageshack.us/img382/8362/sepblackyk3.png (as sep_black.png)

http://img58.imageshack.us/img58/3752/sepwhitezl2.png (as sep_white.png)
İnadına SMF 1.1.X

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 07, 2008, 04:20:17 AM

@asudhakar, you didn't say to me when users log in, on very on top menu disappear.


I got the error Fix HCM, Thanks for it . I have used the top menu earlier just to get focus of users.
Thanks for the Code and now its working fine after refreshing guest and login pages.

Have Now check at Internet Explorer 6.
Saw a thick link underneath the drop down menu.

But no drop down effect only in Internet Explorer. Check with few other systems also using Internet Explorer 6 & 7.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

@asudhakar

I'm using only Firefox and IE7 browsers.
and your site works fine both of.

You must show me your error with a pic of your IE6 error.
İnadına SMF 1.1.X

Antechinus

Quote from: Hoochie Coochie Man on August 07, 2008, 03:52:21 AM@antechinus
did you try increase top: 148px; in ie.css

Quote from: antechinus on August 06, 2008, 06:27:42 PMAltering the 148px dimension in ie.css makes absolutely no difference either.

All the way to 258, just for the hell of it. Didn't seem to help. I tried going 158-168 first of course.

Btw I've only tried this on XAMPP so far but I was refreshing. Tried clearing cache and cookies as well.

I'll try loading it on a live site tomorrow.

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 07, 2008, 04:51:40 AM
You must show me your error with a pic of your IE6 error.

Yes now tested at IE7 after Install - Works good in IE7, Mozilla 2.0, 3.0 and Opera 9.27

Not showing in IE6. Images  of ie6
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Adish - (F.L.A.M.E.R)

Quote from: Hoochie Coochie Man on August 07, 2008, 02:49:35 AM
Hi @F.L.A.M.E.R

I made a few images for that theme.

http://img142.imageshack.us/img142/1810/menubgyu0.png (as menu_bg.png)

http://img142.imageshack.us/img142/2824/menuitemiz9.png (as menu_item.png)

Shall I just upload these two images and do the code edits ? Or some changes are to be done in the code ?

Thanks for the reply.

Hoochie Coochie Man

#52
Quote from: F.L.A.M.E.R on August 07, 2008, 06:10:04 AM
some changes are to be done in the code ?
@F.L.A.M.E.R
Nope. You don't have to..

just replace them with oldies..
Quote from: asudhakar on August 07, 2008, 05:54:55 AM
Quote from: Hoochie Coochie Man on August 07, 2008, 04:51:40 AM
You must show me your error with a pic of your IE6 error.



Yes now tested at IE7 after Install - Works good in IE7, Mozilla 2.0, 3.0 and Opera 9.27

Not showing in IE6. Images  of ie6

@asudhakar
copy the dropdown menu codes from your style.css and paste them to your ie6.css. then turn back to me.
İnadına SMF 1.1.X

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 07, 2008, 06:35:03 AM

@asudhakar
copy the dropdown menu codes from your style.css and paste them to your ie6.css. then turn back to me.

Hi i have copied this code from Style.css and replaced with the existing code as follows.


/*
* Drop Down Menu Feature of DilberMC Theme
*/

div#menu {
   left: 40px;
   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: #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;
   font-size: 100%;
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 0px 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;
   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: 30px;
   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;;
   float: none;
   display: block;
   line-height: 25px
}


Refreshed Many times in IE6, but still i could not see the drop down HCM.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

Hımm, I have no idea  :-\
Did you try my demo site on first post?
Could you try it for me?
İnadına SMF 1.1.X

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 07, 2008, 08:21:22 AM
Hımm, I have no idea  :-\
Did you try my demo site on first post?
Could you try it for me?

Yes you are right HCM, http://smfthemes.890m.com/forum/index.php?theme=26 is not showing drop buttons on Ie 6. But works well on Mozilla.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Adish - (F.L.A.M.E.R)

#56
Ok this is what i did, I replaced the index.template.php text but it gave me template parse error.

I did all other edits. I am confused with the style.css edit. the 1st code which is in normal style.css, i added that code at the base in default theme. Then for the Dark Night Theme, what is the style.css edit ? or i have done something wrong ?

Please help me out.

Thank you.

EDIT:-
I by mistakely removed } , Now i dont get template parse error.. Now it shows differently... navigation bar is messed up.

Hoochie Coochie Man

Quote from: asudhakar on August 07, 2008, 08:30:08 AM
Yes you are right HCM, http://smfthemes.890m.com/forum/index.php?theme=26 is not showing drop buttons on Ie 6. But works well on Mozilla.
@asudhakar
Well then sorry about that.
Try to say your users that using IE7




@F.L.A.M.E.R

index.template.php
Find:
// Show the [home] button.
echo '
<td class="meny_nav"><a href="', $scripturl, '">' , $txt[103] , '</a></td>';

// Show the [help] button.
echo '
<td class="meny_nav"><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></td>';

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

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

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

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

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

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


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


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


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



Replace:
         echo '
            <td>
            <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>';


style.css
add to the end:
/*
* Drop Down Menu Feature of DilberMC Theme
*/


div#menu {
   position: absolute;
   top: 145px;
   left: 40px;
   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: #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;
   font-size: 100%;
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 7px 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;
   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%;
   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; 
}


İnadına SMF 1.1.X

Adish - (F.L.A.M.E.R)

#58
it quite worked well but the text is misplaced and isnt exactly on the navigation bar.

Please have a look at the image:-



this is how it was before:-

Hoochie Coochie Man

style.css
/*
* Drop Down Menu Feature of DilberMC Theme
*/


div#menu {
   position: absolute;
   top: 145px;
   left: 40px;
   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
}


See top: 145px;
increase it
İnadına SMF 1.1.X

Advertisement: