Change text on "Buy Photos" button and add text to Slideshow button

camner

In this post Hikin' Mike gave this CSS code for changing the text on the "Buy Photos" button to "Buy Prints":

/**
* Changes 'Buy Photos' to 'Buy Prints'
***************************************************/
.sm-user-ui .sm-gallery-cover-buy-button .sm-button-label{
    display: none;
    }

.sm-user-ui .sm-gallery-cover-buy-button:after {
    content: ' Buy Prints';
    }

I can't get this to work. I put it where I think "whole site" CSS should go, by doing this:
1. Select Customize --> Content and Design
2. Select Entire Site
3. There I already have a CSS placeholder with other CSS modifications I've made and that display
4. Add the code above to that CSS placeholder

Have the selectors changed since Mike gave this solution in 2018?

As a second question, I would like to add text to the slideshow button, and based on Mike's CSS above, I thought the following might work:

/**
* Adds 'Play Slideshow' to Slideshow buttons
***************************************************/
.sm-user-ui .sm-gallery-cover-slideshow-button:after {
    content: ' Play slideshow';
    }

But this doesn't seem to work either.

Can anyone help me out?

Hikin' Mike

I need a link to your site first.

camner

Sorry. Here 'tis: https://camner.smugmug.com/Temp-gallery/

Thanks.

Hikin' Mike

I'm not seeing that code in your theme's custom CSS. I just added it to mine and it still works. This is how you add CSS to your theme's CSS: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

Hikin' Mike

I also just added it to a CSS block in my "All Galleries" and it works.

camner

@Hikin' Mike : Thanks much for taking a look at this; I appreciate it.

I’m obviously doing something wrong, and I’ll try to see what’s going on. I’m puzzled because other custom CSS I have put where I thought it should go DOES work at the gallery level.

Do you mind telling me how you tell from your end whether there is theme-wide (or “all galleries”) CSS? If I can see how to view that as a viewer rather than as the site owner, I can check myself whether the CSS is there, thus being able to distinguish between “I put it in the wrong place” and “I put it in the right place but it isn’t working as intended.”

Thanks again.

Hikin' Mike

@camner said:
@Hikin' Mike : Thanks much for taking a look at this; I appreciate it.

I’m obviously doing something wrong, and I’ll try to see what’s going on. I’m puzzled because other custom CSS I have put where I thought it should go DOES work at the gallery level.

Do you mind telling me how you tell from your end whether there is theme-wide (or “all galleries”) CSS? If I can see how to view that as a viewer rather than as the site owner, I can check myself whether the CSS is there, thus being able to distinguish between “I put it in the wrong place” and “I put it in the right place but it isn’t working as intended.”

Thanks again.

I'm not seeing ANY custom CSS in your Theme's Custom CSS section. I'm seeing custom CSS in your Gallery section, including the CSS you posted above. Not sure what account you have, but is it possible you CAN'T do that?

I think this is beyond my paygrade. I suggest you contact SmugMug.

camner

@Hikin' Mike : Thanks for the follow up.

How can you tell by looking at a gallery page what the custom CSS is and what section the custom CSS is associated with?

Hikin' Mike

@camner said:
@Hikin' Mike : Thanks for the follow up.

How can you tell by looking at a gallery page what the custom CSS is and what section the custom CSS is associated with?

I use one of the web tools. Specifically I use Firefox. Right-click > Inspect Element > {} Style Editor. On the left lists the CSS used. Chrome has it too, but I find FF easier for me.

camner

@Hikin' Mike:

I went to Firefox and opened the style editor. I'm attaching a screenshot of what I saw there.

How does one tell whether the CSS one views in FF is from the Gallery section and which is for the Theme's Custom CSS section?

And, if you see the CSS you suggested I use to change the text for the "Buy Photos" button, why doesn't it work? We're both seeing it there, but it works for you but not for me. Are you suggesting it may be possible for my level of plan (the Power plan), changing the Buy Photos button may not be allowed, but the other CSS mods I've made might be allowed?

Hikin' Mike

