CSS Pro Dropdown Menu

Guides & Snippets for phpBB3. Try the Snippets here and share Your own Snippets
There is no support here! Only Read Access!
Locked
cisco007
BBCoder VI
BBCoder VI
Posts: 1015
Joined: 16 Mar 2010, 18:14
Location: Don't really know!

Re: CSS Pro Dropdown Menu

Post by cisco007 »

which color did you put? i put my mouse on your menu and the color changes to red!
Top
User avatar
Ephemeraboy
BBCoder II
BBCoder II
Posts: 37
Joined: 09 Mar 2010, 04:03
Location: bonatius.com
Contact:
Contact Ephemeraboy

Re: CSS Pro Dropdown Menu

Post by Ephemeraboy »

@ cisco
I turn it to beginning
because, when i changed the colour,
when i put mouse there, the colour doesn't changed...
soon i will change the colour...
as a proof
thx very much cisco for your help :)
My Personal Blog
http://www.bonatius.com
Top
Kozley
BBCoder II
BBCoder II
Posts: 6
Joined: 07 Jul 2010, 07:39

Re: CSS Pro Dropdown Menu

Post by Kozley »

Great tutorial! But I have a problem with PBWoW (template), it have different code I try to put it and PBWoW have own configuration on ACP for menu.

Like here I put the code on configuration:

Code: Select all

<div id="drop_down"> 
               <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>
Little code get error design so I removed

Code: Select all

              <div class="headerbar">
                 <div class="inner"><span class="corners-top"><span></span></span>
, it works but problem is dropdown menu does not good effect, see the pic
dropdownmenu_error.jpg
Overall_header.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
<!-- IF S_ENABLE_FEEDS -->
	<link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" />
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_TOPICS}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="pbwow, pbunderground, phpbb, forum, skin, style, warcraft, world of warcraft, worldofwarcraft, diablo, new, pbunderground.com, pbwow.com, world, vbulletin, wow, custom, official, fan" />
<meta name="description" content="" />
{META}
<title>{SITENAME} -> <!-- IF S_IN_MCP -->{L_MCP} -> <!-- ELSEIF S_IN_UCP -->{L_UCP} -> <!-- ENDIF -->{PAGE_TITLE}</title>

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>

<link href="styles/pbwow/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_IMAGESET_PATH}/favicon.ico" rel="shortcut icon" />

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script> 
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/js/detection.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/js/forum.js"></script>
<script type="text/javascript">
	if(Browser.ie7) {
		addStylesheet('styles/pbwow/theme/wow/fixes/additional-win-ie7.css');
		}
	else if(Browser.ie6) {
		addStylesheet('styles/pbwow/theme/wow/fixes/additional-win-ie.css');
		}
	else if(Browser.opera) {
		addStylesheet('styles/pbwow/theme/wow/fixes/additional-win-opera.css');
		}
	else if(Browser.safari && !Browser.safari3) {
		addStylesheet('styles/pbwow/theme/wow/fixes/additional-mac-safari.css');
		}
</script>
</head>


<body id="phpbb" <!-- IF .searchresults and not S_SHOW_TOPICS -->onload="javascript:init();"<!-- ENDIF --> <!-- IF S_VIEWING_INDEX -->class="indexbg"<!-- ENDIF -->>
<div class="outer-container"><!-- Needed for Bnet theme -->

<div id="shared_topnav" class="tn_forums">
	<div class="topnav">
		<div class="tn_interior">
			<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
			<span style="color:#FF0000; float:left; padding-left:20px">{L_INFORMATION}: {L_BOARD_DISABLED}</span>
			<!-- ENDIF -->
			<!-- IF U_PORTAL --><a href="{U_PORTAL}">{L_PORTAL}</a><img src='{T_IMAGESET_PATH}/topnav_div.gif'/><!-- ENDIF -->
			
			<!-- IF PBWOW_TOPNAV_CODE -->{PBWOW_TOPNAV_CODE}<!-- ENDIF -->
			
			<img src='{T_IMAGESET_PATH}/topnav_div.gif'/>
			<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
			<!-- IF S_USER_NEW_PRIVMSG --><img src='{T_IMAGESET_PATH}/topnav_div.gif'/><a href="{U_PRIVATEMSGS}" style="color:#FF0000; ">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF -->
		</div>
	</div>
	<div class="tn_push"></div>
