Search box title

Nicolas Mertens · October 25, 2013

Is it possible to customize the title of the search box? For example, to reduce its font size.

Thanks in advance.

leftquark · October 30, 2013

Use this, change the part in red. Currently shown on my customizations page at the bottom (http://www.aaronmphotography.com/Customizations/Other):

/* Customize the search box button text */
.sm-user-ui .sm-search-form .sm-button:after {
[COLOR="Red"]  content: 'Customize Me!'[/COLOR];
}

/* Hide the old search button text */
.sm-user-ui .sm-search-form .sm-button-label {
  display: none;
}

Nicolas Mertens · November 1, 2013

leftquark wrote: »
Use this, change the part in red. Currently shown on my customizations page at the bottom (http://www.aaronmphotography.com/Customizations/Other):
/* Customize the search box button text */
.sm-user-ui .sm-search-form .sm-button:after {
[COLOR=Red]  content: 'Customize Me!'[/COLOR];
}

/* Hide the old search button text */
.sm-user-ui .sm-search-form .sm-button-label {
  display: none;
}

Hello, Aaron!

Thanks for replying. However, I'm not familiar with these codes. Could you please tell me what could I replace the red text with. I tried using the code as is, with the red line, but the result is that the word "Search" located next to the search box becomes "Customize Me." What I'm looking for is to reduces the type size and possibly the type color of the text I placed above the search box (its Title).

Thanks again for your input.

leftquark · November 1, 2013

Nicolas Mertens wrote: »

Hello, Aaron!

Thanks for replying. However, I'm not familiar with these codes. Could you please tell me what could I replace the red text with. I tried using the code as is, with the red line, but the result is that the word "Search" located next to the search box becomes "Customize Me." What I'm looking for is to reduces the type size and possibly the type color of the text I placed above the search box (its Title).

Thanks again for your input.

AHA! My apologies. I misinterpretted what you were asking for. I thought you wanted to change the text inside the box that says "Search" that the user clicks on. I forgot that inside the Search content block you can give it a TITLE.

To control the Search Content Block's Title font size and color use the following:

/* Change the font size and color of the "search" content block's title */
.sm-page-widget-search .sm-page-widget-header h2 {&#8232;  
  font-size: [COLOR="Red"]12px[/COLOR] !important;
  color: [COLOR="red"]#1E9C50 [/COLOR]!important
}

Add these to your theme's advanced CSS section.

Customize the areas marked in red, to whatever font size and color you want.

Nicolas Mertens · November 1, 2013

leftquark wrote: »
AHA! My apologies. I misinterpretted what you were asking for. I thought you wanted to change the text inside the box that says "Search" that the user clicks on. I forgot that inside the Search content block you can give it a TITLE.

To control the Search Content Block's Title font size and color use the following:
/* Change the font size and color of the "search" content block's title */
.sm-page-widget-search .sm-page-widget-header h2 {&#8232;  
  font-size: [COLOR=Red]12px[/COLOR] !important;
  color: [COLOR=red]#1E9C50 [/COLOR]!important
}
Add these to your theme's advanced CSS section.

Customize the areas marked in red, to whatever font size and color you want.

Wow! That was fast! Thank you so much. This is exactly what I was looking for

Thanks also for your customizations pages. These are great. Which brings me to a new question, unrelated to the above. I'm using the New SmugMug design (in the galleries, thumbnails on the left and selected photo on the right). Is it possible to increase the size of the thumbnails? They were much larger in Legacy SmugMug.

Thanks again for the codes!

leftquark · November 1, 2013

Nicolas Mertens wrote: »

Which brings me to a new question, unrelated to the above. I'm using the New SmugMug design (in the galleries, thumbnails on the left and selected photo on the right). Is it possible to increase the size of the thumbnails? They were much larger in Legacy SmugMug.

Unfortunately it is not possible. I've tried to change the thumbnail sizes myself but SmugMug does some 'smart' things to make the thumbnails the size they make them and it's a royal pain to try to override what they're doing (basically they tell the thumbnails to be a certain size, based on the exact width of your screen and they do it dynamically, so if you change the size of your window they change the value they use. Since we can't have access to JavaScript I can't specify a larger % for the thubmnails).

Nicolas Mertens · November 2, 2013

leftquark wrote: »

Unfortunately it is not possible. I've tried to change the thumbnail sizes myself but SmugMug does some 'smart' things to make the thumbnails the size they make them and it's a royal pain to try to override what they're doing (basically they tell the thumbnails to be a certain size, based on the exact width of your screen and they do it dynamically, so if you change the size of your window they change the value they use. Since we can't have access to JavaScript I can't specify a larger % for the thubmnails).

Too bad. We can't have it all

Thanks again for everything!

Search box title

Comments