TinyPortal

Hi,

After getting so much kind support from all of you, I couldn't resist giving something back to the community. :)
This idea originally came from me (yes..), when I visited RebelRose's Tae Kwon Do site, which was running this "MK Portal", another portal system, similar to Tiny Portal. However, I was really amazed by it's menu... ;D

I know I am not an expert in coding but with the help of IchBin for the starter template, I was able to modify and modify it...until I was able to create a really good menu...(I was surprised myself.)

To be honest, I was really bored with the bullet point style menu...they are image files anyway...so the new menu with excellent icons should not take too much loading time.

Amazing how much my HTML knowledge improved...:) Of course, if you wish to re-modify it, then that is absolutely fine, no worries. ;)

I do hope you guys like it, here is my first attempt at coding something...(3 hours of work!);):

Simple & Professional Menu with Icons.- V.1.1 by YJ (Fixed Calendar height issue.)

DEMO: www.gadgetkorea.com

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fimg155.imageshack.us%2Fimg155%2F4283%2Ffds7hy.jpg&hash=750803221a11630f156f4367c3686cdb6ac11fdb)

[Install Instruction]

Simply copy & paste the following code into a HTML block but remember to change "www.gadgetkorea.com" to your domain and delete some links if necessary:

<div class="smalltext"><font  size="1"><b>Navigation</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/home.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php">Home</a></font><br> <img src="Themes/TP_DilberMC/images/menu/forum.gif" /> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=forum">Forum</a></font></b><br><img src="Themes/TP_DilberMC/images/menu/archive.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/archive.php">Archive</a></font><br><img src="Themes/TP_DilberMC/images/menu/links.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/dir/">Link Directory</a></font><br><img src="Themes/TP_DilberMC/images/menu/rss.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=.xml">Syndication</a></font><br><br><font size="1"><b>Services</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/shop.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=shop">Shop</a></font><br><img src="Themes/TP_DilberMC/images/menu/calendar.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=calendar">Calendar</a></font><br><img src="Themes/TP_DilberMC/images/menu/members.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=mlist">Member List</a></font><br><img src="Themes/TP_DilberMC/images/menu/member_map.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=mm">Member Map</a></font><br><img src="Themes/TP_DilberMC/images/menu/online.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=who">Who's Online?</a></font><br><img src="Themes/TP_DilberMC/images/menu/stats.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=stats">Statistics</a></font><br><br><font size="1"><b>Help & Support</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/search.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=search">Search</a></font><br><img src="Themes/TP_DilberMC/images/menu/faq.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=help">Help Center</a></font><br><img src="Themes/TP_DilberMC/images/menu/staff.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=staff">Site Staff</a></font><br><img src="Themes/TP_DilberMC/images/menu/contact_us.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?page=4">Contact Us</a></font></div>

After that, please upload the attached images under:

/your_folder/Themes/your_theme/images/menu

Now, important thing is that you will need to edit the image directory at the code above, because mine is currently directing to "TP_DilberMC". So, if you have that folder, no problem but if you don't, please change it. Also, it doesn't matter where you put them...anywhere is good enough, just make sure you edit the direction in my code.

That's it, I think. I have made the titles smaller as it looks too similar with the block title...also, the line tag was a nice addition. ;)

More effects, better icons...etc. ? Please share it with us here! Suggestions & Feedbacks welcomed!

Very nice, hope I can get it to work, well done!!!

Wow, that's nice.  Thanks for sharing.   :up:

Your menu is very nice and professional looking.  It musta taken you quite some time to get those icons perfect :)  I could certainly see myself using it on one of my commercial sites.

For my own favorite TP site I enjoy using XARA Webstyle to make javascript powered (roll-over menus) and then calling the menu into a java block.  Its pretty easy.

DEMO: http://black-chapter.com/forums

This of course works if you have dreamweaver or Xara to help make roll-over buttons.  I prefer this menu system only because I can create submenus which slide out, thus saving me vertical space, and keeping the block smaller.

How can I implement your own menu system if I wanted to?

@ÂÃ,§tigmartyr, wow, that's exactly what I wanted...:)

One thing is that I don't know how to use dreamwaver or Xara to make these buttons...I would need some help from you. Of course you can implement it with your menu system...;)

Xara webstyle is super easy to use.  If you have bittorrent or use Opera browser (www.opera.com) you can probably find a torrent out there of Xara webstyle.  Due to copy right infringement I can say no more :P  But I would highly suggest that you get urself a copy.

Once you have that, you can just open it up, and its GUI interface is very simple.  You select MENUS and off you go!  You can choose from among dozens of styles and templates, and even modify each one's colors to fit ur own theme.

Configuring the menus is super easy, just cut and paste the URLs you want and pick the 'target' (i.e. _self, _blank, _parent, etc).  Once you are done, you SAVE ur project and then copy all the files to your forums (any folder you like).  Xara outputs the javascript image files for you.  You dont have to be a coder :P

