Written by RMcGirr83
With the help of this documentation, you can get a slide down menu for your forum. In this post I will show you how to get a drop down that looks like this:
onto your prosilver based style. For subsilver2, you're on your own but the edits will be very similar
» phpBB modification
The very first step you do is go to this site and download the files. Once downloaded, upload the files into your styles theme folder keeping the directory structure (eg, styles/prosilver/theme/pro_dropdown_6/pro_dropdown_6.css). You only have to upload the pro_dropdown_6.css, arrow.gif and arrow_over.gif files. Then take this code
Code: Select all
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#nav {
padding:0;
margin: 0;
list-style:none;
height:33px;
/* position:absolute;*/
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;
}
#nav li a.top_link span {
float: left;
display:block;
padding:0 24px 0 12px;
height:33px;
}
#nav li a.top_link span.down {
float: left;
display:block;
padding:0 24px 0 12px;
height:33px;
}
#nav li:hover a.top_link,
#nav a.top_link:hover {
color:#ff0000;
}
#nav li:hover a.top_link span,
#nav a.top_link:hover span {
}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
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: #DCDEE2;
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('{T_THEME_PATH}/pro_dropdown_6/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('{T_THEME_PATH}/pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
color:#D31141;
}
#nav li b {
display:block;
font-size:11px;
height:18px;
width:183px;
line-height:18px;
margin-bottom:3px;
text-indent:6px;
color:#000;
border-bottom:1px solid #7fffff;
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: #DCDEE2;
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('{T_THEME_PATH}/pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
color:#DCDEE2;
font-weight: bold;
text-decoration:none;
}
#nav li:hover li:hover > li a.fly {
background: #FFF url('{T_THEME_PATH}/pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
color:#DCDEE2;
font-weight: bold;
text-decoration:none;
}
OPEN
styles/prosilver/theme/stylesheet.css
FIND
Code: Select all
@import url("colours.css");
Code: Select all
@import url("pro_dropdown_6/pro_dropdown_6.css");
styles/prosilver/template/overall_header.html
FIND
Code: Select all
<a id="top" name="top" accesskey="t"></a>
Code: Select all
<div id="drop_down">
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></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">{L_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>{L_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">{L_UCP_MAIN}</a></li>
<li><a href="./ucp.php?i=164">{L_UCP_PROFILE}</a></li>
<li><a href="./ucp.php?i=165">{L_UCP_PREFS}</a></li>
<li><a href="./ucp.php?i=166">{L_PRIVATE_MESSAGES}</a></li>
<li><a href="./ucp.php?i=167">{L_UCP_USERGROUPS}</a></li>
<li><a href="./ucp.php?i=168">{L_UCP_ZEBRA}</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ENDIF -->
<!-- IF U_MCP -->
<li><b>{L_MODERATORS}</b></li>
<li><a href="{U_MCP}">{L_MCP}</a></li>
<!-- ENDIF -->
<!-- IF U_ACP -->
<li><b>{L_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">{L_FORUM}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>{L_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 -->
<!-- IF S_USER_LOGGED_IN -->
<li><b>{L_MANAGE}</b></li>
<!-- IF U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
<!-- IF U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
<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>{L_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>{L_COMMON_SEARCHES}</b></li>
<li><a href="{U_SEARCH}">{L_SEARCH_ADV}</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ENDIF -->
</ul>
</div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
Code: Select all
<ul class="linklist navlinks">
Code: Select all
<ul class="linklist">
FIND
Code: Select all
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="icon-ucp">
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> •
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- IF U_RESTORE_PERMISSIONS --> •
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->
<ul class="linklist rightside">
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>
Remove it
OPEN
styles/prosilver/template/viewforum_body.html
FIND
Code: Select all
<!-- IF not S_IS_BOT and U_MARK_FORUMS -->
<ul class="linklist">
<li class="rightside"><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li>
</ul>
<!-- ENDIF -->
FIND
Code: Select all
<!-- IF not S_IS_BOT and U_MARK_TOPICS --><a href="{U_MARK_TOPICS}" accesskey="m">{L_MARK_TOPICS_READ}</a> • <!-- ENDIF -->
FIND
Code: Select all
<!-- IF TOTAL_TOPICS and not S_IS_BOT and U_MARK_TOPICS --><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a> • <!-- ENDIF -->
OPEN
includes/functions.php
FIND
Code: Select all
// gzip_compression
Code: Select all
// BEGIN CSS Menu Drop Down
$user->add_lang('ucp');
// END CSS Menu Drop Down
language/en/common.php
FIND
Code: Select all
'PROFILE' => 'User Control Panel',
Code: Select all
// BEGIN CSS Menu Drop Down
'CONTROL_PANEL' => 'Control Panel',
'MANAGE' => 'Manage',
'COMMON_SEARCHES' => 'Common Searches',
// END CSS Menu Drop Down
Well that's because the drop down css isn't setup for the correct coloring for whatever style you are using. So you also need to edit the pro_drowdown_6.css file for your style. A few hintsSome User wrote:But Rich, the drop down is f-ugly and doesn't match my style at all.
#FF0000 represents the color that the wording changes to when someone mouses over the menu
#DCDEE2 represents the background color of the drop downs
#7fffff represents the underline of the dropdown headers
When all is said and done, you should, hopefully, end up with something that looks like the pic above.
It won't look exactly like that because I have other things in my menu, but close enough.
![Smile :)](./images/smilies/icon_e_smile.gif)
Good luck and any problems, post up!!