HomeHow do I do that
4 posters
Page 1 of 2
Page 1 of 2 • 1, 2 
How do I do that
by Guest May 17th 2011, 9:28 pm
Last edited by Killer606 on May 18th 2011, 4:34 pm; edited 3 times in total
Guest- Guest
Re: How do I do that
by lisa1302 May 17th 2011, 9:41 pm
That's my forum 
Ive been asked quite a few times how to do it, so if you bear with me I am putting a tutorial together, save having to tell everyone separately.
Ive been asked quite a few times how to do it, so if you bear with me I am putting a tutorial together, save having to tell everyone separately.
lisa1302- Forumember
-
Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
Re: How do I do that
by Guest May 17th 2011, 11:32 pm
i like your forum it looks good 10/10 for your forumlisa1302 wrote:That's my forum
Ive been asked quite a few times how to do it, so if you bear with me I am putting a tutorial together, save having to tell everyone separately.
Guest- Guest
Re: How do I do that
by lisa1302 May 17th 2011, 11:48 pm
Thanks very much! Its taken me long enough to do it... Only 9 months (quite apt for a baby forum though really)
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
Re: How do I do that
by Guest May 17th 2011, 11:52 pm
np you have worked really hard on your forum and i like it 
just one question.whats so good about having the forum style like that? btw i think you should create your own skin on hitskin.com
just one question.whats so good about having the forum style like that? btw i think you should create your own skin on hitskin.com
Guest- Guest
Re: How do I do that
by lisa1302 May 17th 2011, 11:56 pm
Well I have quite a few forums and it was going down the page a fair bit, all the reviewers suggested condensing it - which I wanted to do - but users didn't like it with the sub menus underneath!
Also alot of users are on mobile devices, so I created quite large icons and have them linked too - which means mobile users can just click the icon - apparently its easier!
So that design was the best way I could find to please everyone! Besides I think think it looks nice and bright with all the icons!
I might think about putting it on hitskin...when its really finished!
Also alot of users are on mobile devices, so I created quite large icons and have them linked too - which means mobile users can just click the icon - apparently its easier!
So that design was the best way I could find to please everyone! Besides I think think it looks nice and bright with all the icons!
I might think about putting it on hitskin...when its really finished!
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
Guest- Guest
Re: How do I do that
by Guest May 18th 2011, 1:24 am
No chat my friends here
.........
I want to know how to do it
Is one of you help me please
Why is no one to do good works
.........
I want to know how to do it
Is one of you help me please
Why is no one to do good works
Guest- Guest
Re: How do I do that
by !_NICK_! May 18th 2011, 1:27 am
She said she was going to. She will post it here when she gets it done. Please be kinda and wait it out. 
!_NICK_!- Active Poster
-
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How do I do that
by Guest May 18th 2011, 1:28 am
well we she said that she will help and i cant help you it this
Guest- Guest
Re: How do I do that
by lisa1302 May 18th 2011, 1:35 am
Jeeezz... I do have a life you know and a two year old to look after..I can't just do it at the drop of a hat.
Besides your PM that didn't even say please didn't really give me the enthusiasm to do it quickly!
Its taken me months of hard work and learning how to do stuff to get my forum like that ... so maybe have a bit of patience with people who offer to help?!
Besides your PM that didn't even say please didn't really give me the enthusiasm to do it quickly!
Its taken me months of hard work and learning how to do stuff to get my forum like that ... so maybe have a bit of patience with people who offer to help?!
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
Re: How do I do that
by Guest May 18th 2011, 2:07 am
to be honest why dont you wait for her to upload her skin to hitskin and then install it easily
Guest- Guest
Re: How do I do that
by !_NICK_! May 18th 2011, 2:09 am
Not trying to be a pest to some, but she has decided she isn't going to publish her skin/theme.
!_NICK_!- Active Poster
- Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How do I do that
by Suuki May 18th 2011, 2:09 am
I can help with one thing. What's your forum version and a link to your forum.
Although the forum maker can help you more, I can attempt to help for now.
Although the forum maker can help you more, I can attempt to help for now.
Suuki- Forumember
- Posts : 419
Reputation : 25
Language : English, Japanese (learning lots) :3
Re: How do I do that
by lisa1302 May 18th 2011, 2:10 am
that may be a while...if ever..I'm not 100% decided on doing that.
Im in the middle of sorting how to do the menu, so wont be long ...
Im in the middle of sorting how to do the menu, so wont be long ...
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
!_NICK_!- Active Poster
- Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How do I do that
by lisa1302 May 18th 2011, 2:15 am
I don't know Nick..... I haven't decided for sure!
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
Re: How do I do that
by !_NICK_! May 18th 2011, 2:16 am
Well, in my opinion I wouldn't. I would want my theme to be special and no one else to use it.
!_NICK_!- Active Poster
- Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How do I do that
by Suuki May 18th 2011, 2:17 am
-I Delete
Last edited by Suuki on May 18th 2011, 4:23 am; edited 5 times in total
Suuki- Forumember
- Posts : 419
Reputation : 25
Language : English, Japanese (learning lots) :3
Re: How do I do that
by lisa1302 May 18th 2011, 2:20 am
Thats not how it is at all sorry - its a drop down menu that doesn't use anything default so adding a background like that wont have any use in this case.
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
Re: How do I do that
by Suuki May 18th 2011, 2:22 am
This is for the picture behind the navigation buttons......Not for the drop down menu.....
But whatever if you think I'm wrong that's your own fault. This is the basic code for a picture behind the navigation bar.
I understand that he may have to change this when he gets a drop down menu, but you said it yourself, 'that may be a while before you make a tutorial'.
But whatever if you think I'm wrong that's your own fault. This is the basic code for a picture behind the navigation bar.
I understand that he may have to change this when he gets a drop down menu, but you said it yourself, 'that may be a while before you make a tutorial'.
Last edited by Suuki on May 18th 2011, 2:27 am; edited 1 time in total
Suuki- Forumember
- Posts : 419
Reputation : 25
Language : English, Japanese (learning lots) :3
Re: How do I do that
by lisa1302 May 18th 2011, 2:27 am
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
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
lisa1302- Forumember
- Posts : 305
Reputation : 40
Language : Enlish
Location : UK -
!_NICK_!- Active Poster
- Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
Re: How do I do that
by Guest May 18th 2011, 2:37 am
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
Guest- Guest
Re: How do I do that
by Suuki May 18th 2011, 2:41 am
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
*Cough*I know that*Cough*
Whatever, just help him with his drop down menu and I'll back off. This was just something temporary 'till you helped him with his drop down menu, but obviously I can't even do that.
Suuki- Forumember
- Posts : 419
Reputation : 25
Language : English, Japanese (learning lots) :3
Re: How do I do that
by lisa1302 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("https://i.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("https://i.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("https://i.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("https://i.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("https://i.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("https://i.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("https://i.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 & 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 https://2img.net/i/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
Reputation : 40
Language : Enlish
Location : UK -
Page 1 of 2 • 1, 2
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