You then create a java/html (script) box and paste in the code to call the menu up. 

Example for mine:

<script src="xaramenu.js"></script><script Webstyle4 src="tube_menu.js"></script>

whereas all my files reside in the root of my /forums

Is it really that simple??

Hmm...I should get that software but is that legal to get it for free...(?)

Quote from: YJ on July 10, 2006, 09:28:33 PM
Is it really that simple??

Hmm...I should get that software but is that legal to get it for free...(?)

The answer to that would depend greatly on the piracy laws of your host nation  :coolsmiley:

XARA is wonderful for doing graphics / banners / buttons etc.  Dreamweaver can also make simple roll-overs and at least assist in coding the HTML to put into your different HTML and script blocks.

To make the menus I use, you will need XARA.

I also use Fireworks to make pop-up menus to turn one whole jpeg or gif into a menu:

Example: http://black-chapter.com/forums/index.php?page=19

Fireworks comes with Macromedia Studio 8.  Im not advising you to get the free versions or not :P  Im just saying that you can probably find them for free on a p2p network.  TO purchase a copy, you should be prepared to spend close to $1000.00US for both proggys.

Oh my days...I think I will just leave it...if it's so simple, maybe you can do that for me.. ;)

There you go ;)  I can do that for you too ...  oh wait.  I just got coopted!  oH gNoez!


What did ya have in mind?  Ive got pennance to pay here methinks.  Ill hook you up.

Just gimme ur Categories Sub Categories, URLs and targets for each URL (i.e. self, mainFrame, blank, etc...)

Id need to know your design concept for the menu too...

Hmm...actually, I do not need it for myself, (I am pretty happy with the current menu), I just want a general menu for the Tiny Portal community. ;)

Quote from: YJ on July 10, 2006, 10:43:23 PM
Hmm...actually, I do not need it for myself, (I am pretty happy with the current menu), I just want a general menu for the Tiny Portal community. ;)

What do you mean?  Like u want a single menu with links to the TP Community?  And what graphic did you want to use :) 


Strike now while the Iron is Hot

I don't know to be honest but...you could:

• Use the design theme of Dilber MC by HarzeM. (the hottest theme at SMF.)
• Create three categories: Navigation, Services and Help & Support.

That's all I can think of...have a go at it. ;)

Can u link me to this Dilber MC by HarzeM theme?

Here it is:

http://themes.simplemachines.org/index.php?lemma=80

Nice one YJ :up: I like it.

Ive changed it to php for more control and less editing.

The menu folder with the icons would need to be copied to /images for each theme though.

The links can be
$scripturl = www.myforum.xco/index.php
$boardurl = www.myforum.xco

Using php allows you to control who can see which link. see example for calendar below (same as you get with top tabs)

in a php block
global  $scripturl,$settings,$boardurl,$context;
echo'
<div class="smalltext">
<font  size="1"><b>Navigation</b></font><br><hr>
<img src="',$settings['images_url'],'/menu/home.gif"/><font size="2"><a href="',$scripturl,'"> Home</a></font><br>
<img src="',$settings['images_url'],'/menu/forum.gif" /><font size="2"><a href="',$scripturl,'?action=forum"> Forum</a></font></b><br>
<img src="',$settings['images_url'],'/menu/arcade.gif" height="16" width="16"/><font size="2"><a href="',$scripturl,'?action=arcade"> Arcade</a></font><br>
<img src="',$settings['images_url'],'/menu/archive.gif" height="16" width="16"/><font size="2"><a href="',$scripturl,'?action=tpmod;dl=0"> Downloads</a></font><br>
<img src="',$settings['images_url'],'/menu/rss.gif"/><font size="2"><a href="',$scripturl,'?page=2"> Gallery</a></font><br><br>
<font size="1"><b>Services</b></font><br><hr>';
if ($context['allow_calendar'])
{
echo'<img src="',$settings['images_url'],'/menu/calendar.gif"/><font size="2"><a href="',$scripturl,'?action=calendar"> Calendar</a></font><br>';
}
echo'<img src="',$settings['images_url'],'/menu/members.gif"/><font size="2"><a href="',$scripturl,'?action=mlist"> Member List</a></font><br>
<img src="',$settings['images_url'],'/menu/online.gif"/><font size="2"><a href="',$scripturl,'?action=who"> Who\'s Online?</a></font><br>
<img src="',$settings['images_url'],'/menu/stats.gif"/><font size="2"><a href="',$scripturl,'?action=stats"> Statistics</a></font><br><br>
<font size="1"><b>Help & Support</b></font><br><hr>
<img src="',$settings['images_url'],'/menu/search.gif"/><font size="2"><a href="',$scripturl,'?action=search"> Search</a></font><br>
<img src="',$settings['images_url'],'/menu/faq.gif"/><font size="2"><a href="',$scripturl,'?action=help"> Help Center</a></font><br>
</div>';

This is great :)
Thank you eeek for the php version :)

Wow, nice! ;D

