Working with Object Styles via Clipboard

Heads-Up!
1

Just a reminder to anyone else using @DanShockley AppleScript library to extend object styles.

When you modify the CSS you will also need to replace the CustomStyles "name." This is a UUID prefixed with "fm-" and you can replace it with anything you like.

If you don't replace the name, when you paste the content back, you'll never see your CSS changes, you'll see the CSS referenced by the name.

When you do change the name, the pasted object is treated as changed style. You can save the new style into the theme.

1 Like
2

I know a little bit about the custom theme stuff using a UUID, but can you describe a scenario/series of steps in a bit more detail where you would want to change the UUID?

Thanks in advance if you have a few minutes for this.

3

Themes are controlled by CSS. The inspector allows you to set the look of a lot of the elements but it does not have UI controls for all of the elements. An object copied from a layout is described in FMClipping XML. It can be converted to plain text by tools that can manipulate the clipboard, such as @DanShockley's AppleScript FMClipTools that I linked to above. When you look at the CSS contained in the XML you can often see the extra elements which are not accessible via the UI controls in the Inspector.

In this case, I wanted to be able to manipulate the border appearance of a container field. When you drag-n-drop an object onto a container field it changes appearance. The UI doesn't let you control the look of the "drop zone." However, the CSS is there.

I had already given the container field that I copied some custom styling and had saved that as an object style. That means the object style has a name, which we see in the Theme Inspector, and a UUID for internal references. For the first few tries, I was copying the XML out, making changes, and copying it back into my file. When I tested, none of the changes I made were evident. It took several rounds of copy, edit, paste, test, for me to realise that the object with the changed CSS was retaining the theme object name. And, of course, it was displaying the CSS for that object name.

When an object is copied out to the clipboard, the css contains the object reference with it's UUID, and the complete set of CSS styles. If you paste that object into a layout that has the same theme as the original layout then it picks up the UUID and links to the theme styles. The set of CSS styles is discarded.

If you paste the object into a layout with a different theme then the object UUID cannot be linked. In that case, it imports the complete set of CSS styles to render the object. In the inspector the object is assigned the Default style with an asterix to show it has got local styles extending the Defaults.

Changing the UUID of the object style reference in the CSS ensures that the object style reference will not match any of the UUIDs in the theme, and then the complete set of CSS styles will be imported, and used to render the object.

This allows you to import CSS object styles that are impossible to manage in other ways.