Adding PixoPoint Drop-down Menus to Flexibility 2 and FlexSqueeze

Wednesday, December 2nd, 2009 at 10:49 am

pixopoint-multi Until I get a chance to update the actual theme code and integrate my own drop-down menu, here’s a pretty easy fix for both themes that allow for integration of the PixoPoint menu plugin by Ryan Hellyer.

The plugin not only does a good job with the suckerfish menu, but it also makes it very easy to customize your menu. Add drop-down categories, include or exclude pages, add custom code and even add a search box in your menu. I’ve worked with the plugin extensively integrating it into another theme, but here’s the quick solution to using PixoPoint with Flexibility 2 and FlexSqueeze.

Edit the header.php file

The first thing you want to do is go into the ‘Editor’ option under the Appearance tab in WordPress. Find your header.php file and click on it to open the code in the edit box.

If editing code is not your thing, you can always just highlight all the code (Ctrl-A), copy (Ctrl-C) and paste into Notepad or some other text editor. That way if you break it you can always just paste it back in and save it back to the default.

First, depending on if your navigation is above the header or below it, that will determine which code to edit.

Navigation above the header

If your navigation is above the header, look for this line of code:

^?View Code PHP

<?php if ($flex_nav_position == "above") { ?>

Enter the following code immediately after the line above:

^?View Code PHP

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} else { ?>

And lastly, add this line of code immediately after the </div> tag 10 lines down:

^?View Code PHP

<?php } ?>

Your final revised code will look like this:

^?View Code PHP

<?php if ($flex_nav_position == "above") { ?>
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} else { ?>
<div id="nav" style="clear:both;">
  <ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
  </ul>
  <div class="clearer"></div>
</div>
<?php } ?>
<?php } else { ?>
<?php } ?>

The code above can simply be copied and pasted into your header.php file if you’d rather not add the individual lines.

Navigation below the header

Adding the PixoPoint menu into your navigation below the header is almost identical to the process above, you are just inserting the code lower in your header code. So if your navigation is located below your header, look for the following line of code in the header.php file:

^?View Code PHP

<?php if ($flex_nav_position == "below") { ?>

To make this easy, just copy the code below and replace all the code from the line above to the end of the header.php file:

^?View Code PHP

<?php if ($flex_nav_position == "below") { ?>
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} else { ?>
<div id="nav" style="clear:both;">
  <ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
  </ul>
  <div class="clearer"></div>
</div>
<?php } ?>
<?php } else { ?>
<?php } ?>

That’s it for the header.php modifications. Now we’ll add the CSS code to style the menu.

Edit the style.php file

Whether you’re using Flexibility 2 or FlexSqueeze, you’ll need to add the following code to the style.php file in order for the menus to look good and be able to customize the colors via the theme options.

If you’re using Flexibility 2, you will not need to resave your theme settings in order to preview the changes, but with FlexSqueeze, you’ll need to resave your theme settings after editing the style.php file in order to rewrite the style sheet.

Go into your file editor in WP and open the style.php file. Copy and paste the following code at the very bottom of the file.

^?View Code CSS

/*-- PixoPoint Menu CSS  --*/
 
#pixopoint_menu1 {
	width:100%;
	height:33px;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png") repeat-x;
	background-position:50% 0;
	margin:0;}
#pixopoint_menu1 ul {
	width:100%;
	border:none;
	background:none;
	margin:0;
	padding:0;
	list-style:none;
	}
#pixopoint_menu1 li {
	border:none;
	background:none;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png");
	color:#<?php echo $flex_nav_txtclr; ?>;
	line-height:33px;
	z-index:20;
	letter-spacing:0px;
	background:;
	font-weight:bold;
	font-size:12px;
	padding:0;
	margin:0 0px;
	;float:left;
	font-family:tahoma,sans-serif;
	position:relative;
	}
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
	background:#<?php echo $flex_nav_tabhvr; ?> url("images/navfhleft.png");
	}