I have created a CSS mouseover menu. If you guys would like it I will put it in this thread too. You can see it on the leftbar on my test site. www.tmrules.com/beta/

Very handy stuff here.  I like member group controls.  It makes things so easy.

Ill have that Xara Menu prepared for you today.  Dimensions will be 150pixels wide

Wow, can you post that here please IchBin? looks very nice...:)

Thats kind of like the .css {#display-block;} yes..?

 :)
Nice job YJ and eeek. I really like this menu style with the icons, and the mousover is a nice touch Ich....

Definitely usable!

Yes thats pretty much how it works Crip. I've seen it all over the internet so I decided to do my own. :)

All the code is in the html file attached here. You can change the colors, spacing, border and font etc in the style tags of the HTML file.

For those who don't know you can just include this file in a phpbox like this to make it work:
include('menu.html');

RENAME FILE TO menu.html after you save it.

Now if only we/I could figure out how to implement both   YJ's & IchBinâââ,¬Å¾Ã,¢ feature (They both look sweet!) into this.

(F1) side slide menu (http://www.tinyportal.net/smf/index.php?topic=6403.0)

Hmm...IchBin, does this include that nice CSS flashing as well?

The mouseover affect? Yes it does.

Nice! I will try it out now...

I just remembered that I cant make a menu with no links...  Did you want  me to make a menu with all the links you have in your menu now?  Or did you want a portal?  Id rather make something you intend to use ;)  Since its not going to be easy to mod after the fact.

But Ich might have u covered, so lemme know...

Hmm...if that's the case, then I think you should use the blue theme of DilberMC...(the one Iuse).

The links?

Please use the links inside this code, I have updated it a little.

<div class="smalltext"><font  size="1"><b>Navigation</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/home.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php">Home</a></font><br> <img src="Themes/TP_DilberMC/images/menu/forum.gif" /> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=forum">Forum</a></font></b><br><img src="Themes/TP_DilberMC/images/menu/news.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?board=82.0">News</a></font><br><img src="Themes/TP_DilberMC/images/menu/archive.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/archive.php">Archive</a></font><br><img src="Themes/TP_DilberMC/images/menu/links.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/dir/">Link Directory</a></font><br><img src="Themes/TP_DilberMC/images/menu/rss.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=.xml">Syndication</a></font><br><br><font size="1"><b>Services</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/shop.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=shop">Shop</a></font><br><img src="Themes/TP_DilberMC/images/menu/calendar.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=calendar">Calendar</a></font><br><img src="Themes/TP_DilberMC/images/menu/chat.gif"/> <font size="2"><a href="javascript:poptastic('chat/php121im.php');">Live Chat</a></font><br><img src="Themes/TP_DilberMC/images/menu/members.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=mlist">Member List</a></font><br><img src="Themes/TP_DilberMC/images/menu/member_map.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=mm">Member Map</a></font><br><img src="Themes/TP_DilberMC/images/menu/online.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=who">Who's Online?</a></font><br><img src="Themes/TP_DilberMC/images/menu/stats.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=stats">Statistics</a></font><br><img src="Themes/TP_DilberMC/images/menu/vip.gif" /> <font size="2"><b><a href="http://www.gadgetkorea.com/index.php?topic=865.0">VIP Account</a></b></font></b><br><br><font size="1"><b>Help & Support</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/search.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=search">Search</a></font><br><img src="Themes/TP_DilberMC/images/menu/faq.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=help">Help Center</a></font><br><img src="Themes/TP_DilberMC/images/menu/staff.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=staff">Site Staff</a></font><br><img src="Themes/TP_DilberMC/images/menu/contact_us.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?page=4">Contact Us</a></font></div>

It currently looks like this:

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fimg284.imageshack.us%2Fimg284%2F4137%2Ffds7vl.jpg&hash=77582d01f79537a8a20ea84045a80c367465709b)


Two questions:

Can I actually modify them afterwards?? Also, are you going to use the same icons as I used?

Use the Dilber theme? Im not sure I understand what you're saying...

You can customize this menu to fit in any theme you want by changing the colors in the <style> part of the menu.html.

As for the icons, you can add whatever icons you want. I just put them in there to show everyone that they can have icons too.

javascript/css, menu...

Vert. or Horz... i like this one..
http://www.dynamicdrive.com/dynamicindex1/hover.htm

