StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Genesis search – image submit button

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › General Discussion › Genesis search – image submit button

This topic is: resolved

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 25, 2014 at 3:41 pm #106714
    Bruce Rawles
    Participant

    I've got search working on this work-in-progress site using a modified Genesis child theme:

    https://english-dev.colorado.edu/

    (ignore the warning message if you get one initially; the campus IT guy I'm working with says it's safe.)

    I'm using the Genesis 404 plugin (by Bill Erickson, version 1.3 at present) to do the search.

    The magnifying glass icon to the right of the search box is presently just a placeholder image. I'd like whenever the magnifying glass icon is clicked to initiate the search with whatever has been entered in the search box, just as if the return key was pressed, similar to how it works on this site (that I'm roughly modeling it after):

    http://www.colorado.edu/music/

    Has anyone done something similar? I found this tutorial for another (non-StudioPress) theme:

    http://diythemes.com/thesis/rtfm/styling-wordpress-search-form/

    which shows "Search Box – PHP/CSS Visible “Image as Submit” Button" about halfway down the page.

    Has anyone done something similar for a Genesis theme?

    If so, what php code did you use/modify and what HTML (so that I can target it properly with CSS)?

    I currently have this placeholder HTML in the right header widget:

    <div class="english-header-search">
		<div class="english-header-search-box">
			[genesis-404-search]
		</div>
		<div class="english-header-search-button">
			<a href="&quot;&quot;" />
				<img src="//english-dev.colorado.edu/wp-content/uploads/2014/05/gold-magnifying-glass-icon.png&quot;" />
			</a>
		&lt;/div&gt;
	&lt;/div&gt;

    Thanks in advance for any suggestions! 🙂

    https://english-dev.colorado.edu/
    May 25, 2014 at 3:44 pm #106716
    nutsandbolts
    Member

    This tutorial may help you - it uses a font icon, but you could style it any way you'd like: http://sridharkatakam.com/add-magnifying-glass-icon-font-using-dashicons-search-button-genesis/

    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    May 25, 2014 at 5:32 pm #106724
    Bruce Rawles
    Participant

    Worked like a charm; perfect!!! Many thanks! 🙂

    May 25, 2014 at 7:18 pm #106737
    nutsandbolts
    Member

    No problem! I’ve marked this topic as resolved for now, but feel free to open a new topic if you need help with anything else. 🙂

    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.