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

[Ika]

This tutorial covers the integration of a CSS dropdown menu into phpBB styles (subSilver2 based) similar to the menu seen here on STG BF_Vista. For the purposes of this tutorial we will use a pre-created menu and modify it to our desires and needs.


WARNING: This is an advanced level template change --- you should BACKUP any files involved BEFORE changing them.

What you will need:
An Editor (for HTML and CSS editing)
Photoshop or similar (for creating graphics to your liking)
Professional Menu from CSSPlay (Download the basic code for the menu)

1) Getting all the image files in the right place
-Place all the GIF images contained in the ZIP file in your 'theme/images' folder

2) Getting the CSS code in the right place
-Place 'pro_dropdown_6.css' in your 'theme' folder

Open 'theme/stylesheet.css' and add: (-Insert at the top of the stylesheet.css after the comments)

Code: Select all

@import url("pro_dropdown_6.css");

3) Getting the HTML Code in the right place
-You have one of two options 1) Look at the HTML code in 'pro_drop6.html in the ZIP file and use the generic code by inserting it into the overall_header.html or 2) since we are customizing this for phpBB using the following code and inserting it into the overall_header.html (where depends on where you want it to appear):

Note this portion is based on BF_Vista coding!

Open 'template/overall_header.html' and find:

Spoiler:

Code: Select all

   </div>

   <div id="menubar">
      <table width="100%" cellspacing="0">
      <tr>
         <td class="genmed">
            <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->
            <!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
            <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
            <!-- IF not S_IS_BOT -->
               <!-- IF S_USER_LOGGED_IN -->
                  <!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
               <!-- ELSE --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_REGISTER}</a>
               <!-- ENDIF -->
            <!-- ENDIF -->
         </td>
         <td class="genmed" align="{S_CONTENT_FLOW_END}">
            <a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_FAQ}</a>
            <!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
            <!-- IF not S_IS_BOT -->
               <!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
               <!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/pip.png" width="20" height="17" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
            <!-- ENDIF -->
         </td>
      </tr>
      </table>
   </div>

Replace with:

Spoiler:

Code: Select all

  </div>
<br />

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
    <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN -->
    <li class="top"><a href="{U_INDEX}" class="top_link"><span style="color: red;">{L_BOARD_DISABLED}</span></a></li>
    <!-- ENDIF -->
    <!-- IF not S_IS_BOT -->
    <li class="top"><a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>
    <!-- ENDIF -->
    <!-- IF U_RESTORE_PERMISSIONS -->
    <li class="top"><a href="{U_RESTORE_PERMISSIONS}" class="top_link"><span>{L_RESTORE_PERMISSIONS}</span></a></li>
    <!-- ENDIF -->
    <!-- IF not S_IS_BOT -->
       <!-- IF S_USER_LOGGED_IN -->
           <!-- IF S_DISPLAY_PM -->
            <li class="top"><a href="{U_PRIVATEMSGS}" class="top_link"><span>{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></span></a></li>
            <!-- ENDIF -->
            <!-- ELSE -->
            <li class="top"><a href="{U_REGISTER}" class="top_link"><span>{L_REGISTER}</span></a></li>
            <!-- ENDIF -->
    <!-- ENDIF -->
    <!-- IF S_USER_LOGGED_IN -->
    <li class="top"><a href="#" id="controlpanel" class="top_link"><span class="down">Control Panel</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
         <!-- IF S_USER_LOGGED_IN -->
            <li><b>Users</b></li>
         <li><a href="{U_PROFILE}" 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>
            <!-- ENDIF -->
         <!-- IF U_MCP -->
            <li><b>Moderators</b></li>
            <li><a href="{U_MCP}">{L_MCP}</a></li>
            <!-- ENDIF -->
            <!-- IF U_ACP -->
            <li><b>Administrators</b></li>
            <li><a href="{U_ACP}">{L_ACP}</a></li>
            <!-- ENDIF -->
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
    <!-- ENDIF -->
   <li class="top"><a href="{U_INDEX}" id="forumlinks" class="top_link"><span class="down">Forum</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
           <li><b>Information</b></li>
         <li><a href="{U_FAQ}">{L_FAQ}</a></li>
         <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
            <li><b>Manage</b></li>
         <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
            <!-- IF not S_IS_BOT and U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
    <!-- IF S_DISPLAY_SEARCH -->
   <li class="top"><a href="{U_SEARCH}" id="forumsearch" class="top_link"><span class="down">{L_SEARCH}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
            <li><b>Common Searches</b></li>
         <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
         <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
            <!-- IF S_USER_LOGGED_IN -->
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
            <!-- ENDIF -->
            <li><b>Common Searches</b></li>
         <li><a href="{U_SEARCH}">Advanced Search</a></li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
    <!-- ENDIF -->
   <li class="top"><a href="#" id="phpbbresources" class="top_link"><span class="down">phpBB Resources</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
           <li><b>phpBB Links</b></li>
         <li><a href="http://www.phpbb.com">phpBB.com</a></li>
            <li><a href="http://www.phpbb.com/downloads">Downloads</a></li>
            <li><a href="http://www.phpbb.com/shop">Shop</a></li>
            <li><a href="http://www.phpbb.com/community">Forums</a></li>
            <li><b>phpBB Development</b></li>
         <li><a href="http://area51.phpbb.com">Area 51</a></li>
            <li><a href="http://www.phpbb.com/development">Trackers</a></li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
</ul>
}