#pixopoint_menu1 li a {
	border:none;
	background:none;
	text-decoration:none;
	display:block;
	padding:0 12px;
	color:#<?php echo $flex_nav_txtclr; ?>;
	}
#pixopoint_menu1 li a:hover {
	border:none;
	background:none;
	text-decoration:none;
	color:#<?php echo $flex_nav_hvrcolor; ?>;
	background-position:100% -150px;
	}
#pixopoint_menu1 ul ul {
	position:absolute;
	left:-999em;
	top:33px;
	width:150px;
	}
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
	left:auto;
	}
#pixopoint_menu1 ul ul li a {
	padding:4px 10px;
	text-transform:normal;
	font-variant:normal;
	}
#pixopoint_menu1 ul ul li {
	letter-spacing:0px;
	color:#444444;
	z-index:20;
	width:150px;
	font-family:helvetica,arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	background:#FFFFFF;
	border-bottom:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	margin:0;
	}
#pixopoint_menu1 ul ul li a {
	line-height:22px;
	color:#444444;
	text-decoration:none;
	}
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	color:#444444;
	}
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
	color:#FFFFFF;
	}
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
	color:#FFFFFF;
	background:#333333;  /*-- This is the drop-down menu hover background color  --*/
	}
#pixopoint_menu1 ul ul ul li {
	font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
	position:absolute;
	margin-left:-999em;
	top:0;
	width:150px;
	}
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
	margin-left:150px;
	}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	text-decoration:none;
	}
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu1 li.pixo_search:hover {
	background:none;
	}
#pixopoint_menu1 li.pixo_search form {
	margin:0;
	padding:0;
	}
#pixopoint_menu1 li.pixo_search input {
	font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
	width:100px;
	}
#pixopoint_menu1 li.pixo_right {
	float:right;
	}

PixoPoint Plugin Settings

After activating the PixoPoint menu plugin, you’ll have a new PixoPoint Menu option under your Settings menu. This is where you’ll find the controls for your menu as well as the slick drag-and-drop interface for organizing your menu bar.

Under the PixoPoint Settings tab, you’ll find a set of options similar to what you see to the left. Make your settings look exactly like these in order for your menu to work properly in the theme.

The Drop-down menu settings options (not shown in this screenshot) can be set to whatever you prefer for animation speed and effect.

Customizing the Menu

You’ll be able to customize the background color and hover color of the menu as well as the normal and hover color for the menu text. You will lose the ability to use any other menu styles however, as the CSS code above is coded to use the ’simple’ style menu.

The drop-down menu is styled at 150 pixels wide with a white background and a dark grey hover state. If you glance through the CSS code above, you’ll see reference to colo r #333333 which is the background hover color. #444444 is the normal text color, #CCCCCC is the border color, #FFFFFF is both the hover text color and the normal background color. You’ll also see multiple references to 150px. If you want a wider menu, make all instances of 150 wider, and conversely if you want a narrower menu make them smaller.

Adding a Second PixoPoint Menu

If you’ve ever wanted to use a main menu bar for your pages and use a second menu bar for your categories, here’s how you do it with the PixoPoint plugin.

First, make the changes shown above, but skip the part for the lower navigation bar. So you’ll be adding the PixoPoint menu hook into the top navigation bar in the header.php and adding the CSS code for that menu to the style.php file.

To make the lower navigation bar (below the header) work with the PixoPoint plugin, here’s what to do:

In the header.php file, find and highlight this code (last code in the file)

^?View Code PHP

<?php if ($flex_nav_position == "below") { ?>
<div id="nav" style="clear:both;">
  <ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
  </ul>
  <div class="clearer"></div>
</div>
<?php } else { ?>
<?php } ?>

Now delete the entire selection. By doing this, you’re removing the conditional statement that controls the bottom nav bar and now we’ll replace it with the code to pull in the second PixoPoint menu:

