Trying to make this work with tpl themes

AaronWebstey

I think I've almost got it working with a tpl-based theme, but I can't seem to make the calls to AddLink() generate <ul> tags. Looking at @vrijvlinder‌ 's demo site, it seems like the first call to AddLink() with the group name 'Categories' causes a <ul> tag to show up (missing this <ul> is what's breaking the CSS right now). Looking at the code in applications/dashboard/modules/class.menumodule.php, it does look like a <ul> should be added at the start of a new group.

Anyone know what I'm missing here, or even understand what I'm rambling about?

vrijvlinder

If you compare the master from BetterBitter and your's you will see.

I have created a ul under Menu for the drop down to also affect the menu items as well as the categories using the same script.

 $this->Menu->AddLink('Menu', T('Menu'),'#');//this is the trigger for the drop down
                         $this->Menu->AddLink('Menu', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
                         $this->Menu->AddLink('Menu', T('Edit Profile'),'/profile/edit',array('Garden.SignIn.Allow'),array('title'=>'Edit Your profile'));
                         $this->Menu->AddLink('Menu', T('Home'),'/');
                         $this->Menu->AddLink('Menu', T('Activity'), '/activity',array('Garden.SignIn.Allow'));
                         $this->Menu->AddLink('Menu',T('New Discussion'), 'post/discussion',array('Garden.SignIn.Allow'));
                         $this->Menu->AddLink('Menu', T('New Message'), '/messages/add/{Username}',array('Garden.SignIn.Allow'), array('class' => 'Messagelink'));
                         $this->Menu->AddLink('Menu', T('Games'), 'games',array('Garden.SignIn.Allow'));
                         $this->Menu->AddLink('Menu', T('Gallery'),'gallery',array('Garden.SignIn.Allow'));
                         $this->Menu->AddLink('Menu', T('Bonk'), 'plugin/Bonk',array('Garden.Settings.manage'));
                         $this->Menu->AddLink('Menu',T('Contact'), 'contact');
                         $this->Menu->AddLink('Menu',T('VChat'), 'vchat',array('Garden.SignIn.Allow'));
                         $this->Menu->AddLink('Menu', T('Mobile View'), 'profile/mobile');
                         $this->Menu->AddLink('Menu',T('Privacy'), 'privacy');

The tpl uses smarty tags to call php

a php based master(BetterBitter), only uses php and thus it easier to edit or add php code within.

This plugin relies on jquery to do the drop down. The css is not much to do with how it works. It only decorates .

this is the script that does the work for the drop down in this plugin

<script type="text/javascript">
var ddmenuitem = 0;
var menustyles = { "visibility":"visible", "display":"block", "z-index":"9"}

function Menu_close()
{  if(ddmenuitem) { ddmenuitem.css("visibility", "hidden"); } }

function Menu_open()
{  Menu_close();
   ddmenuitem = $(this).find("ul").css(menustyles);
}

jQuery(document).ready(function()
{  $("ul#Menu > li").bind("mouseover", Menu_open);
   $("ul#Menu > li").bind("mouseout", Menu_close);
});

document.onclick = Menu_close;</script>

The css you would add or edit would simply change the display but not affect the function of creating a new ul .

In the menu examples above, Using Menu as the name of the child links makes them automatically become part of a dropdown ul

vrijvlinder

You could convert the master to be php by switching the masters and seeing if then things work as expected. If they do then just use a default.master.php instead of tpl

AaronWebstey

Thanks! Yes, sorry, I should have said that the missing UL was breaking the js, not the CSS. My understanding was that on your site, AddLink was causing a UL to show up within the Categories LI. But on mine, no such UL.

I think you have found what's confusing me: you said you "created a ul under Menu", and from the looks of it, this is what ends up causing the UL to be generated:

$this->Menu->AddLink('Menu', T('Menu'),'#');//this is the trigger for the drop down

But when I call AddLink, no such UL gets created. Does this make sense?

vrijvlinder

No, Naming every link or other links The same name as the first link creates a dropdown ul when you use that script

for example notice the first name of the link is the same name as the first. You can do this with any link in the php menu. If you remove the first one the second will be the trigger. It does not matter what you call the link , Home or Menu or Links what makes them child links is the same name. Adding the links in the php master like this happens to make them dropdown whatever the menu is when you use the script. The categoriesdropdown sends a link to the menu and child links which are or should be in the drop drown .
This does not work in a tpl type theme. It will display all the cats inline because it does not work with jquery. You would somehow have to add the ul to get around that.

    $this->Menu->AddLink('Menu', T('Menu'),'#');//this is the trigger for the drop down
    $this->Menu->AddLink('Menu', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
    $this->Menu->AddLink('Menu', T('Edit Profile'),'/profile/edit',array('Garden.SignIn.Allow'),array('title'=>'Edit Your profile'));

You can easy just change the default.master to be php and save yourself the trouble. Just use the one in BetterBitter as a guide and remove and add or move whatever you want so the layout matches what you have.

AaronWebstey

This exactly answers my question! Knowing that the ULs do not get added in a tpl theme seals it. I just kind of assumed that AddLink behaved similarly whether it was being called from within a PHP template or from the plugin code. Thank you, thank you.

vrijvlinder

The plugin adds a link to the menu which names all categories , Categories so the result is this withe the others in a dropdown under the first link.

$Sender->Menu->AddLink('Categories', T('Categories'),'categories/all');
$Sender->Menu->AddLink('Categories', T('General'),'categories/general');
$Sender->Menu->AddLink('Categories', T('Music'),'categories/music');

AaronWebstey

@vrijvlinder said:
The plugin adds a link to the menu which names all categories , Categories so the result is this withe the others in a dropdown under the first link.

$Sender->Menu->AddLink('Categories', T('Categories'),'categories/all');
$Sender->Menu->AddLink('Categories', T('General'),'categories/general');
$Sender->Menu->AddLink('Categories', T('Music'),'categories/music');

Yep, got that! Looks like the main reason that this plugin does not work with tpl-based themes is that the above code results in different HTML output depending on if you're using a PHP or TPL-based theme.

Basically, if you're using a tpl theme, the above 3 lines of code result in the following HTML being generated in the {custom_menu} section of the template:

<li><a href="categories/all">Categories</li> <li><a href="categories/general">General</li> <li><a href="categories/music">Music</li>

Whereas if you're using a PHP template, the plugin code (or code right in the template using $this->Menu->AddLink) will result in the following being added somewhere in the <ul id="Menu"> section of the template:

<ul> <li><a href="categories/all">Categories</li> <li><a href="categories/general">General</li> <li><a href="categories/music">Music</li> </ul>

The difference seems small, but is important (and seems strange to me that it would be different; seems like the tpl version should work like the PHP template version): if you call $Sender->Menu->AddLink to add a link to the {custom_menu} section of a tpl-based theme, it will not result in separate groups being enclosed by <ul> tags.

If anyone out there can confirm/deny that this is the way it should work ( @vrijvlinder‌ , I'm guessing you use mostly/all PHP-based templates?), it would be pretty cool.

In the meantime, I'm going to take your advice and either convert my current template to PHP, or just give up on the theme I'm working on yet again and go back to trying to customize BetterBitter.

vrijvlinder

I'm guessing you use mostly/all PHP-based templates?)

Yes, when I discovered things did not work as I wanted. I did make a few tpl based themes but it was not working like I wanted as far as compatibility with some things.

I'm going to take your advice and either convert my current template to PHP

Just clone your theme and call it something else and then exchange the master by deleting the tpl and instead using the php master of Better Bitter or any other of my themes. Then just move around the layout if it is much different in the master. I can help you, it is quite easy.

vrijvlinder

add a link to the {custom_menu} section of a tpl-based theme, it will not result in separate groups being enclosed by < ul > tags.

It will be enclosed in the original ul#Menu , it will not add an extra ul yes that is correct.

Css based dropdowns work fine but in this case the extra ul would have to be added to the plugin line to echo it possibly that may work it's a guess. Or it may break something else.

I would just convert the master and avoid headaches...

You could also try to add the ul tags into the tpl inside the menu ul

<ul>{custom_menu}</ul>

AaronWebstey

Thanks! I'll let you know how it goes. Probably going with the PHP route.

peregrine

@vrijvlinder said:
<ul>{custom_menu}</ul>

have you looked at the tags classes and ids in a tpl theme

also how does one pick this up

Img('/themes/VrijVlinder/design/images/cat.png'

since none of the css classes and ids in the plugin relate to anything in a tpl theme, how could you make it work?

rhetorical question. without changing names of classes and id's in the plugin.

vrijvlinder

@peregrine said:
also how does one pick this up

Img('/themes/VrijVlinder/design/images/cat.png'

Yea it is for my forum replaces the text where did you see that ?

since none of the css classes and ids in the plugin relate to anything in a tpl theme, how could you make it work?

it should not. all it does is add a link to the categories and then displays them in a drop down. as long as the script works. In theory it should work by adding that script in between {literal} but that does not work either.

peregrine

Yea it is for my forum replaces the text where did you see that ?

in your plugin php file.

vrijvlinder

It must have escaped and got on there when I edited some things...hate cats they have a mind of their own... thanks !

peregrine

it should not. all it does is add a link to the categories and then displays them in a drop down.

I think you need to revisit with a tpl theme and you will grok what I am talking about. as far as classes and ids and your css or just leave it as since

. I see you have it in your description - that it will not work in a tpl theme..

vrijvlinder

Yes others have tried in the past and I am not sure it is such a need to have the cats in the menu but I like it .

The css in this plugin is minimal unless I add all the styles I made for it within my themes. I suppose I could add more css but the function is there as long as it is not a tpl .

As per the description. This is not to say that dropdowns don't work in a tpl, just this kind which uses jquery to make it work. Other jquery has the same problem.

Could it work? it has been tried but unless something adds the extra ul in the markup the categories don't display block in a drop down.

One of my first themes is the DarkEmbed Friendly and it is a tpl . Tried to make this plugin work but it did not either nor the mobile that is tpl.

peregrine

I'll just repeat one more time - you decide where you want to go with it.
we go around and around on css. so I'll just leave this here....

I won't digress or follow digressions. point is....

the css in your plugin refers to #Menu - now please go to the bittersweet theme and then view page source and tell me where you see Menu id. css will have no impact on #Menu nor will the js, since there is no #Menu in the default or bittersweet or any core tpl theme.

simple question.

also if you are going to update plugin. move the css file into the design folder and move the images folder into design folder.

vrijvlinder

I know what you mean and Yes I tried that too. Changing the classes around or adding id tried several things and was not successful. I tried doing it to the tpl as well as to the plugin.

Yes I will update the plugin and fix those things but it will still not work on a tpl...

vrijvlinder

@‌AaronWebstey I took the liberty of making the exact same Bitter Sweet but in php for you so now it works with CategoriesDropdown and anything else

Let me know how it works out for you. I did not edit a huge amount of stuff just fixed it a little but it should be the same as you have but with a default.master.php

vrijvlinder

@AaronWebstey said:
Thanks! I'll let you know how it goes. Probably going with the PHP route.

Let me know how the above theme works out for you.