</div>

<a id="top" name="top" accesskey="t"></a>
<!-- headers/links -->
<div id="header">
	<div class="logo-container">
		<div class="logo-right">
			<h1 class="wow-logo"></h1>
			<a class="ielink" href="{U_INDEX}"></a>
		</div>
	</div>
</div>
<div class="gryph-container">
	<div class="gryph-z">
		<span class="left-gryphon"></span>
		<span class="right-gryphon"></span>
	</div>
	<!--[if lte IE 6]>
<img src="{T_IMAGESET_PATH}/pixel.gif" border="0" width="775" height="1" alt="" />
<![endif]-->
</div>

<!-- IF S_QUICK_STYLE_OPTIONS -->
<div id="style-switcher" style="z-index:7000;">
	<div class="language-switcher-container">
		<h1 class="theme-title"></h1>
		<div class="language-selector">
		<form action="{S_QUICK_STYLE_ACTION}" method="post">
			<select name="prime_quick_style" id="prime_quick_style" class="gray" onchange="this.form.submit();">
				{S_QUICK_STYLE_OPTIONS}
			</select>
			<noscript>
			<div style="display:inline;">
				<input type="submit" value="&nbsp;" style="height:19px; width:21px; background:url({T_IMAGESET_PATH}/jump-button.gif) no-repeat; border:none; cursor:pointer" />
			</div>
			</noscript>
		</form>
		</div>
	</div>
</div>
<!-- ENDIF -->

<!-- IF not S_VIEWING_INDEX -->
<div class="drop-shadow"></div>
<!-- ENDIF -->

<!-- IF U_ACP --><div class="admin-shortcuts" style="position:fixed; z-index:999;"><a href="{U_ACP}" class="quickadmin"></a>
<!-- IF U_WATCH_TOPIC --><a href="{U_WATCH_TOPIC}" class="view-sub"></a><!-- ENDIF --></div><!-- ENDIF -->
You can find the code for configuration on ACP and red design as you can see on the pic:

Code: Select all

<div id="shared_topnav" class="tn_forums">
	<div class="topnav">
		<div class="tn_interior">
			<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
			<span style="color:#FF0000; float:left; padding-left:20px">{L_INFORMATION}: {L_BOARD_DISABLED}</span>
			<!-- ENDIF -->
			<!-- IF U_PORTAL --><a href="{U_PORTAL}">{L_PORTAL}</a><img src='{T_IMAGESET_PATH}/topnav_div.gif'/><!-- ENDIF -->
			
			<!-- IF PBWOW_TOPNAV_CODE -->{PBWOW_TOPNAV_CODE}<!-- ENDIF -->
			
			<img src='{T_IMAGESET_PATH}/topnav_div.gif'/>
			<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
			<!-- IF S_USER_NEW_PRIVMSG --><img src='{T_IMAGESET_PATH}/topnav_div.gif'/><a href="{U_PRIVATEMSGS}" style="color:#FF0000; ">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF -->
		</div>
	</div>
	<div class="tn_push"></div>
</div>
<!-- IF PBWOW_TOPNAV_CODE -->{PBWOW_TOPNAV_CODE}<!-- ENDIF -->

Original menu
pbwow_orginal.jpg
What is the problem?
Top
User avatar
Steve
BBCoder VI
BBCoder VI
Posts: 803
Joined: 05 Mar 2010, 01:10
Extra Rank: Donator.png
BBCodes: 2000
Favourite BBCode: porn tube
Favourite MOD: Non of Stokers
Location: up your bum
Contact:
Contact Steve

Re: CSS Pro Dropdown Menu

Post by Steve »

