Various issues with Marker customization

Unity Engine
,
1

I’m seeing a number of weird things with trying to visually modify markers on the timeline. Am I doing anything wrong trying to customize the timeline visuals? Can anyone give any more information on why things are working this way?

I started working from the example here: GitHub - Unity-Technologies/TimelineMarkerCustomization: Examples to show how markers and notifications work.

I’m using the latest Timeline package with 2022.3.21.

Here’s what I’m seeing:

  • It seems that I have to put any styles in Stylesheets/Extensions/common.uss. If I change any part of that path, I get the error:
    Cannot find style X for Y
    UnityEngine.GUIUtility:processEvent (int,intptr,bool&)
    Is that correct? I don’t see that documented anywhere; I only figured it out by starting from Unity’s example and modifying until things broke.

  • When I change the common.uss, nothing actually changes until I edit a random script and unity recompiles. Is that expected?

  • It seems like most uss parameters don’t work for marker customization. Here’s my stylesheet, with notes on what’s not working:

/* Hidden (Minimized) State */
DestroyEvent
{
    width: 24px;
    height: 24px;
    /* Loading one of the built-in editor icons works fine */
    background-image: resource("d_P4_DeletedLocal");
    /* None of these do anything */
    border-width: 1px;
    border-color: #FF0000;
    color: #FF0000;
    -unity-background-image-tint-color: rgb(255, 0, 0);
}
/* Normal State */
DestroyEvent:checked
{
    /* This works (built-in icon) */
    background-image: resource("Cancel");
    /* None of these do anything */
    border-width: 2px;
    border-color: #FF0000;
    background-color: rgba(255, 0, 0, 255);
    color: #FF0000;
    -unity-background-image-tint-color: rgb(255, 0, 0);
    /* These don't seem to work - it always uses the size from DestroyEvent at the top */
    width: 12px;
    height: 12px;
}
/* Selected State */
DestroyEvent:hover:focus:checked
{
    /* None of these do anything */
    background-image: none;
    background-color: rgba(255, 0, 0, 255);
    border-width: 1px;
    border-color: #FF0000;
    color: #FF0000;
    -unity-background-image-tint-color: rgba(255, 0, 0, 255);
    /* These don't seem to work - it always uses the size from DestroyEvent at the top */
    width: 12px;
    height: 12px;
}

Am I doing something incorrect here? Does anyone have a working example that allows you to change icon size, colors, borders, etc. in the different states?

2

FYI, I found this in the comments of TimelineAttributes.cs. It actually gives very helpful info that’s missing in the code documentation and the online guide, so I figured I’d post it here for anyone that’s interested.

///<summary>
/// Use this attribute to customize the appearance of a Marker.
/// </summary>
/// Specify the style to use to draw a Marker.
/// <example>
/// <code source="../DocCodeExamples/TimelineAttributesExamples.cs" region="declare-customStyleMarkerAttr" title="CustomStyleMarkerAttr"/>
/// </example>
/// How to create a custom style rule:
/// 1) Create a 'common.uss' USS file in an Editor folder in a StyleSheets/Extensions folder hierarchy.
/// Example of valid folder paths:
/// - Assets/Editor/StyleSheets/Extensions
/// - Assets/Editor/Markers/StyleSheets/Extensions
/// - Assets/Timeline/Editor/MyMarkers/StyleSheets/Extensions
/// Rules in 'dark.uss' are used if you use the Pro Skin and rules in 'light.uss' are used otherwise.
///
/// 2)In the USS file, create a styling rule to customize the appearance of the marker.
/// <example>
/// <code>
/// MyStyle
/// {
///   /* Specify the appearance of the marker in the collapsed state here. */
/// }
///
/// MyStyle:checked
/// {
///   /* Specify the appearance of the marker in the expanded state here. */
/// }
///
/// MyStyle:focused:checked
/// {
///   /* Specify the appearance of the marker in the selected state here. */
/// }
/// </code>
/// </example>
/// <seealso cref="UnityEngine.Timeline.Marker"/>
3

Something I learned while trying to figure out how marker USS actually works:

If you look through the USS documentation, it tells you to use url(‘’) for accessing images within your project. That doesn’t work for background-image icons for timeline markers. If you try it, you’ll get a StyleCatalog System.InvalidCastException error.

Instead, use this:

background-image: resource('Assets/Icons/MarkerIconSelected.png');