18 replies to this topic

[Jeroen]

Well, many people have asked me for it and here it is. The complete source and instructions on the template and the menu.

I hope you like it. And I'd like some feed back for improvement (because it's the template of my own website). Please give me some feedback on the instructions, I hope they're crystal clear.

See it here
Get it here

[Hans]

Jeroen, on Jul 31 2005, 12:02 AM, said:

Well, many people have asked me for it and here it is. The complete source and instructions on the template and the menu.

I hope you like it. And I'd like some feed back for improvement (because it's the template of my own website). Please give me some feedback on the instructions, I hope they're crystal clear.

See it here
Get it here

Thanks Jeroen, gonna try it ASAP

[-=nX=-]

Hi

Lets say I want my menus to be calles Menu1, Menu2 and Menu 3.

I know that I have to edit

var menus=String("Navigation Beheer Projects Etomite").split(' '); // add the menu titles here.

But in what way?

[Jeroen]

-=nX=-, on Oct 19 2005, 10:41 AM, said:

var menus=String("Navigation Beheer Projects Etomite").split(' '); // add the menu titles here.

But in what way?

Like this:

var menus=String("Menu1 Menu2 Menu3 Menu4").split(' '); // add the menu titles here.

remember that this also has to be the name of your menus in your snippet call. You can edit the snippet to display the names or not, but the menus will be individualy identified by these names.

[palf91]

Very nice! Good job

[Theo]

Jeroen

I like your template, but I would like to modify it for my own use.

I've installed the templates following your very detailed instructions - thanks for those too.

Now by going through the style sheets I've changed the colours that I think are the parts I want to change and most of it works ok, but I'm still having one or two problems, mostly because of my limited skill with CSS/HTML.

So I edited the template to read

<div id="left"><br />
      [[PullDownMenu?id=29&title=About us&auth=0]]<br />
      [[PullDownMenu?id=18&title=Repairs&auth=0]]<br />
      [[PullDownMenu?id=13&title=Box Shop&auth=0]]<br />
      [[PullDownMenu?id=2&title=Links&auth=0]]
    </div>

where it calls the pullDownMenu snippet

and I edited the file menu.imc.js wher the folder names are given to

function initAll() {
 var menus=String("About us,Repairs,Box Shop,Links").split(','); // add the menu titles here.

I have spaces in some names so I guessed that .split(' ') was defining a delimeter and changed that to a comma.

Can you tell me if that was ok please?

My version of the template is ok in FF and camino, but in IE5 mac the menu items disappear after the pointer is passed over them. Refresh the page and they are back. Can you give me any pointer to where I have gone wrong?

The page is here: My Webpage

I have a couple of other questions, but I think this is enought for now!

[Jeroen]

Hy Theo,

I'm glad you liked the template. I always hate instructions that take short-cuts here and there. The time spend figuring out those is already way more then the 'extra' I'll read my whole life.

If you've trouble with CSS and stuff in general you should post those questions in the general chatter forum. If you think I did something silly or unusual, feel free to post in this thread.

I'm not a javascript expert, but I see no problem with your sollution. I also noted that you had to change something to get spaces in you titles. I was just to lazy to make another test for that.

The link you gave only shows the (near) default template. So I can't see what you've done. I don't have a Mac nor do I've a computer with IE5, so I can't test that. It's a bit late now, so I'm not going to search for the original site where I found the base code. I think it was www.alistapart.com and if so, it should have worked on every silly system imaginable. But again, I'm not sure about that. I do know that I don't realy care about Mac/IE5 users, so I might have taken a short cut somewhere. I need to reverser engineer the whole thing if I want to find that out...

Please post the link to template so others can help out too. There are lots of people who have a Mac/IE5 configuration, sometimes only for testing :betterwink:

[-=nX=-]

Wow, I love that template!

But is there a way to use the pulldown menu on a site with the standard etomite-skin? (i dont want to use orange an all my etomite-sites)

bye
nX

[Jeroen]

Yes. On my site I was going to add an install just for the menu. Unfortunatly, if you want to use all it's features installing insn't that trivial. The instructions you find on my site under snippets are not compleet. It referres to the installation of the template, which has a nice step by step manual. If you follow that one, you'll understand it. All you have to do next is to implement the snippets calls in your template and add the links to the CSS and java-script files.

Just add the orange template and you'll understand.

[-=nX=-]

Hi

I tried to do as you told me an got this:






Than i added this

Quote

<link href="assets/site/orange/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/site/orange/tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assets/site/orange/menu.inc.js"></script>

to the original template and got this:




What to do?

bye
nX

[Jeroen]

Maybe I used some double css class names... Can you give me an URL, so I can have a look for myself?

[-=nX=-]

Yeah sure:
http://test.luenelinks.de

And thanks for your help and patience

[Jeroen]

Hy,

I took a quick look at your site and the code.
First...
I was right about my rather silly mistake. The classnames used in the menu code are the same as in the original template and original menu. Meaning that if you include both ones, things wil get overridden.

Secondly....
You've included the wrong CSS file. The Orange template has three stylesheets and one javascript file. You only need one stylesheet (menu.css) and the javascript. You've included the wrong stylesheet (tabs.css should be menu.css)

Well there is one thing you can try (something that might work) and one or two things you can do (that will work)

1) try to add the correct stylesheet (menu.css) after the styling for the template. Hopefully that will override the settings in style.css. I've got no idea if this will do anything, but if I made the parser, I would make it so that the last or most specific declaration is the one that is active... Give it a shot, it might just work in a few seconds. If you go and play with the colours, you can go on to the better sollution:

