Search box customization

corinos

Does anybody know how to customize the search box and button? I managed to change the change box width but I would also like to change the box text ("search for photos...") so that it fits inside the box (have a look at the left menu bar: www.orinosphotography.com). Additionally, I would like to remove the left margin of the search box so that it left-aligns with the search box.

Thanks in advance,
Chris

corinos

This appears fairly simple to me (simple for the one who knows!). Any comments or thoughts?

DanCarl97

There's not a simple way to do it without JavaScript I'm afraid. You may be able to try and copy the code that SmugMug uses into a HTML block and then edit it. I don't know if the formatting will be the same however.

DanCarl97

Actually, I think I've got it to work.

For your site, this code should work: https://gist.github.com/DanCarl97/9031841

I removed the icon to make the the search button less cluttered seen as it's for a small area and made the button stretch full width so that it'll fill the sidebar. (I personally think it would look better that way.)

You can easily change the placeholder (the greyed out text inside the input box) and the search button text. (Just look for it in the code, shouldn't be hard to find.)

If anyone else wants to use that code, all you need to do is change the <input> tag with the value corinos. Simply swap corinos for your SmugMug site's nickname.

thenickdude

As Dan says, you can achieve this by copying SmugMug's HTML and editing it. Start with this and add it to an HTML content block. I changed the "placeholder" to "Search..." so it should now fit:

<div class="sm-page-widget sm-page-widget-search">
	<div class="sm-page-widget-content" >
		<div class="sm-page-widget-header"></div>
		<div class="sm-page-widget-body">
			<form action="/search/" method="get" class="sm-search-form" style="text-align: left">
				<input type="hidden" name="c" value="everything"> 
				<input type="hidden" name="n" value="corinos"> 
				<input type="hidden" name="scope" value="node"> 
				<input type="hidden" name="scopeValue" value="0"> 
				<input type="text" name="q" class="sm-form-field sm-form-field-text-input" placeholder="search...">
				<button class="sm-button sm-button-size-small sm-button-skin-accent">
					<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-Search"></span> 
					<span class="sm-button-label">Search</span>
				</button>
			</form>
		</div>
		<div class="sm-page-widget-footer"></div>
	</div>
</div>

Add this to the CSS tab of the HTML content block to align the search button properly on the left edge:

.sm-button-size-small {
	margin:0;	
}

EDIT: Whoops, you bet me to it, Dan!

corinos

Thanks a lot guys for the code and overall suggestions. I think it looks beautiful now

Cheers,
Chris