Search box title

Nicolas MertensNicolas Mertens Registered Users Posts: 14 Big grins
edited November 2, 2013 in SmugMug Customization
Is it possible to customize the title of the search box? For example, to reduce its font size.

Thanks in advance.

Comments

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Nicolas MertensNicolas Mertens Registered Users Posts: 14 Big grins
    edited 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.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 1, 2013
    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 {
  
      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.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Nicolas MertensNicolas Mertens Registered Users Posts: 14 Big grins
    edited 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 {
  
      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 thumb.gif

    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!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 1, 2013
    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).
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Nicolas MertensNicolas Mertens Registered Users Posts: 14 Big grins
    edited 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!
Sign In or Register to comment.