5)Getting the right CSS look
Open 'pro_dropdown6.css' and replace CSS code with the following to create formatting like here on STG:

Spoiler:

Code: Select all

.preload1 {
background: url('./images/six_0a.gif');
}

.preload2 {
background: url('./images/six_1a.gif');
}

#nav {
   padding:0;
   margin: 0;
   list-style:none;
   height:33px;
   background: url('./images/six_0.gif') repeat-x;
   position:relative;
   z-index:200;
   font-family: arial, verdana, sans-serif;
}

#nav li.top {
   display:block;
   float: left;
}

#nav li a.top_link {
   display:block;
   float: left;
   height:33px;
   line-height:31px;
   color:#FFF;
   text-decoration:none;
   font-size:12px;
   font-weight:bold;
   padding:0 0 0 12px;
   cursor:pointer;
   background: url('./images/six_0.gif');
}

#nav li a.top_link span {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
   background: url('./images/six_0.gif') right top no-repeat;
}

#nav li a.top_link span.down {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
   background: url('./images/six_0a.gif') no-repeat right top;
}

#nav li:hover a.top_link,
#nav a.top_link:hover {
   color:#FFF;
   background: url('./images/six_1.gif') no-repeat;
}

#nav li:hover a.top_link span,
#nav a.top_link:hover span {
   background: url('./images/six_1.gif') no-repeat right top;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
   background: url('./images/six_1a.gif') no-repeat right top;
   padding-bottom:3px;
}

#nav table {
   border-collapse:collapse;
   padding:0;
   margin:0;
   position:absolute;
   left:0;
   top:0;
}

#nav li:hover {
   position:relative;
   z-index:200;
}

#nav a:hover {
   position:relative;
   white-space:normal;
   z-index:200;
}

#nav :hover ul.sub {
   left:1px;
   top:34px;
   background-color: #000;
   padding:3px;
   border: 1px solid #FFF;
   white-space:nowrap;
   width:185px;
   height:auto;
   z-index:300;
   font-weight:bold;
}

#nav :hover ul.sub li {
   display:block;
   height:20px;
   position:relative;
   float:left;
   width:185px;
   font-weight:bold;
}

#nav :hover ul.sub li a {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   text-indent:5px;
   color:#3365ac;
   text-decoration:none;
   font-weight:bold;
}

