Renaming search node labels on the search page.
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 your own 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 no matter where you put the search field on your SmugMug website.
/*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";
}Related articles
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Support me
I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.
Leave a Reply