ThemeShaper Forums » Thematic

[closed]

Thematic menu styling - adding popup search to #access

(4 posts)
  • Started 7 years ago by krowchuk
  • Latest reply from krowchuk
  • This topic is resolved
  1. Hi!

    I'm wondering if anyone can help.

    I'm in the process of rewriting this non-thematic theme http://www.krowchukdressage.com into a child thematic theme and I'm getting close. The project file is here: http://sandbox.krowchukdressage.com

    My main stumbling point has been the nav menu which has been discussed here:
    http://forums.themeshaper.com/topic/thematic-menu-styling-frustration

    What I have done so far is to put a copy of header.php into my child dir and hard code changes with the intent to see what it would take to make these child theme mods, before using functions.php to move things around etc.

    I am using these functions to move access to thematic_belowheader

    // Remove the standard Thematic menu
    function remove_access() {
    	remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_access');
    
    // Place Access below header
    add_action('thematic_belowheader','thematic_access');

    As per helgathe"menu"viking's most excellent tutorial!

    Next on my list though is the fancy popup search trigger that is in a div inside of what would be equivalent to #access on thematic. I have managed to create a div for this search trigger outside of the access div and using position and z-index, I have managed to get it placed where it needs to be. I haven't figured out yet how to recreate the popup search box though.

    I'm thinking I might be best to use childtheme override on #access? This would allow me to add div's etc. inside of #access and keep things cleaner, yes? This particular navbar needs quite a few div's (presentational mostly) that I have managed to add outside of access and position with css but it would seem to me that adding them "inside" access would be cleaner.

    How would I go about overriding the access and then placing it in belowheader?

    The search popup that I would like to use, uses some jQuery which I have managed to find in the live theme. It is basically this:

    // ---------------------------------------------------------
    // Main Menu Search
    // ---------------------------------------------------------
    
     $("#search-trigger").click(function(){ return false; });
    
     $('#search-popup-wrapper').each(function () {
    
    	var distance = 10;
    	var time = 250;
    	var hideDelay = 500;
    
    	var hideDelayTimer = null;
    
    	var beingShown = false;
    	var shown = false;
    	var trigger = $('#search-trigger', this);
    	var info = $('.search-popup-outer', this).css('opacity', 0);
    
    	$([trigger.get(0), info.get(0)]).mouseover(function () {
    		if (hideDelayTimer) clearTimeout(hideDelayTimer);
    		if (beingShown || shown) {
    		    // don't trigger the animation again
    		    return;
    		        } else {
    		            // reset position of info box
    		            beingShown = true;
    
    		            info.css({
    		                bottom: 5,
    		                right: -12,
    		                display: 'block'
    		            }).animate({
    		                bottom: '+=' + distance + 'px',
    		                opacity: 1,
    		                filter: '' //IE Transparency Hack
    		            }, time, 'swing', function() {
    		                beingShown = false;
    		                shown = true;
    		            });
    		        }
    
    		        return false;
    
    		    }).mouseout(function () {
    
    		        if (hideDelayTimer) clearTimeout(hideDelayTimer);
    		        hideDelayTimer = setTimeout(function () {
    		            hideDelayTimer = null;
    		            info.animate({
    		                bottom: '+=' + distance + 'px',
    		                opacity: 0,
    		                filter: '' //IE Transparency Hack
    		            }, time, 'swing', function () {
    		                shown = false;
    		                info.css('display', 'none');
    		            });
    
    		        }, hideDelay);
    
    		        return false;
         });
    });

    I'm a complete idiot when it comes to javascript! Does this control only the presentation of the popup? Or does it control the actual search engine function? Will I have to worry about anything else to get the search functioning?

    Sorry for the long post, but obviously there is a lot to think about and consider and I'm way over my head!

    Thanks in advance for any guidance as to the "best" way to go about this!

    Cheers!
    Chris

    Posted 7 years ago #
  2. Putzing around, I have figured out that I can first remove access and then rebuild it and place it belowheader like this:

    // Remove the standard Thematic menu
    function remove_access() {
    	remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_access');
    
    // Create custom #access and place belowheader
    function childtheme_override_access() {
    ?>
    
    	<div id="access">
    
    		<div class="skip-link"><a href="#content">"><?php _e('Skip to content', 'thematic'); ?></a></div><!-- .skip-link -->
    
    	    	<?php 
    
    	    	if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) {
    	    		echo  wp_nav_menu(thematic_nav_menu_args());
        		} else {
        			echo  thematic_add_menuclass(wp_page_menu(thematic_page_menu_args()));
        		}
    
    	    	?>
    
    	</div><!-- #access -->
    
    <?php }
    add_action('thematic_belowheader','thematic_access',9);

    I think that answers most of my question above regarding the override and placement.

    Am I on the right path?

    Cheers!
    Chris

    Posted 7 years ago #
  3. yeah that should pretty much move thematic_access to a new hook. you don't neeeed to maintain the priority 9 on belowheader as nothing else is on that hook, but it isn't doing any harm either.

    seems like you need to either add the markup required to run the jquery on adjust the jquery to the markup. looking at your site it looks like you have the proper markup, but now need to add jquery.

    fortunately i covered that in a mega-thread too:
    http://forums.themeshaper.com/topic/jquery-in-thematic-demystified

    Posted 7 years ago #
  4. Thanks helgatheninja!

    I actually managed to surprise myself yesterday. ;-)
    I managed to add all the menu markup into the access override, that was my first attempt at using overrides, now I'm "hooked"!

    Have you considered writing a similar tutorial on childtheme_override? I avoided using that for a longtime because the documentation was scattered and unclear.

    The js is next, have been reading your tut on that and plan to putz with it today.

    I'm going to mark this thread as resolved, if I run into js issues I'll start a thread dealing more specifically with that.

    Cheers!
    Chris

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.