The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How do I do that

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Solved How do I do that

Post by Guest on May 17th 2011, 9:28 pm

First topic message reminder :

How do I do that

http://i25.servimg.com/u/f25/15/95/28/21/button10.jpg



the forum


Last edited by Killer606 on May 18th 2011, 4:34 pm; edited 3 times in total

Guest
Guest


Back to top Go down


Solved Re: How do I do that

Post by lisa1302 on May 18th 2011, 3:42 am

@Killer606 wrote:
@lisa1302 wrote:I don't want to argue here - but that is not how my menu is created.

On my forum there is no picture behind the nav buttons because the nav buttons aren't used.

So spending the time adding that background would be pointless


Why did not you tell me the correct way

Oh for goodness sake, I have just spent an hour of my own time explaining how this menu is done, and I am SORRY it took so long but I have a poorly baby who comes before impatient people!

I don't give a toss if you think I am patronising/old/whatever but you need to get yourself some manners if you expect people on this board to help you in future.

Here is what you need to make that menu:

Spoiler:

How to create a drop down menu in phpbb2 like this menu here http://www.babiesandall.com/

menu1image
http://www.babiesandall.com/h45-menu-example

What you will need:

You will need at least 1 background image, which on the example you see as green stripe (as a guide it should be 25 pixels high, by 50 pixels long)

If you wish to have a different image when the mouse hovers then you will need a second background image the same size as above – you can see it’s the grey stripe on the example.

You may also want the arrows to show that sub forums exist – in this case get yourself 2 small arrows, one pointing right and 1 pointing down.

Upload these to your host and keep note of the URL.

The code in the spoiler below is what you will need to edit to match your forum, the parts in CAPITALS you need to change to suit your forum; that may be to add your own domain or add your forum/sub forums URLS.

Matching to your forum

The ‘style’ can be adjusted to suit your font, colours etc

The actual menu can be adjusted to whatever you need – the drop downs can be duplicated/removed to suit your forum structure.

The code I have underlined is what adds to the main top menu – so copy and paste that to create a new main menu item.

The code in bold is an example of a category with 4 forums in it – so use that as a guide of what to copy and paste to add your categories/forums.

You will need to replace the images with ones to match yours
Replace the whole URL that ends in these:
greenp10.png with the URL of your background image;
greypl10.png with the URL of your hover image;
arrv_w10.gif with the URL of your down arrow;
arr_wh10.gif with the URL of your right arrow



Positioning your menu:

This line below is what determines where the menu sits, so find it in the style and adjust the left and right accordingly

ul#cssMenu{
display:block;font-size:0;position:absolute;z-index:1000;left:145px;top:288px;}

COPY CODE FROM HERE DOWN....
<style>

ul#cssMenu,ul#cssMenu ul{
margin:0;list-style:none;padding:0;background-color:#FFFFFF;background-image:url("http://i24.servimg.com/u/f24/16/44/55/81/greenp10.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:;-moz-border-radius:5px 5px 5px 5px ;-webkit-border-radius:5px 5px 5px 5px ;border-radius:5px 5px 5px 5px ;}

ul#cssMenu ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:2.1px 2.1px 3px #B1B1B1;-webkit-box-shadow:2.1px 2.1px 3px #B1B1B1;box-shadow:2.1px 2.1px 3px #B1B1B1;padding:0 2px 2px;background-color:#68aabf;border-width:1px;border-style:ridge;border-color:#558391;}

ul#cssMenu li:hover>*{
display:block;}
ul#cssMenu li:hover{
position:relative;}
ul#cssMenu ul ul{
position:absolute;left:100%;top:0;opacity:1;}
ul#cssMenu table{
border-collapse:collapse;}
ul#cssMenu{
display:block;font-size:0; width: 90%;position:absolute;z-index:1000;left:60px; top:290px;}
ul#cssMenu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#cssMenu>li,ul#cssMenu li{
margin:0;}
ul#cssMenu a:active, ul#cssMenu a:focus{
outline-style:none;}
ul#cssMenu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Tahoma, Arial,Helvetica,sans-serif;color:#FFFFFF;cursor:auto;padding:4px;background-color:#FFFFFF;background-image:url("http://i24.servimg.com/u/f24/16/44/55/81/greenp10.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:;}