This is my theme's CSS viewed using Firefox. You can also see I have two combo.css. The 4 rules are the 4 blocks in my header and the 20 rules is a HTML/CSS block for a custom breadcrumb on my home page.

Hikin' Mike

To add, the Theme's CSS will have the Color Background "title" on the very top.

Hikin' Mike

If you remove the prefix .sm-user-ui, this works. I verified using Firefox on your test gallery. Can't remember what the difference is between .sm-user-ui and what your prefix is (sm-nui). I think that has something to do with the different accounts.

.sm-gallery-cover-buy-button .sm-button-label {
 display:none
}
.sm-gallery-cover-buy-button:after {
 content:' Buy Prints'
}

camner

Thanks again for your help. I wrote in to SM support to ask if there were any differences in what CSS is permitted to do based on account, and asked why a given CSS mod would work for you and not for me, and the reply was "Mike has a heavily customized site and I don't want to speculate why different CSS worked on his site." I take that to be a longer way of saying "I don't know." The rep didn’t address the question of whether there are differences based on account level.

Hikin' Mike

@camner said:
Thanks again for your help. I wrote in to SM support to ask if there were any differences in what CSS is permitted to do based on account, and asked why a given CSS mod would work for you and not for me, and the reply was "Mike has a heavily customized site and I don't want to speculate why different CSS worked on his site." I take that to be a longer way of saying "I don't know." The rep didn’t address the question of whether there are differences based on account level.

No, it has nothing to do with the amount of customization. I PM'd @leftquark about the difference between .sm-user-iu and .sm-nui, but he has not replied.

leftquark

@Hikin' Mike said:
No, it has nothing to do with the amount of customization. I PM'd @leftquark about the difference between .sm-user-iu and .sm-nui, but he has not replied.

sm-user-ui is a dedicated CSS namespace for user site specific styles, while sm-nui is smugmug skinned UI. If you want to target changes to your pages via CSS Customizations you should use .sm-user-ui. Avoid using !important since using .sm-user-ui should cover your customization taking precedence.

Allen

In what order is the CSS applied? Is sm-user-ui applied last? Where does the theme CSS fall in the order?

In the CSS listing in WebDeveloper is the CSS order applied top to bottom?

camner

@leftquark said:

sm-user-ui is a dedicated CSS namespace for user site specific styles, while sm-nui is smugmug skinned UI. If you want to target changes to your pages via CSS Customizations you should use .sm-user-ui. Avoid using !important since using .sm-user-ui should cover your customization taking precedence.

Now I am quite confused. You are saying use .sm-user-ui to address items in customizing the CSS of a SM site. But that did not work for me; I had to delete the .sm-user-ui prefix.

I attempted to use Hikin' Mike's code below to change the Buy button label:

     .sm-user-ui .sm-gallery-cover-buy-button .sm-button-label {
      display: none;
      }
     .sm-user-ui .sm-gallery-cover-buy-button:after {
     content: ' Buy Prints';
     }

This did not work on my SM site. Mike kindly did some digging, and discovered that to make the code work on my site, it had to look like this:

.sm-gallery-cover-buy-button .sm-button-label {
 display:none
}
.sm-gallery-cover-buy-button:after {
 content:' Buy Prints'
}

Deleting the .sm-user-ui prefix fixed things.

What Mike discovered upon looking at my site was that my site had .sm-user-nui rather than .sm-user-ui.

So what's going on? Long ago, when I started with SM, I made a personal copy of whatever was the default site template (I imaginatively left the name as "Copy of SmugMug"). Could there be something about that choice made long ago that leads my site to use the .sm-user-nui prefix rather than .sm-user-ui?

camner

@Hikin' Mike said:
I'm not seeing that code in your theme's custom CSS. I just added it to mine and it still works. This is how you add CSS to your theme's CSS: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

Thanks. I just took a look at the easy-to-understand documentation about adding CSS to the theme.

I'm curious about how this differs (in terms of effect) from what I did to customize the "entire site" CSS. As you can see from the screenshot, after selecting Content & Design and Entire Site, I dragged a CSS block and put my "entire site" CSS there, rather than editing the THEME CSS.

Hikin' Mike

