[HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

[Sniper_E]

I have some icons setup but the classes needed some adjusting.
I added margin-left: 10px;" for the icons in one class and
I added text-indent: 2px;" for the text next to the icons.

These are those two classes in the pro_dropdown_6.css

Code: Select all

#nav :hover ul.sub li {
   height: 20px;
   position: relative;
   float: left;
   width: 150px;
   margin-left:10px;
}

#nav :hover ul.sub li a {
   display: block;
   font-size: 11px;
   height: 18px;
   width: 182px;
   line-height: 18px;
   color: #143846;
   text-decoration: none;
   text-indent: 2px;
}

And to add the icons I changed codes in the overall_header.html template like this...

Code: Select all

         <li><a href="{U_FAQ}">{L_FAQ}</a></li>

To this...

Code: Select all

         <li class="icon-faq"><a href="{U_FAQ}">{L_FAQ}</a></li>

Check out the results...

[Jaymie1989]

I would prefer it to be on the navigation bar its self. If thats possible?

[iKeirNez Keir Nellyer]

Thanks! This works! It is amazing! Great Job!

[Bondgamer]

Thanks for this amazing tutorial. It is exactly the type of menu system I was looking to clean up the mess of links I had on my forum.

You can see my implementation of it here: http://www.hot-guild.com/Forum/index.php

[iKeirNez Keir Nellyer]

I had this and then I unistalled a mod with AutoMod and it all went back to normal. How can I stop this? This also happens when I uninstall a mod it replaces the language file with an old file so then I have to reinstall the mod.

[elephantspike]

In this bit:

Code: Select all

  <li> class="fly">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
               <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                  <li><a href="./ucp.php?i=163">Overview</a></li>
                  <li><a href="./ucp.php?i=164">Profile</a></li>
                        <li><a href="./ucp.php?i=165">Board Preferences</a></li>
                  <li><a href="./ucp.php?i=166">Private Messages</a></li>
                        <li><a href="./ucp.php?i=167">User Groups</a></li>
                        <li><a href="./ucp.php?i=168">Friends &amp; Foes</a></li>
               </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>

Why can this

Code: Select all

<a href="{U_PROFILE}"

Link to the UCP main page, but you need this:

Code: Select all

<a href="./ucp.php?i=166">

To link to Private message panel? Why won't this:

Code: Select all

"<a href={U_PROFILE}?i=166">

work in that spot?

I also tried this:

Code: Select all

<a href="{U_PRIVATEMSGS}"

Which works fine up higher in the code as a link in the top menu but no dice in the sub>sub menu.

The reason I'm trying to change it is that those ./ links for sub menus of the UCP stopped working on my Gallery page because I had to move the gallery up a folder to fix some damaged links in the gallery as a result of the phpb-seo MOD)

Note: All of my nav links work board-wide and they all even work on the gallery page except for those UCP sub>sub menu ones. The results are the same weather I use the relative ./ links or the {U_Profile} ones.

I followed this guide to moving the gallery (which works fine now) just no matter how I format the url it tries to make those 7 links go to domain/album/ucp.php instead of domain/forum/acp.php.


http://www.flying-bits.org/viewtopic.ph ... 65&p=14817


My folder tree now goes
-Domain (.htaccess redirects to domain/forum)
----Forum
----Album (moved and renamed from domain/forum/gallery)

[Sniper_E]

We found out a long time ago that links like this do not work on every board..

Code: Select all

<a href="./ucp.php?i=166">

That 166 may change on different boards.

I am in the process of creating a tab dropdown menu on my test site.
I found out that all the UCP links would not validate in your page.
The solution that I came up with is to set those links up first.
You can add those links in your ./includes/function.php easy.

Let me go get that link of the topic I posted that in.

http://www.phpbb.com/community/viewtopi ... #p13062776
You can use just the links you need, not all of them.

[ Post made via HTC Inspire]

[elephantspike]

Wow, that was fast! Thanks sniper. I'll give it a try. I don't know, though on my board /forum/ucp.php?i=166 does go to the private message panel, but for some reason only those links are trying to go to album/ucp.php?i=166

[elephantspike]

Wow. works like a charm. Even has sub menu choices direct to every setting. Thanks again.

I thought for sure that this was something I screwed-up installing a mod. That's what it usually is.

[Sniper_E]

Yea, those detailed UCP links to every spot can take you directly to where you want to go... one click. I have it setup on my test site if you want to check it out. The link is in my profile.

I might expand IKA's UCP links in our Glacier style with those later. It would be a nice addition to this tutorial also.

Glad to hear you got it all working!

[ Post made via HTC Inspire]