How to remove an override in a class

User 2778508 Photo


Registered User
31 posts

When you customize a class, a vertical blue line appears next to the property to signal that it's customized at the class level.

I can use ^z to remove the override if it's the last thing I did.

But let's say I have an existing component that has one or more overrides I don't want anymore.

If it's the background color, I've found I can set the color to #000000 and the alpha to 0 but the CSS has a "background-color: transparent;" property. For this use case, it's probably harmless.

However, if I want to remove the class override for another property, say "min-width", then no matter what I set it to, even if it's set back to its original default value (in my case, 10px), the .CSS contains a "min-width: " override.

So, how do I remove the blue vertical line from parameters?

Curtis
User 187934 Photo


Senior Advisor
18,552 posts
Online Now

You can reset the element by clicking the circular arrow to the right of the State selector just below your Class.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2778508 Photo


Registered User
31 posts

Reset, as you're aware, clears the override from all of the properties. How do I remove the override for one specific property?
User 2273654 Photo


Registered User
641 posts

Hi Curtis, If you take a screen shot of the properties before you clear it then you can easily and quickly put it to the way you want it using your recorded image as reference.

User 2778508 Photo


Registered User
31 posts

GregB,

I know you meant well but I disagree with your "quick and easy" solution. To me, quick and easy is to right-click on the property's name and choose "reset".

Try your technique on the lady-bug.rsd. The Action Button_Link object has a custom padding 15/25/15/25. Here's the task: remove the custom padding so that it's inherited from the parent. By collapsing the Element panel, I need two screenshots to capture all the properties. I also need screenshots of the Typography, Border and Background colors. The Action button has a Hover customization that will be lost when the component is reset, so you need to do all of the above for the Hover state too. That's 10 screenshots for just one resolution. There are only 4 screen resolutions in the lady-bug design, so that's a total of 40 screenshots.

I can do better than that by using the read-only CSS on the Inspector panel. I can copy-paste the original CSS into a notepad document. I can then reset the component and then compare the new CSS against the old CSS in the notepad document. Doing that, there are only 10 fields that need to be updated. It took me two times to get it right but I leaned a lot about RSD with this exercise. I can verify that I got all of the settings right by comparing the new read-only CSS against the original read-only CSS.

I appreciate your suggestion because it made me learn about a part of RSD that I didn't know about. I've always wondered how the generated CSS correlates with the data entry panels and now I know. I've also wondered what's the best way to reverse-engineer a technique in a component. I feel better equipped to do that now too.

I maintain that there needs to be a better way to reset a property than using the two above techniques.

Thanks for your suggestion.

Curtis
User 187934 Photo


Senior Advisor
18,552 posts
Online Now

Edit the class name or add an ID.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2778508 Photo


Registered User
31 posts

Eric,

Your answer sounds interesting, but can you give more details? Say it's the example I gave in my previous post: you want the padding for the Action Button_Link object in lady-bug.rsd to inherit from its parent instead of using the customized value (15/25/15/25). I know how to change the class name or to add an ID. But how does that help me reset the inheritance (remove the blue line) for a specific parameter?

Curtis
User 187934 Photo


Senior Advisor
18,552 posts
Online Now

Apply the change to the new class or the ID.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2778508 Photo


Registered User
31 posts

How do I remove the blue 'inheritance' line from a parameter in the new class or ID?
User 103173 Photo


VP of Software Development
0 posts

Curtis Krauskopf wrote:
How do I remove the blue 'inheritance' line from a parameter in the new class or ID?

You can reset the styles for that element by clicking the circular arrow to the right of the State selector drop down located under the STYLE heading.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.