YJ,
Thank you!
I borrowed your icon set for my (F1) slide panel
My demo (http://www.my-yardsale.com/index.php)

I did something similair with a mouse over menu. It also showed pm alets and tool options when logged in. It also showed admin tool links if permission avialiable, otherwise it is hidden.

CSS is actually quite complicated for me...can somebody convert my html menu for me?

YJ, what would you like to do in the conversion? I'm not sure I understand what you're asking.

Basically the same menu, just with those nice flashing and background colors, which are similar to the DilberMC theme.

Without Xara its very difficult to edit the java script.  At least, I am unable to add NEW links on my own.  I can edit exising links, in the .js but can't write in anything new by hand...

The menu maker in XARA wont let you import any icons or images, so I would have to work with one of the dozens of templates that it has.

If u ask me, your menu system looks wonderful.  If I were to recreate it in XARA it would consist of 3 button categories (Navigation, Services and Help & Support) with the sub categories sliding out using javascript like on my TP.

The reason I use this is to save vertical space.

You may not want to change your menu system, in this case, but I could create a XARA menu to use for a JukeBox or for another menu system.  For example, I have a single button for my JukeBox and all the music categories slide out to the side, to see the many categories.  Thats how I can cram so many menus into a small space.

Hmm...I think you tried very hard, ÂÃ,§tigmartyr but I think (since I can't edit the link without that software) I should better go for CSS...;)

CSS might be intimidating, but trust me, its not that hard. 

Just stare at it for a while, and u will start to see similarities in HTML.  I've been able to customize the entire Black_Day theme by simply editing the style.css

If u ever need help with a JukeBox menu, lemme know (this goes for everyone else as well ;) - just PM me)

Thanks, I will give it a go...:)

I thought I'd try my hand at modifying the menu for use in the centre block as I don't want to use the navigation menu and have everything in one place instead of repeated a couple of times. I'm not good with tables at all but this is what I came up with after abit of experimenting. What I was trying to do however is have each section as a column so be like

Header              Header              Header           

Link                  Link                  Link
Link                  Link                  Link
Link                  Link                  Link

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fi41.photobucket.com%2Falbums%2Fe256%2FPapaLazarou84%2Fmenu.jpg&hash=ba06346e1dd201ed7630efd3efbf98b6ccd8db0f)

<div class="smalltext"><font  size="1"><tabular><row><b>Navigation</b></font><hr></row></br> <row><img src="Themes/juno11rc2/images/menu/home.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php">Home</a></font> <img src="Themes/juno11rc2/images/menu/forum.gif" /><font size="2"><a href=""http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=forum">Forum</a></font><img src="Themes/juno11rc2/images/menu/archive.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/archive.php">Archive</a></font><img src="Themes/juno11rc2/images/menu/links.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/dir/">Link Directory</a></font><img src="Themes/juno11rc2/images/menu/rss.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=.xml">Syndication</a></font></row> <br> <br><b>Services</b></font><hr></row></br> <row><img src="Themes/juno11rc2/images/menu/shop.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=shop">Shop</a></font><img src="Themes/juno11rc2/images/menu/calendar.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=calendar">Calendar</a></font><img src="Themes/juno11rc2/images/menu/members.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=mlist">Member List</a></font><img src="Themes/juno11rc2/images/menu/member_map.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=mm">Member Map</a></font><img src="Themes/juno11rc2/images/menu/online.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=who">Who's Online?</a></font><img src="Themes/juno11rc2/images/menu/stats.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=stats">Statistics</a></font></row ><br> <br><row><b>Help & Support</b></font><hr></row></br> <row><img src="Themes/juno11rc2/images/menu/search.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=search">Search</a></font><img src="Themes/juno11rc2/images/menu/faq.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=help">Help Center</a></font><img src="Themes/juno11rc2/images/menu/staff.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=staff">Site Staff</a></font><img src="Themes/juno11rc2/images/menu/contact_us.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?page=4">Contact Us</a></font></br></tabular></div>

Pretty nice, good work.

great job :D

added to the block code index under "M" as "menu with icons"

Thanks I'll get working on doing it as columns when I get the time unless anyone knows how to do it?

Took awhile but here it is  ;D

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fi41.photobucket.com%2Falbums%2Fe256%2FPapaLazarou84%2FFinishedMenu.jpg&hash=8769229c09fa2e176ba375f52400e1dfd4878482)

<center><TABLE Border="0" Cellpadding="6" Cellspacing="1"> <TR> <TH><b>Navigation</b></font><hr></TH> <TH><b>Services</b></font><hr></TH>
<TH><b>Help & Support</b></font><hr></TH>
</TR>

<TR>
<TD><img src="Themes/juno11rc2/images/menu/home.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php">Home</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/shop.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=shop">Shop</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/search.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=search">Search</a></font></TD> </TR>

<TR>
<TD><img src="Themes/juno11rc2/images/menu/forum.gif" /><font size="2"><a href=""http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=forum">Forum</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/calendar.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=calendar">Calendar</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/faq.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=help">Help Center</a></TD>
</TR>


<TR>
<TD><img src="Themes/juno11rc2/images/menu/archive.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/archive.php">Archive</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/members.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=mlist">Member List</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/staff.gif"/><font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=staff">Site Staff</a></font></TD>
</TR>

<TR>
<TD><img src="Themes/juno11rc2/images/menu/links.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/dir/">Link Directory</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/member_map.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=mm">Member Map</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/contact_us.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?page=4">Contact Us</a></font></TD> </TR>