I've never tried, honestly. I'm familiar with WordPress in that if you want to customize it, they have one stylesheet. I took the same route so I generally put all of my custom CSS into my theme's custom CSS section.

camner

Hmmm...this is interesting. So, I tried an experiment. As you correctly observed, the way I had entered my custom CSS (by dragging a CSS block to "Entire Site," as I explained above) resulted in a "prefix" of .sm-nui, as one can see in this screenshot:

I was using the SM Dark theme, which had not be edited/customized at all.

So, I then deleted my custom CSS and put the CSS into the theme CSS as you outlined in your helpful blog post. Now look at this screenshot and notice the prefix!

Now the custom CSS to change the label on the Buy Photos button, the CSS WITHOUT the .sm-user-ui prefix fails, but adding the prefix makes it work.

So, perhaps we now understand @leftquark's somewhat cryptic (at least to me) comment:

@leftquark said:

sm-user-ui is a dedicated CSS namespace for user site specific styles, while sm-nui is smugmug skinned UI. If you want to target changes to your pages via CSS Customizations you should use .sm-user-ui. Avoid using !important since using .sm-user-ui should cover your customization taking precedence.

Since I was NOT using a custom theme, but one of SM's default themes, the .sm-user-ui prefix was not being added. Since I was using a "smug mug skinned UI," I was getting sm-nui.

I think this means that when you give advice to folks on customizing their site CSS, it will be important to know whether they are using a custom theme or a standard SM theme.

leftquark

I always recommend putting CSS in the Themes "Advanced" CSS section since it gets loaded last, which means it has highest precedence in CSS's structure (whatever's last wins if there are conflicts). Adding it there also requires you to add create your own theme, which would then make .sm-user-ui the proper class to call out. If you're adding CSS content blocks to pages things can get a little weird.

Why do we have 2 different places to add CSS with no clear distinction on which one to use? That probably came down to conflicting user behaviors as we designed the Customizer -- at the time everyone was accustomed to using "Themes" and tweaking them, so applying CSS to a theme made sense, especially since you want your theme to apply to various places on your site. The CSS content block was built for those times when you just wanted to apply CSS to a particular page and not your entire theme.

Going forward our general theme will be to simplify things while balancing it with the advanced functionality and customization that you all love. We'll try to be more clear about when to use which, and more importantly, to try to automate as many things for you as we can.

**tl;dr:

• Use CSS content blocks when you want it to apply to a specific page
• Put CSS in the Theme when you want it to apply to multiple pages or across your whole site.**

camner

@leftquark said:
I always recommend putting CSS in the Themes "Advanced" CSS section since it gets loaded last, which means it has highest precedence in CSS's structure (whatever's last wins if there are conflicts). Adding it there also requires you to add create your own theme, which would then make .sm-user-ui the proper class to call out. If you're adding CSS content blocks to pages things can get a little weird.

I didn't think I was adding CSS content blocks to a page. I went to Content & Design, clicked "Entire Site" and added a CSS content block there, which I THOUGHT was adding the CSS in the right place to apply to the entire theme. Maybe the fact that what I did was possible was an unintended consequence of having the ability to drag CSS content blocks in general.

Why do we have 2 different places to add CSS with no clear distinction on which one to use? That probably came down to conflicting user behaviors as we designed the Customizer -- at the time everyone was accustomed to using "Themes" and tweaking them, so applying CSS to a theme made sense, especially since you want your theme to apply to various places on your site. The CSS content block was built for those times when you just wanted to apply CSS to a particular page and not your entire theme.

It iss actually helpful to be able to apply CSS to a particular page. I have done that for my site landing page...I have both an HTML block AND a CSS block there.

Going forward our general theme will be to simplify things while balancing it with the advanced functionality and customization that you all love. We'll try to be more clear about when to use which, and more importantly, to try to automate as many things for you as we can.

**tl;dr:

• Use CSS content blocks when you want it to apply to a specific page
• Put CSS in the Theme when you want it to apply to multiple pages or across your whole site.**

I really appreciate your taking the time to explain this; it is always helpful to understand what's going on under the hood.