ul#cssMenu ul li{
float:none;margin:2px 0 0;}
ul#cssMenu ul a{
text-align:left;padding:3px;}
ul#cssMenu li:hover>a{
background-color:#FFFFFF;border-style:solid;font:bold 13px Tahoma, Arial,Helvetica,sans-serif;color:#03699c;text-decoration:underline;background-image:url("http://i24.servimg.com/u/f24/16/44/55/81/greypl10.png");}
ul#cssMenu li:hover>a{
position :relative;background-color:#FFFFFF;border-style:solid;font:bold 13px Tahoma, Arial,Helvetica,sans-serif;color:#03699c;text-decoration:underline;background-image:url("http://i24.servimg.com/u/f24/16/44/55/81/greypl10.png");}
ul#cssMenu li>a:hover{
position:static !important;}
ul#cssMenu img{
border:none;vertical-align:middle;margin-right:5px;}
ul#cssMenu img.over{
display:none;}
ul#cssMenu li:hover > a img.def{
display:none;}
ul#cssMenu li:hover > a img.over{
display:inline;}
ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover ul img.def,ul#cssMenu a:hover a:hover a:hover ul

img.def,ul#cssMenu a:hover a:hover a:hover a:hover ul img.def,ul#cssMenu a:hover a:hover img.over,ul#cssMenu a:hover a:hover a:hover

img.over,ul#cssMenu a:hover a:hover a:hover a:hover img.over,ul#cssMenu a:hover a:hover a:hover a:hover a:hover img.over{
display:inline;}
ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover ul img.over,ul#cssMenu a:hover a:hover a:hover ul

img.over,ul#cssMenu a:hover a:hover a:hover a:hover ul img.over,ul#cssMenu a:hover a:hover img.def,ul#cssMenu a:hover a:hover a:hover

img.def,ul#cssMenu a:hover a:hover a:hover a:hover img.def,ul#cssMenu a:hover a:hover a:hover a:hover a:hover img.def{
display:none;}
ul#cssMenu a:hover ul,ul#cssMenu a:hover a:hover ul,ul#cssMenu a:hover a:hover a:hover ul,ul#cssMenu a:hover a:hover a:hover a:hover ul{
display:block;}
ul#cssMenu a:hover ul ul,ul#cssMenu a:hover a:hover ul ul,ul#cssMenu a:hover a:hover a:hover ul ul{
display:none;}
ul#cssMenu span{


display:block;overflow:visible;background-image:url("http://i62.servimg.com/u/f62/15/52/93/00/arrv_w10.gif ");background-position:right

center;background-repeat:no-repeat;padding-right:19px;}
ul#cssMenu ul span{
background-image:url("http://i62.servimg.com/u/f62/15/52/93/00/arr_wh10.gif ");padding-right:17px;}
ul#cssMenu li a.topmenu{


height:13px;background-color:transparent;background-image:url("");border-width:0px;fon

t:bold 12px Verdana;color:#FFFFFF;background-position:100% 0;line-height:13px;}
ul#cssMenu li.topmenu:hover>a{
background-color:transparent;background-image:url("");font:bold 12px

Verdana;color:#FFFFFF;line-height:13px;}
* html ul#cssMenu li a.topmenu{
display:inline-block;vertical-align:top;}
ul#cssMenu li.topmenu:hover>a{
background-color:transparent;background-image:url("");font:bold 12px

Verdana;color:#FFFFFF;line-height:13px;}
ul#cssMenu li.topmenu{
margin:0 5px 0

0;background-color:transparent;background-image:url("");background-position:0 0;}
ul#cssMenu li.topmenu:hover{
background-color:transparent;background-image:url("");}
ul#cssMenu li.topmenu>a{
margin:0 -5px 0 5px;}
ul#cssMenu li a.ln{


height:13px;background-color:transparent;background-image:url("");border-width:0px;fon

t:bold 14px Verdana;color:#FFFFFF;background-position:100% 0;padding:3px;line-height:13px;}
ul#cssMenu li.ln:hover>a{
background-color:transparent;background-image:url("");font:bold 12px

