Jump to content


Welcome to DevFuse Forums


Sign In  Log in with Facebook

Create Account
Welcome to DevFuse Forums, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of DevFuse Forums by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
 
Guest Message by DevFuse

Tutorial info Visit support topic

  • Added on: May 07 2011 06:42 PM
  • Views: 5175
 


Add a Top Menu Dropdown like IPS website

Posted by najaru on May 07 2011 06:42 PM
Add a Top Menu Dropdown like IPS website


STEP 1

Open ACP - Look&Feel - template - select your skin - globaltemplate

find:
<div id='header'>
				<div id='branding'>
					<if test="brandingBar:|:method_exists( $this->registry->output->getTemplate( $this->registry->getCurrentApplication() . '_global' ), 'overwriteHeader' )">
						{parse template="overwriteHeader" group="{current_app}_global" params=""}

and add before:


<!-- ADDITIONAL IPS DROPDOWN MENU BEGIN -->
<style>
#callout {
background: #f7f0d2;
padding: 10px 0;
text-align: center;
color: #7d6812;
}
</style>
<!-- <div id='callout'>
We are aware of ongoing network issues and are working to bring customer communities back online as quickly as possible. Thank you for your understanding.
</div> --> <script type='text/javascript' src='{$this->settings['board_url']}/public/js/top_menu_ips.js'></script>


<style type='text/css'>

/*365b86 general color background*/

/*416a9a primary hover background and dropdown background*/

/*edf001 text hover color*/


#masthead {
	color: #fff;
	height: 35px;
	background: #365b86;
}

/*0d253e*/

#ips_main_branding {
	margin-top: 8px;
	margin-left: 10px;
display: block;
float: right;
}

#primary_navigation {
	margin-top: 3px;
	margin-right: 15px;
	float: right;
	position: relative;
	z-index: 10000;
}

	#primary_navigation li {
		float: left;
		font-size: 14px;
		margin-right: 22px;
		text-shadow: #0a1a2b 1px 1px 2px;
		font-family: helvetica, arial, tahoma, sans-serif;
	}
		
		#primary_navigation li:last-child {
			margin-right: 0px;
		}
		
		#primary_navigation li {
			float: left;
			font-size: 14px;
			margin-right: 15px;
		}
		
			#primary_navigation > li > a {
				display: block;
				padding: 7px 8px;
				color: #fff;
				text-decoration: none;
			}
			
			#primary_navigation li a:hover,
			#primary_navigation li.active > a {
				background: #416a9a;
				color: #edf001;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
			}
			
	#primary_navigation .main_menu {
		display: block;
		background: #416a9a;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		z-index: 50000;
		margin-top: -5px;
		padding: 10px 5px 5px;
		min-width: 150px;
	}
	
		#primary_navigation .main_menu li {
			display: block;
			font-size: 12px;
			padding: 4px 6px;
			float: none;
		}
			
			#primary_navigation .main_menu li a {
				text-decoration: none;
				color: #fff;
				display: block;
				padding: 4px;
				text-shadow: none;
			}
			
			#primary_navigation .main_menu li a:hover {
				color: #edf001;
			}
	
	#primary_navigation .main_menu li.indent {
		padding: 1px 6px 1px 20px;
	}
	#primary_navigation .main_menu li.sep {
		padding-top: 8px;
		margin-top: 8px;
		border-top: 1px solid #2f4259;
	}
</style>

<div id='masthead'>
		<ul id='primary_navigation'>
					<li id='nav_home' class='left'><a href='http://www.invisionpower.com'>IPS Home Page</a></li>

					<li id='nav_products'>
						<a href='http://www.invisionpower.com/suite/'>Our Suite</a>
						<ul id='nav_products_menu' class='main_menu'>
							<li><a href='http://www.invisionpower.com/suite/' title='Ths IPS Platform'>The IPS Platform</a></li>
							<li><a href='http://www.invisionpower.com/products/' title='Product Line-up'>Product Line-up</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/board/' title='IP.Board: Community Discussion Board'>IP.Board</a></li>
