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

You can reset the element by clicking the circular arrow to the right of the State selector just below your Class.

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

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.

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

Edit the class name or add an ID.

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

Apply the change to the new class or the ID.

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.