Jump to content
Sign in to follow this  
asuydam

Replace search bar in header with an image

Recommended Posts

asuydam

Hello, A couple questions here, On my website, http://www.extremefitnessproducts.net/, I'd like to replace the top search bar with the Websafe Shield or have it directly above the top banner. I haven't decided which would look better but if I can do it both ways could you please explain both situations? I have the dev version of platform pro and the child theme running. I would also like to put a black background behind the links in my nav bar, what would be the proper way to accomplish this? I'm pretty new at the whole website game so my knowledge is pretty limited. Thank you! :) Aaron

Share this post


Link to post
Share on other sites
catrina

It's possible to replace the search bar with a WebSafe shield positioned on top of the banner. We could replace the search bar first and then you can see how it looks. If you'd rather move it up so that it's sitting on the banner, I could show you how to do that, too. The best way to accomplish this would be with a hook, which you can read more about here: http://www.pagelines.com/docs/base-child-theme. You already have the child theme running, so that's one step that is taken care of. If you are unsure of how to go about implementing the hook, I can show you an example. As for the navigation bar, please add the following CSS code to PlatformPro settings > Custom Code > Custom CSS:

ul#menu-nav div.main-nav li.page_item {background-color: #000;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
asuydam

Hey Catrina, I think I'll go with replacing the search bar and adding another with a widget, I think that would look best. I don't have that image quite yet, it's been sitting on pending for a bit over a day now, but we can test it out with another one. I'd appreciate it if you could show the example because I'm frankly slightly terrified of code :) Here's how the hook area of my functions.php looks at the moment. // HOOKS EXAMPLE --------// // Below is an example of how you would add a social media icon to the icons in header (branding section) // We have placed a hook at the end of the icon set specifically add new icons without modifying code or having to worry about your edits // getting thrown out during the upgrade process. The way to use hooks goes a little like this: // add_action('hook_name','function name'); // ---> uncomment to load //add_action('pagelines_branding_icons_end', 'add_icons_to_branding'); // function name function add_icons_to_branding(){ // This hook adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css // and is the image from the CSS is placed in the images folder ?> <?php } // end function Thanks for your help! :)

Share this post


Link to post
Share on other sites
catrina

You can hide the search bar first by going to PlatformPro settings > Header And Nav > Checking "Hide search field? " Now we can start building the hook, which takes on this format:

// add_action('hook_name','function name');
	add_action('pagelines_branding_icons_end', 'add_icons_to_branding');
	
	// function name
	function add_icons_to_branding(){

pagelines_branding_icons_end is the hook name This is where you add the name of the hook, which determines where the WebSafe shield will go. A list of hooks is provided in Template Setup > Site Header > Advanced Setup, but since the hook that is already in the above example is what you need, we don't need to change it. add_icons_to_branding is the name of the element you're creating This can be changed to the name of what you're doing. Since you're adding the WebSafe shield, it can be called: add_websafe_shield. This must also be placed at the end of the code so that it says function add_websafe_shield instead of function add_icons_to_branding. Does that make sense so far?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
asuydam

Catrina, That seems easy enough to follow :) I think instead of playing around with another image I will just wait until they scan my site and then follow your steps and follow up if I need any more help. Since I'm kind of a cat person myself, here is a LOLcat pic I like in return for your assistance. http://icanhascheezburger.com/2010/10/23/funny-pictures-adjusting-contrast/ Thanks! Aaron

Share this post


Link to post
Share on other sites
asuydam

Catrina, Low and behold, I seem to have got the shield in place! It isn't quite where I want it though. How would I move it down and to the left a little bit so it's in-line with the nav bar? Thanks :) Aaron

Share this post


Link to post
Share on other sites
asuydam

add_action('pagelines_branding_icons_end', 'add_websafe_shield'); // function name function add_websafe_shield(){ // This hook adds the websafe shield icon to the header of your theme. The class referenced in the link can be seen in the style.css // and is the image from the CSS is placed in the images folder ?> seal.php?domain=extremefitnessproducts.n <?php } // end function

Share this post


Link to post
Share on other sites
catrina

Okay, thanks. In this code:

;
	
	[/code]

Please remove the [b][/b] toward the end of the code (it doesn't need to be there). Also, add [b]

[/b] directly before [b][/b] after the [b][/b] at the end of the code. Save your file and check your site. If the image is too far to the left, you can adjust the -200 value until it is aligned the way you want it. The same goes for the -50 value for the top margin (i.e. using -150 instead of -200 to move it to the right a little).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
asuydam

It's in the right place horizontally now, (in chrome anyway, firefox it doesn't seem to be changing), but vertically nothing happened.

Share this post


Link to post
Share on other sites
asuydam

I think I figured it out :) Firefox and chrome must be different in how they handle

tags. I don't know if this is the real reason but I think in firefox you can't have a negative margin and a positive margin(To make it go down i need positive pixels). So I switched the code to this
And now it works in both. In chrome it's slightly farther to the left though and the white background behind the nav bar digs into the image a little bit but that's okay. Thanks again for all of your help! Aaron Simon's cat "in the box" :)

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  

×