<TR> <TD><img src="Themes/juno11rc2/images/menu/rss.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=.xml">Syndication</a></font></TD> <TD><img src="Themes/juno11rc2/images/menu/online.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=who">Who's Online?</a></font></TD> </TR>

<TR>
<TD></TD>
<TD><img src="Themes/juno11rc2/images/menu/stats.gif"/> <font size="2"><a href="http://nano.dnsprotect.com/~uk360lea/Football/index.php?action=stats">Statistics</a></font></TD>
<TD></TD>
</TR></TABLE></center>

thanks for such a nice sharing ^^

i have two icons to share too

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fi13.photobucket.com%2Falbums%2Fa286%2Ffallenangel4%2Ffavourite.gif&hash=dd93d34388a955860e97bb17d6918310cb1475a1)
add to favourite

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fi13.photobucket.com%2Falbums%2Fa286%2Ffallenangel4%2Fradio.gif&hash=5fd0088ba8060b21d7abdd94f6f3ae492db7abef)
radio/podcast/FM icon

Phew, my small idea has been ball rolled...:)

Anyway, nice work at all who are extending/enhancing at further, but please ask me before you make any big changes on the code.;)

this is a great thread...shows how contagious this coding and website building can be...

1st off, nice job and site YJ.  PapaLazaro, I like the fact that you strayed from the norm, and shared too, thanks peace..Hygron

Are those working with the theme selector block or do you have to set them up for a specific theme if you add them?

Quote from: YJ on July 28, 2006, 06:43:52 PM
Phew, my small idea has been ball rolled...:)



Anyway, nice work at all who are extending/enhancing at further, but please ask me before you make any big changes on the code.;)

(snowballed)...my dear, lol  :P

So cool, exactly what i was looking for!!
I want to thank everyone in this community for making all of this possible!

Take care  :)

href="http://www.xxx.net/v1/index.php">Home it still go http://www.xxx.net/index.php whiout v1 that my forum folder.

how can i resolve this

Quote from: alhaudhie on November 21, 2006, 12:58:16 AM
href="http://www.xxx.net/v1/index.php">Home it still go http://www.xxx.net/index.php whiout v1 that my forum folder.

how can i resolve this

Copy the code you are using here so we can see it.

<div class="smalltext"><font  size="1">Navigation</font>

---