<li class='indent'><a href='http://www.invisionpower.com/products/nexus/' title='IP.Nexus'>IP.Nexus</a></li>

							<li class='indent'><a href='http://www.invisionpower.com/products/blog/' title='IP.Blog: Community Blogging Service'>IP.Blog</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/content/' title='IP.Content: Content Creation System'>IP.Content</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/gallery/' title='IP.Gallery: Community Image Gallery'>IP.Gallery</a></li>

							<li class='indent'><a href='http://www.invisionpower.com/products/chat/' title='IP.Chat: Realtime Community Chatroom'>IP.Chat</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/downloads/' title='IP.Downloads: Download Manager'>IP.Downloads</a></li>
							<li class='sep'><a href='http://www.invisionpower.com/products/spammonitor/' title='Spam Monitoring: Protecting Communities From Spam'>Spam Monitoring</a></li>

							<li><a href='http://www.invisionpower.com/suite/convert.php' title='Convert to an IPS community'>Convert to IPS</a></li>
							<li><a href='http://www.invisionpower.com/suite/requirements.php' title='Suite requirements'>Suite Requirements</a></li>
							<li><a href='http://www.invisionpower.com/suite/demo.php' title='Try our suite free'>Try our suite free</a></li>
						</ul>
						<script type='text/javascript'>
							ips.menus['products'] = new ips.menu( $('nav_products'), $('nav_products_menu') );
						</script>

					</li>

					<li id='nav_hosted'>
						<a href='http://www.invisionpower.com/hosting/'>Hosted Communities</a>
						<ul id='nav_hosted_menu' class='main_menu'>
							<li><a href='http://www.invisionpower.com/hosting/' title='Go to standard packages'>Standard Packages</a></li>
							<li><a href='http://www.invisionpower.com/hosting/advanced.php' title='Go to Advanced packages'>Advanced Packages</a></li>
						</ul>
						<script type='text/javascript'>
							ips.menus['hosted'] = new ips.menu( $('nav_hosted'), $('nav_hosted_menu') );
						</script>

					</li>
					<li id='nav_services'>
						<a href='http://www.invisionpower.com/services/' title='Go to our Services overview'>Services</a>
					</li>
					<li id='nav_support'>

						<a href='#'>Support</a>
						<ul id='nav_support_menu' class='main_menu'>

							<li><a href='http://community.invisionpower.com/resources/official.html' title='Go to the resource site'>Documentation</a></li>
							<li><a href='http://www.invisionpower.com/customer/' title='Go to the client area'>Client Area</a></li>
							<li><a href='http://community.invisionpower.com/resources/index.html' title='Go to the resource site'>Client Resources</a></li>
							<li><a href='http://community.invisionpower.com' title='Our community support forums'>IPS Community</a></li>

							<li><a href='http://www.invisionpower.com/company/faq.php' title='Go to the FAQs'>FAQs</a></li>
							<li><a href='http://www.invisionpower.com/hosting/status.php' title=''>Network Status</a></li>

						</ul>
						<script type='text/javascript'>
							ips.menus['support'] = new ips.menu( $('nav_support'), $('nav_support_menu') );
						</script>
					</li>
					<li id='nav_clientarea'>
						<a href='http://www.invisionpower.com/customer/' title='Go to the client area'>Client Area</a>
					</li>
					<li id='nav_store'>
						<a href='http://www.invisionpower.com/store/' title='Go to the store'>Store</a>

					</li>
					<li id='nav_contact'><a href='http://www.invisionpower.com/company/contact.php' title='Get in touch'>Contact Us &raquo;</a></li>
							
				</ul>
			</div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2199880-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<!-- ADDITIONAL IPS DROPDOWN MENU END -->


you can change color, changing this code in style section
365b86 general color background*/

416a9a primary hover background and dropdown background*/

edf001 text hover color*/


STEP 2
download the attached file, unzip it, is a .js file. you have to upload it in your /public/js folder


STEP 3
Customize the menu code with your link

Attached Files


Powered by Tutorials 1.5.1 © 2016, by Michael McCune