Renaming search node labels on the search page

Updated on: 5 March 2024

In this tutorial I am going to show you how to change the labels of the search nodes photos, videos, galleries, folders, and pages. You don’t need to add all of the code from my tutorial if you only plan to change some of the labels on your SmugMug website. Remember that you need to copy the first part of the CSS code which hides the original, specific label and the second part of the code which ads your custom label.

Make sure that you replace the content label with a custom label.

Where to add the code?

Open the search page on your SmugMug account and click Customize → add a CSS content block to your search page and add your code to it.

You can also add the CSS content block to the ENTIRE SITE section of your website. The second method is probably better, because it will then affect the search field labels, regardless of where you put the search field on your SmugMug website.

CSS
/*Hiding the original photos label*/
#sm-search-category-photos .sm-link-icon .sm-link-icon-label {
  display: none;
} 

/*Adding a new label to the photos label*/
#sm-search-category-photos .sm-link-icon:after {
  content: " My Custom photos label";
} 

/*Hiding the original videos label*/
#sm-search-category-videos .sm-link-icon .sm-link-icon-label {
  display: none;
} 

/*Adding a new label to the videos label*/
#sm-search-category-videos .sm-link-icon:after {
  content: " My Custom videos label";
} 

/*Hiding the original galleries label*/
#sm-search-category-galleries .sm-link-icon .sm-link-icon-label {
  display: none;
} 

/*Adding a new label to the galleries label*/
#sm-search-category-galleries .sm-link-icon:after {
  content: " My custom galleries label";
} 

/*Hiding the original folders label*/
#sm-search-category-folders .sm-link-icon .sm-link-icon-label {
  display: none;
} 

/*Adding a new label to the folders label*/
#sm-search-category-folders .sm-link-icon:after {
  content: " My custom folders label";
} 

/*Hiding the original pages label*/
#sm-search-category-pages .sm-link-icon .sm-link-icon-label {
  display: none;
} 

/*Adding a new label to the gaes label*/
#sm-search-category-pages .sm-link-icon:after {
  content: " My custom pages label";
}

Leave the first comment