Resizing the Search Box

Kten

Hi folks!

I am using the Sierra theme, and have just begun experimenting with the customizations. I want to learn how to resize the search box. It is the first thing visitors will see on the home page, and i want to wow them.

Thanks in advance.

Kten

tomnovy

Hi Kten,

Just a reminder - it would be easier for all users if you would also post the link to your site/page that you would like to affect with this customization.

Kten

@tomnovy Apologies. The site is www.camkaaj.com

I had to be away due to some work and just realised i had completely forgotten about this thread.

tomnovy

Hey Kiten,

Could you please tell us where is the search field? I cannot see it on your site.

Kten

Hi,
It is on the top right of the page.

Hikin' Mike

@Kten said:
Hi,

It is on the top right of the page.

I don't see a search box on your home page either.

tomnovy

I think you are talking about the default search field that is only visible to you when you are logged in as the account owner.

I recommend that you add a search content block to your site instead, so your visitors can see it as well.

You can read about content blocks and how to add them to your site - here:

http://help.smugmug.com/customer/portal/articles/1210628-customization-content

Kten

Hello @tomnovy : I think you were right. I've added a search content box on the main page now. Can you see it? It doesn't let me increase the width of the search box beyond 100%.

tomnovy

Kiten,

You can add a css content block to your homepage and then add this code to it:

.sm-user-ui .sm-page-widget-search .sm-form-field-text-input {
max-width: 400px;
}

Hikin' Mike

@tomnovy said:
Kiten,

You can add a css content block to your homepage and then add this code to it:

.sm-user-ui .sm-page-widget-search .sm-form-field-text-input {
max-width: 400px;
}

I was in the process of saying the same thing, but you beat me to it...lol!

.sm-user-ui .sm-page-widget-search .sm-form-field-text-input {
    width: 400px;
    }

Kten

Oh thank you @tomnovy and @"Hikin' Mike" :)

I did that, but all i get is a "CSS Placeholder" Text.

tomnovy

Kten,

I have added the code for you.

Kten

AHW Super stuff man! Thank you @tomnovy

I think i was making a mistake in implementing the code!