Before/After text change in only one instance of use

DebsWebs · September 2021

Hi,

I am using the Before/After shortcode in several places on my site and it's great! However, in one of the isntances, using Before/After doesn't make sense, so I would like to change that one instance of the hover text. I have located the CSS that controls the Before/After text content, but I'm having a terrible time just targeting the one instance that I need to change.

Can you please help me target this text and create the new instance? I have tried adding a class to the .twentytwenty-before-label::before css rule, but so far nothing that I have tried has worked. Everything I've done has made the change globally or been completely ignored.

I've tried .twentytwenty-before-label .marketing:: before...

.twentytwenty-before-label>marketing::before...

.twentytwenty-before-label.marketing::before...

and a few other options.

I would greatly appreciate a bit of help with this.

Thanks so much!

Phil · September 2021

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us the link.

It is always a good idea to also attach a screenshot showing what you want to change and achieve.

Thanks

DebsWebs · September 2021

I just need to change the word Before and the word After in the hover text on the Before/After shortcode. I have currently set it to not show any words by putting a blank in the CSS code.

.twentytwenty-before-label::before {

content: "";

}

.twentytwenty-after-label::before {

content: "";

}

We are not quite sure exactly what we want to change the text to, but it can't say Before and After when hovered. I figured out how to change the text for all of the instances of the Before/After shortcode, but now I need to customize only one instance of that shortcode. All of the other instances of the Before/After shortcode still need to say Before/After. I also found the shortcode code in the php files, but I am unsure if duplicating that and editing it will work in conjunction with CSS changes. Please point me in the right direction.

Here's a link to the page: https://www.s-g-marine.com/media-campaign, and the Before/After in question.

Screen Shot 2021-09-13 at 10.44.03 AM.png

Thanks for your help.

Phil · September 2021

To do that, you can add a class to this particular Before After item, and wrote a special CSS for this class.

Check the following screenshot for a better understanding

.noBefAft .twentytwenty-before-label::before,
.noBefAft .twentytwenty-after-label::before {
 content: ""!important;
}

Thanks

DebsWebs · September 2021

Thank you so much! This is perfect!!! I was super close to getting it right on my own. I basically only needed to switch the special class to in front of the .twentytwenty.... and add the !important at the end. Otherwise I had it right.

Thanks for the awesome support! My client will be SO happy.

Phil · September 2021

I am glad that I could help, and thanks for your kind words.

If I can help you with anything else, please, let me know.

Thanks

Before/After text change in only one instance of use

Comments