just looks like you need to refresh your styles theme via ACP,and web browser!
NAPWR wrote: Nice, Stoker is Hot
Top
Kozley
BBCoder II
BBCoder II
Posts: 6
Joined: 07 Jul 2010, 07:39

Re: CSS Pro Dropdown Menu

Post by Kozley »

Steve© » 08 Jul 2010, 18:44 wrote:just looks like you need to refresh your styles theme via ACP,and web browser!
I did. It doesnt still works
Top
User avatar
Steve
BBCoder VI
BBCoder VI
Posts: 803
Joined: 05 Mar 2010, 01:10
Extra Rank: Donator.png
BBCodes: 2000
Favourite BBCode: porn tube
Favourite MOD: Non of Stokers
Location: up your bum
Contact:
Contact Steve

Re: CSS Pro Dropdown Menu

Post by Steve »

Ok,can i have link to your web site?
also need to add the language edits.
NAPWR wrote: Nice, Stoker is Hot
Top
Kozley
BBCoder II
BBCoder II
Posts: 6
Joined: 07 Jul 2010, 07:39

Re: CSS Pro Dropdown Menu

Post by Kozley »

Steve© » 08 Jul 2010, 18:55 wrote:Ok,can i have link to your web site?
also need to add the language edits.
http://www.blizzspot.com/test/

I have successful to get the menu to the right position in topnav but still problem with just url form e.g {L_BOARD_DISABLE}, {L_LOGIN_LOGOUT} and more

I have already to added the language edits
Top
User avatar
Steve
BBCoder VI
BBCoder VI
Posts: 803
Joined: 05 Mar 2010, 01:10
Extra Rank: Donator.png
BBCodes: 2000
Favourite BBCode: porn tube
Favourite MOD: Non of Stokers
Location: up your bum
Contact:
Contact Steve

Re: CSS Pro Dropdown Menu

Post by Steve »

If you have already added to the language and functions.php files
done this correctly:
OPEN

includes/functions.php

FIND

Code: Select all

// gzip_compression
BEFORE, ADD

Code: Select all

// BEGIN CSS Menu Drop Down	
	$user->add_lang('ucp');
// END CSS Menu Drop Down
OPEN

language/en/common.php

FIND

Code: Select all

	'PROFILE'				=> 'User Control Panel',
AFTER ADD

Code: Select all

// BEGIN CSS Menu Drop Down
	'CONTROL_PANEL'			=> 'Control Panel',
	'MANAGE'				=> 'Manage',
	'COMMON_SEARCHES'		=> 'Common Searches',
// END CSS Menu Drop Down
try purging the cache ubder the general tab in ACPANEL.
NAPWR wrote: Nice, Stoker is Hot
Top
Kozley
BBCoder II
BBCoder II
Posts: 6
Joined: 07 Jul 2010, 07:39

Re: CSS Pro Dropdown Menu

Post by Kozley »

Steve© » 08 Jul 2010, 20:10 wrote:If you have already added to the language and functions.php files
done this correctly:
OPEN

includes/functions.php

FIND

Code: Select all

// gzip_compression
BEFORE, ADD

Code: Select all

// BEGIN CSS Menu Drop Down	
	$user->add_lang('ucp');
// END CSS Menu Drop Down
OPEN

language/en/common.php

FIND

Code: Select all

	'PROFILE'				=> 'User Control Panel',
AFTER ADD

Code: Select all

// BEGIN CSS Menu Drop Down
	'CONTROL_PANEL'			=> 'Control Panel',
	'MANAGE'				=> 'Manage',
	'COMMON_SEARCHES'		=> 'Common Searches',
// END CSS Menu Drop Down
try purging the cache ubder the general tab in ACPANEL.
Hmm... its same code I have put and did tryed puring the cache. It does same problem
Top
cisco007
BBCoder VI
BBCoder VI
Posts: 1015
Joined: 16 Mar 2010, 18:14
Location: Don't really know!

Re: CSS Pro Dropdown Menu

Post by cisco007 »

where and how exactly are you editing these files, because i do not see the .css file added to the stylesheet.css file?
Top
Locked

Return to “Snippets”