Verdana;color:#FFFFFF;line-height:13px;}
* html ul#cssMenu li a.ln{
display:inline-block;vertical-align:top;}
ul#cssMenu li.ln:hover>a{
background-color:transparent;background-image:url("");font:bold 12px

Verdana;color:#FFFFFF;line-height:13px;}
ul#cssMenu li.ln{
margin:0 5px 0

0;background-color:transparent;background-image:url("");background-position:0 0;}
ul#cssMenu li.ln:hover{
background-color:transparent;background-image:url("");}
ul#cssMenu li.ln>a{
margin:0 -5px 0 5px;}
ul#cssMenu .submenu li{
margin:2px 0 0;}
ul#cssMenu .submenu{
background-color:#68aabf;border-width:1px;border-style:ridge;border-color:#558391;padding:0 2px 2px;}
ul#cssMenu .submenu a{
padding:3px;}
ul#cssMenu li a._{
padding:3px;}
ul#cssMenu li.ln:hover>a{
background-color:transparent;background-image:url("http://i24.servimg.com/u/f24/16/44/55/81/greenp10.png");font:bold 12px

Verdana;color:#FFFFFF;line-height:13px;}


</style>


<ul id="cssMenu" class="topmenu">
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/forum">Home</a></li>
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/forum"><span>Forum</span><!--[if gt IE
6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="submenu">
<li><a href="http://www.YOURFORUM.com/CATEGORY1"><span>CATEGORY1</span><!--[if gt IE
6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="submenu">
<li><a href="http://www.YOURFORUM.com/FORUM1A">FORUM1A</a></li>
<li><a href="http://www.YOURFORUM.com/FORUM1B">FORUM1B</a></li>
<li><a href="http://www.YOURFORUM.com/FORUM1C">FORUM1C</a></li>
<li><a href="http://www.YOURFORUM.com/FORUM1D">FORUM1D</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="http://www.YOURFORUM.comCATEGORY2"><span>CATEGORY2</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="submenu">
<li><a href="http://www.YOURFORUM.com/FORUM2A">FORUM2A</a></li>
<li><a href="http://www.YOURFORUM.com/FORUM2B">FORUM2B</a></li>
<li><a href="http://www.YOURFORUM.com/FORUM2C">FORUM2C</a></li>
<li><a href="http://www.YOURFORUM.com/FORUM2D">FORUM2D</a></li>
</ul>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/profile?mode=editprofile"><span>My Profile</span><!--[if
gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="submenu">
<li><a href="http://www.YOURFORUM.com/profile?mode=editprofile">Edit My Profile</a></li>
<li><a href="http://www.YOURFORUM.com/privmsg?folder=inbox">My Messages</a></li>
<li><a href="http://www.YOURFORUM.com/profile?mode=editprofile&page_profil=preferences">My Preferences</a></li>
<li><a href="http://www.YOURFORUM.com/profile?mode=editprofile&page_profil=signature">My Signature</a></li>
<li><a href="http://www.YOURFORUM.com/profile?mode=editprofile&page_profil=avatars">My Avatar</a></li>
<li><a href="http://www.YOURFORUM.com/profile?mode=editprofile&page_profil=friendsfoes">Friends &amp; Foes</a></li>
<li><a href="http://www.YOURFORUM.com/search?search_id=watchsearch" title="You get emails when someone replies to
these">Topics I am Watching</a></li>
<li><a href="http://www.YOURFORUM.com/search?search_id=favouritesearch">My Favourite Topics</a></li>
<li><a href="http://www.YOURFORUM.com/search?search_id=draftsearch">My Draft Replies</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/calendar">Calendar</a></li>
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/search?search_id=newposts"
target="_blank"><span>View</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="submenu">
<li><a href="http://www.YOURFORUM.com/search?search_id=newposts">Posts Since Last Visit</a></li>
<li><a href="http://www.YOURFORUM.com/search?search_id=egosearch">My Posts</a></li>
<li><a href="http://www.YOURFORUM.com/search?search_id=unanswered">Posts with no replies</a></li>
<li><a href="http://www.YOURFORUM.com/memberlist">Member list</a></li>
<li><a href="http://www.YOURFORUM.com/groups">UserGroups</a></li>
<li><a href="http://www.YOURFORUM.com/gallery/index.htm">Gallery</a></li>
</ul>

<li class="topmenu"><a class="topmenu" href="http://www.babiesandall.com/h33-search" target="_blank"> Search </a></li>
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/faq" target="_blank">FAQs</a></li>
<li class="topmenu"><a class="topmenu" href="http://www.YOURFORUM.com/contact" target="_blank">Contact Us</a></li>
<!-- BEGIN switch_user_logged_in -->
<li class="topmenu"><a class="topmenu" href="{U_LOGIN_LOGOUT}"<img src="" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" align="right" />{L_LOGIN_LOGOUT}</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li class="topmenu"><a class="topmenu" href="{U_REGISTER}"<img src="" alt="{L_REGISTER}" width="12" height="13" hspace="3" align="right" border="0" />{L_REGISTER}</a></li>
<!-- END switch_user_logged_out -->
</ul>

TO HERE


Add the code to the template
Once you are happy with the way your menu looks and works in the test HTML page you will need to paste all of the code into the overall header template, underneath the <head> tag. (make sure you take a backup copy of the template incase of mistakes!)

Save it and publish it – you may need to tweak the positioning, or whatever to get it perfect.

NEXT
You need to remove the default nav menu items.
NOTE: On my example I keep the Inbox icon – simply because I prefer to have it show when messages are received – but all the other icons need to be removed.

Go to admin panel – display – pics management – advanced mode

On the first tab General Explore you need to delete the contents of the items Index : Calendar : Gallery : Gallery : Portal : Portal : Portal : FAQ : Search : Memberlist : Usergroups : Usergroups :

When you press save you will notice that the fields are filled with http://illiweb.com/fa/empty.gif thats fine!

NEXT

While still in the Display tab, click onto Headers & Navigation

You need to change ‘Display only images in the navbar : to Yes’ (you have already removed the images above, this will now remove the text)

If you have done the same as me and kept the Inbox icon then you need to decide left or right for Menu Position.

That’s it, you should now see the new drop down menu on your forum and the default nav buttons should have gone.

DISCLAIMER:
I am not claiming that this is the only or best way to achieve this by any means, it’s just the way I have made some code work how I wanted.


lisa1302
Forumember

Posts : 305

http://www.babiesandall.com

Back to top Go down

Solved Re: How do I do that

Post by Guest on May 18th 2011, 4:47 am

Would you please me to give me a template : overall_header
Which is found in your website

Guest
Guest


Back to top Go down

Solved Re: How do I do that

Post by !_NICK_! on May 18th 2011, 5:54 am

She explained it.

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Solved Re: How do I do that

Post by Guest on May 18th 2011, 6:07 am

@Killer606 wrote:Would you please me to give me a template : overall_header
Which is found in your website
lisa1302 did you a HUGE favor by providing, what appears to be, most of the code and CSS for the drop-down menu on her forum. And now you want her template, something that I'm sure she spent dozens of hours working on? I hope she asks for payment in advance. Razz

You know, I've encountered a few really good people here on forumotion, one of them being the new admin on this forum. But for every person like Sean, I've encountered 25 people who seem to have little capacity for original thought and are best compared to leeches.

And people wonder why I'm primarily a lurker on forumotion...

Guest
Guest


Back to top Go down

Solved Re: How do I do that

Post by Guest on May 18th 2011, 6:43 am

@Killer606 wrote:Would you please me to give me a template : overall_header
Which is found in your website
ok now i can understand that you dont get the codes but go and look for a mod to help and they can explain it better than anyone else

Guest
Guest


Back to top Go down

Solved Re: How do I do that

Post by lisa1302 on May 18th 2011, 11:45 am

@Killer606 wrote:Would you please me to give me a template : overall_header
Which is found in your website

Why do you want my template?!

As Dion has said I have given you ALL the code you need for the menu you asked for - just paste it as per the instructions into YOUR header template and do the other things to make it work - you do not need my header template!

lisa1302
Forumember

Female Posts : 305
Reputation : 40
Language : Enlish
Location : UK

http://www.babiesandall.com

Back to top Go down

Solved Re: How do I do that

Post by Base on May 18th 2011, 6:44 pm

Is this problem solved?

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum