[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

Angelotus

Let's not get offtopic here.
@asudhakar: Hoochie has made the time not only for you but also for others to make a compatible dropdown menu for this theme in his free spare time. Don't critisize him for that, just thank him, although you where waiting in an other topic for a reply.

Sudhakar Arjunan

Quote from: Hoochie Coochie Man on August 06, 2008, 02:42:16 AM
Why are you waiting for updates. I've already told you in this topic when I finished it.

I was waiting for the updated topic . Sorry Hoochie Coochie Man.

Quote from: Hoochie Coochie Man on August 06, 2008, 02:42:16 AM
Thank you very much for those beautiful comment.!!!

Nothing to hurt you Hoochie coochie Man. Its just a feel i had seeing this post.

Quote from: Hoochie Coochie Man on August 06, 2008, 02:42:16 AM
May be you should watch me carefully.

Will do it from now.

Quote from: Hoochie Coochie Man on August 06, 2008, 02:42:16 AM
Have a nice day.

Now am modifying my fourm with the codes you have written for all DilberMc fan's.
Thanks for the work in your time Hoochie coochie Man.

And if am not wrong again , would like to pay you some dollars for your valuable time. Let me know your details through pm. Will do the transfer immediately.
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 06, 2008, 03:00:17 AM
And if am not wrong again , would like to pay you some dollars for your valuable time. Let me know your details through pm. Will do the transfer immediately.

I appreciate that. But no, thanks. :)
It's not necessary. it's my pleasure.
Have a nice day.
İnadına SMF 1.1.X

Sudhakar Arjunan

Hi Hoochie Coochie Man,

Currently am modifying my menu as per your instructions.

Have uploaded those images on exisiting folder. ex: themes/dilbermc/images/foldercolourname/file droped here.

And even added the ie issues and uploded in the dilber mc theme root directory.

Still i go this error. could you fix it for me Hoochie coochie man.

Output Image : See the Output here
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

İnadına SMF 1.1.X

Sudhakar Arjunan

Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

İnadına SMF 1.1.X

Antechinus

Thank you HCM. I've just set this up on my XAMPP running 1.1.5 with TP 0.983 (the reason being that we run this combination so that was the Dilber version I had).

It works beautifully, but of course with TP I had to add the forum button as well, along with its context setting. If anyone else wants to do this it only requires a slight alteration to the first lines of the menu code in index.template.php

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>';
 
  if($settings['TPortal_front_type']!='boardindex')
  echo'
  <li class="level1"><a href="', $scripturl, '?action=forum" class="level1"><span><span class="title">' , $txt['tp-forum'] , '</span></span></a></li>


I had to rearrange the upshrinks as the menu interfered with them, so I used the following arrangement and also changed the menu positioning slightly in style.css.

// Dummy place holder, to end things
echo'
<td align="center" class="menubg" width="20">
</td>

             <div style="width: 40px; height: 20px; float:left; padding-left: 27px; margin-top: 10px;"> ';
     if($context['TPortal']['leftbar'])
             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: 2px 0;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" " />
             </div>
     <div style="width: 40px; height: 20px; float:right; margin-top: 10px;"> ';
if($context['TPortal']['rightbar'])
             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: 2px 0;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" " />
     </div>';
// TinyPortal end
echo '



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



For the custom language strings I used a ThemeStrings.english.php file to contain them and called it with code in index.template.php as described here.

One thing I have noticed is that the current action doesn't highlight the relevant button in the menu bar. How would I arrange for this to happen?

Crip

I have become comfortably numb!


I remember my mother's prayers and they have always followed me.
   - Abraham Lincoln -



TOTM Winner. | Demo Site1on1 Theme Support

Hoochie Coochie Man

#29
Quote from: Crip on August 06, 2008, 06:14:25 AM
Your cool HCM 8)

Thanks @Crip

@antechinus, Dilber MC using class="menubg" in table tags but we are not using table. However we can't use class="menubg" in our menu too, because we are using so many classes. I mean, you can't use two or more classes in one tag. So you must use how the way it is. or you will remove your dropdown feature. Choose is yours.
İnadına SMF 1.1.X

Antechinus


Sudhakar Arjunan

Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Crip

Pretty easy really ---

CSS:

* DropDownMenu */

div#menu {
left: 39px;
z-index: 11;
height: 32px;
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;
font-size: 110%;

}

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;
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;
float: none; 
display: block;
line-height: 25px
}
I have become comfortably numb!


I remember my mother's prayers and they have always followed me.
   - Abraham Lincoln -



TOTM Winner. | Demo Site1on1 Theme Support

Antechinus


Hoochie Coochie Man

@asudhakar, increase this a little..

top: 145px;

İnadına SMF 1.1.X

Sudhakar Arjunan

#35
Hi Hoochie Coochie Man ,

Its working , check this error while as a Guest.

Check this Guest Output Image

Quote from: Hoochie Coochie Man on August 06, 2008, 06:42:53 AM
@asudhakar, increase this a little..

top: 145px;


Not Sure where to edit this Hoochie Coochie Man.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Hoochie Coochie Man

İnadına SMF 1.1.X

Sudhakar Arjunan

#37
Will do it,

And Hoochie Coochie Man ,

Its working , check this error while as a Guest.

Check this Guest Output Image

in a small screen the menu goes to the next line.
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 understand you. and I told you that how you gonna fix it.!
Then you asking me same error again and again :D

here...

/*
* 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

Sudhakar Arjunan

#39
Quote from: Hoochie Coochie Man on August 06, 2008, 08:32:47 AM

see

top: 145px;

increase it

Have increase it to 175 , Now its good for guest in Mozilla.
When User Logs in the forum , the user menu goes down.

---------------------------------------------------------------

Hi i have saw the demo link in internet explorer 6.

Its shows with error. Say its shows vertically.

I have updated my site and working good in firefox but not in internet exlorer even with the fix you have attached.

So i have checked the demo page in ie even refreshed.

Help me to fix it.

You can see it live on Forum Homepage using an IE Browser

-------------------------------------------

Updating thread :

Hi i got one question here.

The Forum Name is not displayed instead it shows a forum.

Inside Board : The top link will be like IT Acumens -> Board Name -> post name.

But it shows as Forum -> .....

Check this image and leave a comment on this bug.
Working on New Mods & Themes for SMF... Will update soon... My Blog page
My Smf forum : Discuss ITAcumens :: My SMF Forum

Advertisement: