Jump to content
Sign in to follow this  
mickradford

Replace search box in nav_row with an .mp3 player

Recommended Posts

mickradford

Hey gang, I'd like to replace the default search box in the nav_row with a small button that launches a pop up MP3 player. I have everything I need for the player just looking for some guidance on how I would place the button in the nav_row. Thanks!

Share this post


Link to post
Share on other sites
cshoffmann

Hi this must be done with a pagelines hook. Watch this video about hooks and let us know if you were able to do it. http://www.pagelines.com/docs/base-child-theme FYI: it will require you to hide the search form in settings and then in the PlatformPro Base theme edit the functions.php file. I have not tried this to test, but here is what I think you will be looking to do something like: In functions.php: add_action('pagelines_inside_top_primary-nav', 'add_mp3_player'); function add_mp3_player(){?>Insert HTML for player here, adjust css within html to position exactly how you want it to appear. <?php} Good luck! Remember to have a back up of the original functions.php file in case you need to start over.

Share this post


Link to post
Share on other sites
mickradford

Excellent - I'll give that a shot and let you know. Thanks!

Share this post


Link to post
Share on other sites
mickradford

Ok, I had experimented with the hooks before but I couldn't quite get it into the position I wanted. Tonight I dove in a little harder and tried all the hooks - the one that got me closest was inside_bottom_primay... Here's the code fromthe functions file:

add_action('pagelines_inside_bottom_primary-nav', 'add_player_to_nav');
	
	function add_player_to_nav(){
		?>
	    <div id="player" class="global">
	   	<span>Launch Player</span>
		<?php }[/code]

	
	And Here's the CSS:
	
[code]#player{ float:right; } #player_btn { display: block; width: 210px; height: 28px; background: url("http://www.michelleleigh.com/images/site/player_button.png") no-repeat 0 0; } #player_btn:hover { background-position: 0 -28px; } #player_btn span { position: relative; top: -999em; }
Now the code and the CSS both work and make a nice little roll-over effect. The problem is this - as it is now the button shows up under the nav_bar. When I try to cheat it up where I want it (in line with the navigation) by throwing
margin-top:-2em;

onto the player I lose the link and the rollovers. tried adding it to the button itself other funky results. This is all nitpicky, I could skip the rollover and have the button work but if anybody has a suggestion I'd appreciate it. Alternately, I'm not against embedding the code directly withing the sectio / nav file - I just don't know where to put it or how it would work with the clearfix Oh, this is all living at www.red13.net at present. thanks :-)

Share this post


Link to post
Share on other sites
Kate

Hey Mick, Have you tried absolute positioning?

Share this post


Link to post
Share on other sites
mickradford

Toyed with that but can't get all the elements to play together - trying to keep this bulletproof. Keep in mind I know just enough PHP & CSS to be dangerous so please sing out if I'm making obvious mistakes.

Share this post


Link to post
Share on other sites
mickradford

Ok, here's the final fix (if anyone is curious) The PHP:

function section_template() {
		global $post; 			?>
		<div id="nav_row" class="main_nav fix">
	<?php
		if(function_exists('wp_nav_menu')){
		wp_nav_menu( array('menu_class'  => 'main-nav'.pagelines_nav_classes(), 'container' => null, 'container_class' => '', 'depth' => 3, 'theme_location'=>'primary', 'fallback_cb'=>'pagelines_nav_fallback') );
	
			}else{ pagelines_nav_fallback(); }
	
			if(!pagelines_option('hidesearch')){ get_search_form(); }
	
			?>
			<div id="player" class="global">
	   	<span>Launch Player</span>
	   	</div>
		</div>
	
	<?php }[/code]

	
	The CSS:
	
[code]#player{float:right;} #player_btn{ display: block; width: 210px; height: 28px; background: url("http://www.michelleleigh.com/images/site/player_button.png") no-repeat 0 0; } #player_btn:hover{ background-position: 0 -28px; } #player_btn span{ position: relative; top: -999em; } #primary-nav ul.main-nav.nosearch{ width:740px; }
Two notes/issues: 1. I had to make the changes in the main platformpro theme, when I tried adding it to the child theme it didn't take. Will eventually need help on this so future updates don't kill it. 2. I manually changed the width of
#primary-nav.ul.main-nav.nosearch

if there's a better way of doing this let me know. Thanks for all the input.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×