There are a variety of navigation options in the default PlatformPro Feature section. Some of these include thumbnails, numbers, names, and simple squares or dots. There a few things we can do, however to easily customize the look and feel of this marquee feature.

The CSS Setup

First open up your base.css file in the PlatformBase child theme and make sure that you are using the “Squares or Dots” navigation mode, which is set under the global PlatformPro Feature Settings.

The important thing about the CSS here is that we are changing the position of the feature navigation so that it sits on top of the feature slide area instead of directly beneath it. We are also including a transparent black background for the feature navigation as well as an image sprite to replace the default circles/squares.

Place the transparent background and image sprite in the images folder in your Base theme for the code below to work

#feature #feature-footer {
	position: absolute;
	bottom: 0;
	background: url('images/black60.png') repeat;
	z-index: 999999;
	border: 0;
	width: 100%;
}
	
#feature-footer .feature-footer-pad {border:0px;}

	/*FEATURE DOTS*/
		#featurenav a {border:0px!important;background:transparent;}

		#feature #feature-footer a, #cycle_navigation a {
			background:url('images/glass_buttons.png') no-repeat center top transparent;
			width:20px;
			height:20px;
		}
		
		#feature #feature-footer a:hover, #cycle_navigation a:hover  {
			background:url('images/glass_buttons.png') no-repeat center center transparent;
		}
		
		#feature #feature-footer a.activeSlide, #cycle_navigation a.activeSlide  {
			background:url('images/glass_buttons.png') no-repeat center bottom transparent;
		}

The Images

To make it easy for you, you can save the images below to your own server to get this demo working quickly.

The jQuery

Then next step is to add a touch of jQuery to hide and show the navigation when hovering off and on the whole feature area.

Use a hook in your functions.php file to accomplish this.

add_action ('wp_footer','animate_feature_nav');

	function animate_feature_nav(){?>

		<script type="text/javascript">

			var $j = jQuery.noConflict();
			$j(document).ready(function() {
				$j('#feature-footer').hide();
				$j('#feature_slider').hover(function(){$j('#feature-footer').fadeToggle("slow", "linear")});
			});

		</script>

	<?php }

That’s it! You have a new custom feature section that is perfect for an auto playing image gallery or portfolio.

Tagged with →  

2 Responses to Create A Hover Effect For Your Feature Navigation.

  1. Yani says:

    Hi I would like to use this code but don’t really know where to go on Pagelines to place it could you let me know. Thanks

    • cmunns says:

      If you don’t see a functions.php file it’s because you are not using the Base theme, which is great for adding custom code snippets to the PageLines framework

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop us a note so we can take care of it!

Archives

All entries, chronologically...