^?View Code PHP

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu(2);}

Just paste that single line where the previous code was, save your header.php file and then go to the next step.

Adding in more CSS

You now need to copy all the CSS code that you pasted into your style.php file earlier, and paste it at the end of the file again, but after you paste the code, simply replace each reference to pixopoint_menu1 with pixopoint_menu2. You will then be able to style your second menu separate from your first, but it will default to being identical.

Here’s the new code if you prefer to copy and paste:

^?View Code CSS

#pixopoint_menu2 {
	width:100%;
	height:33px;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png") repeat-x;
	background-position:50% 0;
	margin:0;}
#pixopoint_menu2 ul {
	width:100%;
	border:none;
	background:none;
	margin:0;
	padding:0;
	list-style:none;
	}
#pixopoint_menu2 li {
	border:none;
	background:none;
	background:#<?php echo $flex_nav_barback; ?> url("images/navfhleft.png");
	color:#<?php echo $flex_nav_txtclr; ?>;
	line-height:33px;
	z-index:20;
	letter-spacing:0px;
	background:;
	font-weight:bold;
	font-size:12px;
	padding:0;
	margin:0 0px;
	;float:left;
	font-family:tahoma,sans-serif;
	position:relative;
	}
#pixopoint_menu2 li:hover,#pixopoint_menu1 li.sfhover {
	background:#<?php echo $flex_nav_tabhvr; ?> url("images/navfhleft.png");
	}
#pixopoint_menu2 li a {
	border:none;
	background:none;
	text-decoration:none;
	display:block;
	padding:0 12px;
	color:#<?php echo $flex_nav_txtclr; ?>;
	}
#pixopoint_menu2 li a:hover {
	border:none;
	background:none;
	text-decoration:none;
	color:#<?php echo $flex_nav_hvrcolor; ?>;
	background-position:100% -150px;
	}
#pixopoint_menu2 ul ul {
	position:absolute;
	left:-999em;
	top:33px;
	width:150px;
	}
#pixopoint_menu2 li:hover ul,#pixopoint_menu1 li.sfhover ul {
	left:auto;
	}
#pixopoint_menu2 ul ul li a {
	padding:4px 10px;
	text-transform:normal;
	font-variant:normal;
	}
#pixopoint_menu2 ul ul li {
	letter-spacing:0px;
	color:#444444;
	z-index:20;
	width:150px;
	font-family:helvetica,arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	background:#FFFFFF;
	border-bottom:1px solid #cccccc;
	border-left:1px solid #cccccc;
	border-right:1px solid #cccccc;
	margin:0;
	}
#pixopoint_menu2 ul ul li a {
	line-height:22px;
	color:#444444;
	text-decoration:none;
	}
#pixopoint_menu2 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu2 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	color:#444444;
	}
#pixopoint_menu2 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
	color:#FFFFFF;
	}
#pixopoint_menu2 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
	color:#FFFFFF;
	background:#333333;  /*-- This is the drop-down menu hover background color  --*/
	}
#pixopoint_menu2 ul ul ul li {
	font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
	position:absolute;
	margin-left:-999em;
	top:0;
	width:150px;
	}
#pixopoint_menu2 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
	margin-left:150px;
	}
#pixopoint_menu2 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
	text-decoration:none;
	}
#pixopoint_menu2 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
	color:#FFFFFF;
	text-decoration:none;
	}
#pixopoint_menu2 li.pixo_search:hover {
	background:none;
	}
#pixopoint_menu2 li.pixo_search form {
	margin:0;
	padding:0;
	}
#pixopoint_menu2 li.pixo_search input {
	font-family:tahoma,sans-serif;}
#pixopoint_menu2 li.pixo_search input.pixo_inputsearch {
	width:100px;
	}
#pixopoint_menu2 li.pixo_right {
	float:right;
	}

If you’re using Flexibility 2, there’s no need to save theme settings, but if you’re using FlexSqueeze, go into the theme settings and save them to rewrite the style sheet.