<img src="Themes/TP_DilberMC/images/menu/home.gif"/> <font size="2">Home (http://www.gadgetkorea.com/index.php)</font>
 <img src="Themes/TP_DilberMC/images/menu/forum.gif" /> <font size="2">Forum (http://www.gadgetkorea.com/index.php?action=forum)</font>
<img src="Themes/TP_DilberMC/images/menu/archive.gif"/> <font size="2">Archive (http://www.gadgetkorea.com/archive.php)</font>
<img src="Themes/TP_DilberMC/images/menu/links.gif"/> <font size="2">Link Directory (http://www.gadgetkorea.com/dir/)</font>
<img src="Themes/TP_DilberMC/images/menu/rss.gif"/> <font size="2">Syndication (http://www.gadgetkorea.com/index.php?action=.xml)</font>

<font size="1">Services</font>

---

<img src="Themes/TP_DilberMC/images/menu/shop.gif"/> <font size="2">Shop (http://www.gadgetkorea.com/index.php?action=shop)</font>
<img src="Themes/TP_DilberMC/images/menu/calendar.gif"/> <font size="2">Calendar (http://www.gadgetkorea.com/index.php?action=calendar)</font>
<img src="Themes/TP_DilberMC/images/menu/members.gif"/> <font size="2">Member List (http://www.gadgetkorea.com/index.php?action=mlist)</font>
<img src="Themes/TP_DilberMC/images/menu/member_map.gif"/> <font size="2">Member Map (http://www.gadgetkorea.com/index.php?action=mm)</font>
<img src="Themes/TP_DilberMC/images/menu/online.gif"/> <font size="2">Who's Online? (http://www.gadgetkorea.com/index.php?action=who)</font>
<img src="Themes/TP_DilberMC/images/menu/stats.gif"/> <font size="2">Statistics (http://www.gadgetkorea.com/index.php?action=stats)</font>

<font size="1">Help & Support</font>

---

<img src="Themes/TP_DilberMC/images/menu/search.gif"/> <font size="2">Search (http://www.gadgetkorea.com/index.php?action=search)</font>
<img src="Themes/TP_DilberMC/images/menu/faq.gif"/> <font size="2">Help Center (http://www.gadgetkorea.com/index.php?action=help)</font>
<img src="Themes/TP_DilberMC/images/menu/staff.gif"/> <font size="2">Site Staff (http://www.gadgetkorea.com/index.php?action=staff)</font>
<img src="Themes/TP_DilberMC/images/menu/contact_us.gif"/> <font size="2">Contact Us (http://www.gadgetkorea.com/index.php?page=4)</font></div>


when i change the address to my forum name it cannot be done...
for your information my home site address include before index.php is must be add v1

in the link for your forum make sure the url is;

***Edit****


Try now and see if it is working.

Where do I get the images in the original post? It says they are attached but they arent. I downloaded a dilbermc theme and installed it and there is no TP_DilberMC directory in the one I downloaded. id really like to use this menu with the graphics. Can someone give me a hand... much appreciated

We lost some attachments in the server move. Someone will have to post them if they still have them.

Hi,
Somebody can upload again the attach/images of the original post?

thanks in advance.
best regards.

what i did for the icons was simply to go to www.gadgetkorea.com, then right-clicked on each icon from their menu there and "save as" on my computer.

:)

for the other unavailable icons, i screen-captured the image posted on the previous page then manually edited them to erase unwanted pixels around each icon.

Hi All,

I have attached a zip with some icons you can use for this excellent menu (I am using the PHP version). Screenshot also attached.

Regards,

Wilsy.

Thank you for that Wilsy :)

hello,

what do i edit so that clicked link in this menu will open in a new window and not replacing the current window?

add a target=_blank to the links attributes if it's html

Quote from: wilsy on February 19, 2007, 05:55:16 PM
Hi All,

I have attached a zip with some icons you can use for this excellent menu (I am using the PHP version). Screenshot also attached.

Regards,

Wilsy.

is there a way to make this images transparent ?
i use Leviathan theme and the images appear with a small white gap around them :(

BTW great menu and thanks for the images guys :D

Quote from: URPG on February 22, 2007, 11:23:10 PM
add a target=_blank to the links attributes if it's html

this block code is placed in a php box

thanks, i used target="_blank"

Where are the attach images for this mod? Where to download

Sorry i have them already..

IchBin, could you re-attatch your Version, please?

Very nice! I made some modification, but thank you!

www.importantworkstuff.com

I cant find the "images attached" as instructed in the Original post.

Unfortunately most of the attachments got lost when we had a server change :( unless someone still has the files and is willing to post them again :)

Nice work !!! sorry i dont want to read 8 pages haha.......

Quote from: Lesmondâ„¢ on March 29, 2007, 06:53:28 PM
Unfortunately most of the attachments got lost when we had a server change :( unless someone still has the files and is willing to post them again :)

I to would like to have these files!!

I'm being a little lazy and not wanting to make some new ones ATM in Photo Shop.

See this post: -

http://www.tinyportal.net/index.php?topic=6385.msg111650#msg111650

Regards,

Wilsy.

Thank you very much!!

I had some problems with the icons because of my dark background. So I searched others. Here are two nice icon packages:
http://linux.softpedia.com/get/Desktop-Environment/Icons/kNeu-5497.shtml
http://icon-king.com/?p=15

I dont see any attached images

They are here.  http://www.tinyportal.net/index.php?topic=6385.msg111650#msg111650

This is kind of neat menu, so easy to add customise whatever..
Live Demo on Crip board..top left side <---
http://www.tinyportal.net/index.php?board=128.0

Wanna know how ask. ;)

Ok I will ask.how do you do it? I like the look. 

here is the complete code for it:
you'd need your links, and your External StyleSheet.

<link rel="stylesheet" type="text/css" href="http://www.cripcan.com/cb.css" media="screen"/>

<div id="menu">
<ul id="menulist">
<LI><A href="http://www.porkrindstudios.com/" title="All TP Themes Demo's" alt="All TP Themes Demo's"><U>Porkys Demo's</U></A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?board=128.0" title="Crip Board" alt="Crip Board">HomePage</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?board=128.25" title="Page 2" alt="Page 2">Page[2]</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?board=128.50" title="Page 3" alt="Page 3">Page[3]</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?board=128.75" title="Page 4" alt="Page 4">Page[4]</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?action=forum" title="Community" alt="Community">Community</A></LI>
  <LI><A  href="http://themes.simplemachines.org/index.php?action=profile;u=28329" title="My Themes" alt="My Themes">'I' Themes</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?page=57" title="About Crip" alt="About Crip">About Crip</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?page=29" title="TP Team" alt="TP Team">TP Team</A></LI>
  <LI><A  href="http://www.tinyportal.net/index.php?action=tpmod;dl=item328" title="Download TP" alt="Download TP">Download TP</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?action=tpmod;dl" title="TP downlods" alt="TP downlods">TP Downloads</A></LI>
  <LI><A href="http://www.tinyportal.net/index.php?page=13" title="Button Maker" alt="Button Maker">Bloc Button's</A></LI>
  <LI><a href="http://xs.to" title="Free image hosting" alt="Free image hosting">ImageHost</A></LI></UL>
</DIV>
</DIV>


Thats it!

nice!!  thanks

Awesome - got mine to work perfectly just the way I wanted it to. If anyone wants to check out an extended version as a demo visit www.amarnatok.com :)

This menu doesn't seem to work screenshot below

Did you upload the images to your theme images?  And also what kind of block are you using?

i didnt see any link to download the images

look here   http://www.tinyportal.net/index.php?topic=6385.msg111650#msg111650

OK, I've managed to get the menu the way I want, looks great!! Thanks so much!

1 problem I'm having though. Once inside a board, the images do no appear in the menu, only links and the picture missing (x).  ??? I don't know what I can do to fix it.


ETA: Ok, so I can see what is the problem,

the icons for my forum are looking for mydomain.com/forum/index.php/themes/mytheme/... 
                    instead of                  mydomain.com/forum/themes/mythemes/....

I already added the images to the themes folders



*** Nevermind, I figured it out. I just used my full path instead of "themes/...." for each link in the menu, and it now works.

Hello everyone,
I know this is an old thread but I thought I add a rollover concept.
Default theme (and I belive many themes here) already come with JavaScript that handles rollovers so you do not need to re-invent the wheel  ;).
The only conditions are:
1. Name the rollover image (over/hoover image) with prefix of "h_".
So in this example I am using "help.gif" and "h_help.gif"
2. Upload images into /Themes/Default/images/

Then use this code in your phpbox:
global  $scripturl,$settings,$boardurl,$context;
echo'
<a href="',$scripturl,'?action=help"><img id="help" src="', $settings['images_url'], '/help.gif" alt="Need Help?" width="61" height="61" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
';

Naturally you can produce this and copy.paste srouce code and use as html.
And of course you can use this snip throghout the template to build main/top naviation without knowing JS  ;) and it is a lot less code than using Dreamweaver MM_ scripts
All the best!

thanks for sharing..that's kinda kool. :up:

Of coarse css can do/the same. ;)

You know it, I just wanted to point that you can re-use code originally found&used in footer (php,mysql,xhtml,css).
What can I say...still new at TP and editing 'default' theme as I find code snips in it
Here  (http://mostarnetworks.com) is how far my butchering got me ;)...some day maybe a free template to community will be in order.
Thanks!

Ahey,
..that sure looks like you been busy on default theme, yes indeed perhaps a nice clean theme for our community is in store.. eh? ;)

Hi Crip,
I think it would be only fair..TP is what got me back into design. :up:
I do have few more css things to tweak and few images on forum side. I am sure you will see it on TPM and perhaps here if approved. Need a bit more time though  :D
All the best!

Time we got, :)

could a dropdown menu be supported ? i tried to use the one attached (not in a block off course , but even in a block it would be great) but didn't work ! it appeared fine but didn't drop down !

any html you can stick in there will work....can you say spry ;)

well i tried and it showed fine but on mouse over it didn't drop down as it was supposed to ! i added the css part in style.css , the head part just before the </head> , and the body part as shown (in index.template.php)

// TinyPortal
     if($context['TPortal']['showtop']==1)
     {
// TinyPortal end
echo '
<table width="100%" cellpadding="4" cellspacing="0" border="0" >
<tr>';

// SHOW THE JAVASCRIPT DROPDOWN MENU !!!
echo '<td width="90%" class="titlebg2">
I PUT THE BODY PART HERE
</td>';

apparently i have done something wrong but i can't figure out what ...
any help would be like gold to me !
thnx a lot !

in your case/condition 'userinfo' needs the be shown in TP admin.
not sure about your JS, nake sure you include the Javascript with the rest of the script - NOT in body. Import would be a better choice.

Here's some icons that go with dark themes, modified from http://commons.wikimedia.org/wiki/Crystal_Clear. They go with this menu pretty good.

catchpen,as a general courtesy rule I don't think you can distribute this without permission of EACH of the authors and according to their rules.
So maybe just the link to wiki will do  ;)

Thanks, but I read on the site and didn't see anything about that. Transparent background still looks like crap.  It says to mention the source (which I did) and I think it should be OK then. If not moderators feel free to delete.

Quotehow to reuse Commons' media files

[edit] Looking for media files on Commons

In order to find certain media files on Wikimedia Commons see if an appropriate article for your file exists. Fewer articles exist in Commons than in Wikipedia, but Bicycle, Lake, many National Parks, plant species, animals, etc., exist. Add in your local Wikipedia a link to at least one gallery article of Wikimedia Commons, if possible.

A good way finding certain media on Wikimedia Commons is by using Mayflower search.

If you want to reuse Wikimedia Commons media files outside Wikimedia projects you are welcome to do so. However keep some very important points in mind:

    * Unlike traditional media repositories, Wikimedia Commons is free. Everyone is allowed to copy, use and modify any files here freely for any purpose including commercial ones as long as the source and the authors are credited and, in many cases, as long as you release your copies/improvements under the same freedom to others.
    * The Wikimedia Commons database itself and the texts in it are licensed under the GNU Free Documentation License. The license conditions of each individual media file can be found on their description pages.
    * However be aware that we cannot guarantee the correctness of the information given on each file. So please verify on your own the license conditions given on the media file you want to use.
    * More detailed information on usage conditions can be found at Commons:Licensing.

Looks good to me.

My bad then, I really thought they belong to http://www.crystalxp.net/ as I have seen them there before than on wikimedia & wiki's lic is not all that clear author was using translator so I thought it may be rip
http://commons.wikimedia.org/wiki/Template_talk:Crystal_clear

...but hey great even better, they make pretty cool stuff!

Thanks!

Just using basic php one for now,Works fine but i would like to add login/logout & register links,

tried adding them like calendar link,but gives error.

This is how far i have got

global  $scripturl,$settings,$boardurl,$context;
echo'
<div class="smalltext">
<font  size="1"><b>Navigation</b></font><br><hr>
<img src="',$settings['images_url'],'/menu/home.gif"/><font size="2"><a href="',$scripturl,'"> Home</a></font><br>
<img src="',$settings['images_url'],'/menu/forum.gif" /><font size="2"><a href="',$scripturl,'?action=forum"> Forum</a></font></b><br>
<img src="',$settings['images_url'],'/menu/arcade.gif" height="16" width="16"/><font size="2"><a href="',$scripturl,'?action=usercp"> User Control Panel</a></font><br>
<img src="',$settings['images_url'],'/menu/archive.gif" height="16" width="16"/><font size="2"><a href="',$scripturl,'?action=sitemap"> SiteMap</a></font><br>
<img src="',$settings['images_url'],'/menu/rss.gif"/><font size="2"><a href="',$scripturl,'?action=coppermine"> Photo Gallery</a></font><br>
<img src="',$settings['images_url'],'/menu/rss.gif"/><font size="2"><a href="',$scripturl,'?action=treasury"> Treasury</a></font><br><br>
<img src="',$settings['images_url'],'/menu/rss.gif"/><font size="2"><a href="',$scripturl,'?action=chat"> Live Chat</a></font><br><br>
<font size="1"><b>Services</b></font><br><hr>';
if ($context['allow_admin'])
{
echo'<img src="',$settings['images_url'],'/menu/calendar.gif"/><font size="2"><a href="',$scripturl,'?action=admin"> Admin</a></font><br>';
}
echo'<img src="',$settings['images_url'],'/menu/members.gif"/><font size="2"><a href="',$scripturl,'?action=mlist"> Member List</a></font><br>
<img src="',$settings['images_url'],'/menu/online.gif"/><font size="2"><a href="',$scripturl,'?action=who"> Who\'s Online?</a></font><br>
<img src="',$settings['images_url'],'/menu/stats.gif"/><font size="2"><a href="',$scripturl,'?action=stats"> Statistics</a></font><br><br>
<font size="1"><b>Help & Support</b></font><br><hr>
<img src="',$settings['images_url'],'/menu/search.gif"/><font size="2"><a href="',$scripturl,'?action=search"> Search</a></font><br>
<img src="',$settings['images_url'],'/menu/faq.gif"/><font size="2"><a href="',$scripturl,'?action=help"> Help Center</a></font><br>
</div>';

This is code from index_template

if ($context['user']['is_guest'])
{
echo $tab1, $ca== 'login' ? '1' : '2' , '"><a href="', $scripturl, '?action=login">'.$txt[34]. '</a></td>';
echo $tab1, $ca== 'register' ? '1' : '2' , '"><a href="', $scripturl, '?action=register">'.$txt[97]. '</a></td>';
}
// Otherwise, they might want to [logout]...
else
echo $tab1, $ca== 'logout' ? '1' : '2' , '"><a href="', $scripturl, '?action=logout;sesc='.$context['session_id'].'">'.$txt[108]. '</a></td>';


echo '<td><img src="'.$settings['images_url'].'/img/tab_last.jpg" alt="" style="margin: 0;" /></td></tr></table>';
}

Any help much appreciated

It would help if you told us what the error is that you get.

Thanx but i got it sorted,Had an extra ? :uglystupid2:

I'm using the PHP version of this block but was wondering if it's possible to have a link open a new pop up window?

I'm just trying to open a new pop-up window linked to another HTML page in a certain size.  (MP3 Player)

I tried this but it didn't seem to work...


<img src="',$settings['images_url'],'/menu/mp3player.png" height="16" width="16"/><font size="2"><a href="http://www.mywebpage.com/mp3player.html" onclick="window.open('http://www.mywebpage.com/mp3player.html','popup','width=500,height=500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"> MP3 Player</a></font><br>

Is this possible or would I have to switch to the script box version and use javascript?

Thanks guys and sorry to bump such an old topic.

Let me google that for you! (http://letmegooglethatforyou.com/?q=html+link+new+window)

I appreciate the help IchBin but I'm trying to open a new popup window in a certain size rather then opening an entirely new window. 

The problem is I'm using a PHP block and I'm unsure of the proper code.

Quote from: IchBinâ„¢ on February 17, 2009, 03:28:14 PM
Let me google that for you! (http://letmegooglethatforyou.com/?q=html+link+new+window)

Lol, loved that Ichbin ;)