#nav li ul.sub li a.fly {
   background: url('./images/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
   color:#3365ac;
   background-color: #FFF;
   border-color:#FFF;
   font-weight:bold;
}

#nav :hover ul.sub li a.fly:hover {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
}

#nav li b {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   margin-bottom:3px;
   text-indent:6px;
   color:#FFF;
   border-bottom:1px solid #FF8A19;
   cursor:default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left:89px;
   top:-4px;
   padding:3px;
   border:1px solid #000;
   white-space:nowrap;
   width:183px;
   z-index:400;
   height:auto;
}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > ul {
   left: 183px; /* distance from right margin of main drop */
   top: -4px;
   background-color: #000;
   padding: 3px;
   border: 1px solid #FFF;
   white-space: nowrap;
   width: 185px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > a.fly {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
   font-weight: bold;
   text-decoration:none;
}

#nav li:hover li:hover > li a.fly {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
   font-weight: bold;
   text-decoration:none;
}

6) Save All your changes and Upload -- Don't forget to purge your cache -- Your users may have to clear their local cache before it will appear correctly.

You will need to go through your site and remove duplicate links you no longer need that are in the menu bar. Also please note that if you have an over-sized site logo, this menubar will be displaced like it is in the below image versus where it is positioned on STG which uses a logo with a height of 100px

This will generate a menu that looks like this:


Extras:
Images - Different Images for the menu bar and rollover effect - you can create your own images and replace the existing ones like we have here on STG (also you can compare the 1st and 2nd screen shots for differences)
Colors Used - You can edit the CSS file to generate any color scheme you want! There are limitless possibilities!
Adding/Removing Links - You can add or remove links by simply mimicking the code around where you are trying to put the link.
Fixed Width vs Full Screen - More to Come!

Any requests for support can be placed in this topic related to changing colors and adding or removing links... but PLEASE consider the difficulty of this change before you attempt it.

[Jaymie1989]

Thanks for this.

Any chance of one for prosilver?

[Ika]

Thanks for this.

Any chance of one for prosilver?

you mean like this? http://www.shadowflames.us/

I will release it when I release this new style... I have some tweaks to make.

[topdown]

Thanks for this.

Any chance of one for prosilver?

you mean like this? http://www.shadowflames.us/development/ ... p?style=34

I will release it when I release this new style... I have some tweaks to make.

Hey Ika, just so you know I get an error when I use your sites link

General Error
Could not get style data

Please notify the board administrator or webmaster: forum_info@shadowflames.us

I'm assuming style 34 is no longer there ???

[Ika]

Thanks for this.

Any chance of one for prosilver?

you mean like this? http://www.shadowflames.us/development/ ... p?style=34

I will release it when I release this new style... I have some tweaks to make.

Hey Ika, just so you know I get an error when I use your sites link

General Error
Could not get style data

Please notify the board administrator or webmaster: forum_info@shadowflames.us

I'm assuming style 34 is no longer there ???

It is style 49 now... I updated it in the release thread... it is also the default theme on the site now

[darjana]

thanks alot. i have done it. but i need some minor help. how to stick the drop menu to the black bar at top ?



*Edit: Manage to find the cause. *PYRAMID logo*

[mrmax Max Lexandre]

It's Vista, i like

But 2 little things happens:




That new mensagens are not working well here .....



**** I see now, only in portuguese language that happens!

[Ika]

thanks alot. i have done it. but i need some minor help. how to stick the drop menu to the black bar at top ?

*Edit: Manage to find the cause. *PYRAMID logo*

yep, have to use a smaller logo... that is why the STG one "appears" anchored, but it really isn't.

[mrmax Max Lexandre]

Firefox Error, Wen i enter it gives this problem in Menu:







PS: In STG, with firefox the menu appears....

[Ika]

1) is all your cache cleared and your template refreshed?

If so, try turning on "recompile stale style components" in the ACP Load Settings... you can turn it off again later.