2) OK, open the file menu.css in a text editor and change this:

.navigationHead {
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	background: #FF9000;
	color: #000000;
	width: 150px;
	margin: 0px auto 3px auto;
	}

.navigationHead span {
	padding: 1px 0px 1px 4px;
	}

to this:

.navigation2Head {
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	background: #FF9000;
	color: #000000;
	width: 150px;
	margin: 0px auto 3px auto;
	}

.navigation2Head span {
	padding: 1px 0px 1px 4px;
	}

Now, login to your etomite manager and go and edit the pulldownmenu snippet. Make the same changes, that is, find every 'navigationHead' and change it to 'navigation2Head'.

Things should be working by now. If it doesn't, go and open the source for the template in the etomite manager.
and look for this:

<tr class="fancyRow2">
            <td align="left" valign="top" class="navigationHead">Navigation</td>
          </tr>
          <tr style="padding: 0px; margin: 0px;">
            <td align="left" valign="top" class="navigation" style="padding: 0px; margin: 0px;"><img src="manager/media/images/_tx_.gif" alt="" height="4" />

and change it to:

<tr>
<td align="left"valign="top" style="padding: 0px; margin 0px;">

If this still doesn't work, then make sure the page validates, so that you can validate the CSS. That makes debugging a lott easier. (for you, me and others that might want to help)

3) If you realy have no clue about all the above. You're last option is to wait for someone else (or me) to do it for you. I'm quite busy lately, so that will take a week or something before I can find the time to edit and test and chages the files for this. So I suggest you give it a shot

Hope that helpes, I'm off again...

Edited by Jeroen, 07 February 2006 - 07:31 PM.

[-=nX=-]

Thx so far.

Quote

find every 'navigationHead' and change it to 'navigation2Head'.

There is just on in the snippet.



And now I have messed up my template
I guess I will have to wait.

Edited by -=nX=-, 07 February 2006 - 07:59 PM.

[Jeroen]

Well, the menu seems to be working... Except for how it looks....

I don't see where you've messed up the template... Have your tried to change the table code in the template? (see previous post)

Arghh I just found a typ-o in the code in my previous post. Notice the missing ":" after margin. This is what it should be:


Things should be working by now. If it doesn't, go and open the source for the template in the etomite manager.
and look for this:

<tr class="fancyRow2">
           <td align="left" valign="top" class="navigationHead">Navigation</td>
         </tr>
         <tr style="padding: 0px; margin: 0px;">
           <td align="left" valign="top" class="navigation" style="padding: 0px; margin: 0px;"><img src="manager/media/images/_tx_.gif" alt="" height="4" />

and change it to:

<tr>
<td align="left"valign="top" style="padding: 0px; margin: 0px;">

[-=nX=-]

I changed the code but the result is not what i expected.

[Jeroen]

Well. It works flawlessly. You should thank me for that one

I guess you want it to look like the original template menu and behave like the menu in the orange template?

If you would like that, I've got good news: that is possible. All the elements you need for the looks are all there. The problem is that you need some understanding of CSS and a bit of free time to get things right.

Wow, allthough I'm very drunk while I'm typing this, It just got to me that I've allready made something like it.

golf thing

I just changed a few border colors and modified the original images. Changing it back is something that shouldn't be hard to do.

let me know if that makes you happy.

[-=nX=-]

Ok, thank you.

I will have a look at CSS asap.

[Jeroen]

I noticed that you've just changed some colours.

Due to various other requests I started work on a PullDownMenu version for the AlexisMaster template. It's a quick and dirty version, but it should work in every browser (in MSIE I've got a problem with the menu hovering UNDER the footer.) but that's about it. And how often does that happen in normal aplication?

I'm working towards some sort of skinability for this snippet. You should just changed the menu.css file in the future. But I still need to update to the new RTM and then check everything (all promises and update and packages avaialbe (or that should be...) on my site. So it's quite a mess now, all my files and stuff. I apologize for that.

But hey, have fun with this (it's the lowest menu...)
http://xeon.ele.tue.nl/~s010392/etomite/89.html
or, if the domain starts working again...
http://bosch.ondergrond.net/89.html