Turn on the second PixoPoint menu

The last step is to go back into your PixoPoint plugin settings and check the option box for “Add a second menu”. This will activate the lower menu and by default will show your categories unless you had modified your second menu prior to this. Now you have the same drag-and-drop function on your second menu as you have on your first.

That’s it! Now you have the ability to use multiple drop-down menus with FlexSqueeze or Flexibility 2, and also the excellent menu organization function built in by PixoPoint!

RSS feed for comments on this post

Ken Catto says:

December 21, 2009 at 3:28 pm

I have made good use of the above info regarding the drop down menu. However, I need to eliminate the built in search box that is coming up with the new menu in addition to the much better looking and better positioned search option within your theme/skin. any idea about the code that is inserting this new, additional search box, that is not needed? You can view it at http://www.q8hw.com/diet1
Thanks much…
and thanks much for creating flexibility, it makes life so much easier for us since we purchased the developers license.

Regards
Ken
ken@pro-desk.net

Reply
- Ryan says:
  
  December 21, 2009 at 3:42 pm
  
  You can turn off the default PixoPoint search box simply by dragging it out of the main menu items. Then save your PixoPoint options and it will be gone.
  
  Reply
Felisha says:

February 19, 2010 at 2:56 pm

Fantastic tutorial!

Reply
Scott Young says:

February 27, 2010 at 5:18 pm

Hey Ryan!

Took me a bit to understand how to use your template (i.e. file permissions on style.css) but once I got over that hurdle it’s been great so far.

QUESTION: What is the line in the style.php code that changes the hover state color? I’ve changed the color hover to black (from white) and that doesn’t seem to make a difference. Must be missing something.

Thanks!

Scott

Reply
- Ryan says:
  
  March 1, 2010 at 8:48 am
  
  There are multiple styles that control the hover state, depending if you’re in the content area or the sidebar. You can control the hover colors within the theme settings, but if you want to do something different, just contact me and tell me what you’re trying to do and I’ll send you over the code.
  
  Reply
Scott Young says:

March 2, 2010 at 12:07 am

Hey Ryan!

Thanks for your response.

I wasn’t sure if it was different if you used the Pixo Point menu plugin.

I’d like the main content page text to rollover to black when moused over.

Is this still handled in the admin panel?

Also, check out my new sales letter I created using your Flexsqueeze Template:

http://www.thewinemakingsociety.com/learn-wine-making

Would love any feedback you have on it.

Personally I think it looks great but conversions will be the final gauge of success …

Thanks!

Scott

Reply
- Ryan says:
  
  March 2, 2010 at 7:16 am
  
  You can set the link hover state color in the theme settings under the ‘Posts’ tab.
  
  Your sales page looks great!! Excellent job on the header and the presentation flows smoothly. My wife would love to be able to make her own wine Her palette is more experienced than mine, as I’m more of a micro-brew kind of guy.. ha!
  
  Reply
David says:

March 3, 2010 at 6:45 pm

Plugin works fine. But I lost the hover over page feature along with the pop up and color change when mouse is over page.
Any ideas?
http://www.truckeewebdesigner.com is the site.

Reply
- Ryan says:
  
  March 8, 2010 at 3:03 pm
  
  Actually, you’re missing a closing in your top feature that’s causing the on-page hover issue.
  
  Reply
Ryan says:

March 8, 2010 at 3:09 pm

Add something like this to the end of your style.php file, then resave your theme settings to rewrite the style sheet:

#pixopoint_menu1 ul.sf-menu li li, #pixopoint_menu1 ul.sf-menu li li a {height:25px;}
#pixopoint_menu1 ul.sf-menu li li a {padding: 0px 8px;}

That will reduce the height of the drop-downs. You can play with the values to see what works best. You can remove the search box within the PixoPoint options, just drag it out of your menu. And I didn’t see a second menu on your site when I looked.

Reply