Tips for using the Community Theme Creator - video bookmarks and other notes

JaysArcade · July 12, 2021

The Community Theme Creator is an amazing tool. Unfortunately, as of this time, there is no documentation. There are however, several excellent videos by y2guru and Faeran on the subject. I have recently begun saving bookmarks and other tips from the videos to use as a reference if I ever need to remember how to do something in the Theme Creator. The videos can be pretty long so hopefully this will be helpful for anyone looking for specific info.

The bookmarks are time stamped to take you directly to the subject matter within the video.

The Basics

How To Build a Big Box Theme

Spoiler

Download and Install the COMMUNITY Theme Creator

Creating a new Theme

Explaining the GUI

Creating Your First View

Publish Your Theme Into Big Box

Test Your Theme in Big Box

Basics of UI & Parenting Elements

Spoiler

UI Element Windows & Element Positioning

What are Parenting Elements

Grids and Canvases

Differences between Grids and Canvases

TEXT UI ELEMENT

Spoiler

Where's the Release Date?

IMAGE UI ELEMENT

Spoiler

Image UI Element

Media Image - Static Image

Basic Image Manipulation

Metadata Image

Fallback Image

Metadata Text Images

Favorites/Broken/Completed Images

Gray Scale & Color Tint

The links below are miscellaneous and in no particular order.

Beginner

Starting a new Theme https://youtu.be/Eu7U0sb1p94?t=754

Setting your intended aspect ratio for the theme and explanation of the different ratios - https://youtu.be/Eu7U0sb1p94?t=779

Explanation of different views within BigBox and selecting view to edit - https://youtu.be/Eu7U0sb1p94?t=838

Opening a new Platform View to edit - https://youtu.be/Eu7U0sb1p94?t=953

Explanation of a Mandatory UI Element. - https://youtu.be/Eu7U0sb1p94?t=986

Explanation of X,Y Coordinates and other properties - https://youtu.be/Eu7U0sb1p94?t=1004

How to add new elements to a theme and brief explanation of types of elements. https://youtu.be/Eu7U0sb1p94?t=1052

Resizing a wheel element https://youtu.be/Eu7U0sb1p94?t=1105

Explaining wheel properties - camera zposition, Item zposition, selected zposition, https://youtu.be/Eu7U0sb1p94?t=8435

Specifying images to use in a wheel https://youtu.be/Eu7U0sb1p94?t=1176

Using the Wheel stylization assist button to quickly set up your wheel - https://youtu.be/Eu7U0sb1p94?t=1236

Adding an image - https://youtu.be/Eu7U0sb1p94?t=1310

Making an image (or other element ) fullscreen - https://youtu.be/Eu7U0sb1p94?t=1317

Aligning an image - https://youtu.be/Eu7U0sb1p94?t=1363

Re-naming the image element (or any other element) https://youtu.be/Eu7U0sb1p94?t=1366

Specifiying what image to use and explanation of how to use image metadata to choose images dynamically - https://youtu.be/Eu7U0sb1p94?t=1378

Organizing groups and elements - Creating new Groups - https://youtu.be/Eu7U0sb1p94?t=1498

Explanation of Stretch - Fill, None, Uniform, Uniform to FIll - https://youtu.be/Eu7U0sb1p94?t=1557

Adding a video - Explaning difference between user defined video and selected item video - https://youtu.be/Eu7U0sb1p94?t=1936

Is Faeran ETA Prime's cousin? https://youtu.be/Eu7U0sb1p94?t=2027

Aspect ratio of video - keep or stretch - https://youtu.be/Eu7U0sb1p94?t=2178

Importance of Order of Elements/Layers https://youtu.be/Eu7U0sb1p94?t=2325

Copy and pasting an element's properties to another element or to a parent https://youtu.be/Eu7U0sb1p94?t=3652

Add a text scroller https://youtu.be/Eu7U0sb1p94?t=4453

Change the font of text scroller https://youtu.be/Eu7U0sb1p94?t=4634

Determine what to display within text scroller https://youtu.be/Eu7U0sb1p94?t=4667

Change direction (vertical / horizontal) of text scroller https://youtu.be/Eu7U0sb1p94?t=4691

Change the scroll speed of text scroller https://youtu.be/Eu7U0sb1p94?t=4702

Adding a release date element https://youtu.be/Eu7U0sb1p94?t=5001

Adding Platform Name text metadata https://youtu.be/Eu7U0sb1p94?t=5480

Taking Platform Name length into consideration https://youtu.be/Eu7U0sb1p94?t=5541

Editing Text Format (uppercase lowercase), centering text, wrapping text (Wrap, NoWrap, WrapWithOverflow), trimming text (CharacterElipsis - WordEllipsis) https://youtu.be/Eu7U0sb1p94?t=5574

Move an element with cursor - Move an element quickly with cursor plus shift key https://youtu.be/Eu7U0sb1p94?t=5672

Changing text color and using color picker tool. Also a look at linear and radial gradients within color picker tool. https://youtu.be/Eu7U0sb1p94?t=5711

Adding a total games count text box https://youtu.be/Eu7U0sb1p94?t=5889

Adding a text box to display a constant value https://youtu.be/Eu7U0sb1p94?t=6074

Explanation of Smart guides for aligning elements https://youtu.be/Eu7U0sb1p94?t=6001

Adding and using a dock panel https://youtu.be/Eu7U0sb1p94?t=6669

Using Autosize - Width and Height - for the text in the dock https://youtu.be/Eu7U0sb1p94?t=7023

Using Margins to dynamically give text elements a designated amount of space regardless of each element's size. https://youtu.be/Eu7U0sb1p94?t=7068

Use a grid or a frame and brief description of how each works https://youtu.be/Eu7U0sb1p94?t=7635

Changing the background color and opacity of a grid. https://youtu.be/Eu7U0sb1p94?t=7749

Publish a theme https://youtu.be/Eu7U0sb1p94?t=2922

Hidden File Menu? https://youtu.be/Eu7U0sb1p94?t=8290

Parent Elements

Explanation and use of Frames https://youtu.be/4gSvaa-EaU8?t=3191

Explanation and use of Grids https://youtu.be/4gSvaa-EaU8?t=3416

Explanation of Viewboxes https://youtu.be/4gSvaa-EaU8?t=3519

Explanation of Dock https://youtu.be/4gSvaa-EaU8?t=3844

Explanation of Stack https://youtu.be/4gSvaa-EaU8?t=4046

Advanced

Adding an animation to a wheel - https://youtu.be/Eu7U0sb1p94?t=2543

Run Animation choices - Explaining differences of During Selection, Immediately, Once selected - https://youtu.be/Eu7U0sb1p94?t=2548

Animate a parent grid with text https://youtu.be/Eu7U0sb1p94?t=8197

Visibility conditioning - colors https://youtu.be/1eGobjpzoXs?t=3759

Using Visibility Conditioning to hide/show/collapse a text element depending on the status of another text element (if no release year, dash disappears). https://youtu.be/Eu7U0sb1p94?t=7243

Applying color tint and opacity mask to an image. https://youtu.be/lT_tIGdthV4?t=6923

Looking at text list wheel presets and creating your own text presets. https://youtu.be/1eGobjpzoXs?t=7710

Again, creating a custom text wheel preset. https://youtu.be/lT_tIGdthV4?t=7049

Understanding the 4 numbers in xaml- padding/margins, etc. https://youtu.be/1eGobjpzoXs?t=8096

Parent UI Element Viewbox https://youtu.be/fSmQyksxtgs?t=672

Obsolete elements and new metadata fields: Playmode1-4, Genre1-4, Region1-4 https://youtu.be/fSmQyksxtgs?t=123

Alt-a shortcut to trigger animation within Theme Creator https://youtu.be/lT_tIGdthV4?t=4609

Alt-i shortcut to enable include animations with movement within Theme Creator https://www.youtube.com/watch?v=Eu7U0sb1p94&t=8290s

Hidden File Menu? (In this menu you can also toggle the Alt-A, Alt-i commands mentioned above as well as other commands.) https://youtu.be/Eu7U0sb1p94?t=8290

Adding a simple animation to a clear logo. https://youtu.be/lT_tIGdthV4?t=4490

Quick demonstration of how to add a horizontal text scroller https://youtu.be/lT_tIGdthV4?t=7436

Video behind full color (rectangle) and applying opacity to the rectangle to reveal video beneath https://youtu.be/Eu7U0sb1p94?t=3761

Better optimize a theme by using one animation for a parent container (grid) to animate all elements in the parent as opposed to three elements having the same animation. https://youtu.be/Eu7U0sb1p94?t=4002

A quick look at selecting and using linear or radial gradients within the color picker tool https://youtu.be/Eu7U0sb1p94?t=5782

A look at injecting your own XAML code - User Source https://youtu.be/Eu7U0sb1p94?t=6141

Animation Triggers, During Selection, Once Selected, Immediately. https://youtu.be/ktKk3T9Pvag?t=589

A look at the Documentation.pdf in the ..\LaunchBox\Themes folder. https://youtu.be/Eu7U0sb1p94?t=6366

Adding sounds to your theme with the animation editor https://youtu.be/aeo8-08AVFU?t=3428

Adding custom navigation sounds to your theme https://youtu.be/aeo8-08AVFU?t=7189

Other notes

Collapsed = 0 height , 0 width , Hidden is not shown but width and height is still in place.

Create your docks (info rows) in a separate theme that you can copy from into a new theme, saves you setup.

Take a look at the documentation.pdf within the ..\LaunchBox\Themes folder. The document goes over all the different views and bindings that can be used in the xaml code.

Shortcuts

Alt-M to Enable/Disable Audio within editor.

Alt-A to Enable/Disable Animations within editor.

Alt-I to Enable/Disable Animations with Movement within editor.

Alt-V to Enable/Disable Videos within editor.

Alt-J to Enable/Disable Animated GIFs within editor (remember, J for JIF, I mean GIF).

Alt-H to Enable/Disable Hover Tracking within editor.

Alt-L to Enable/Disable Lock to Canvas within editor.

Alt-S to Enable/Disable Smart Guides within editor.

All shortcuts defined here can also be turned off and on in the hidden file menu within the editor by hovering your mouse at the top of the screen.

Deciphering the wheel properties

These notes were taken directly from the documentation.pdf that can be found in the Launchbox/Themes folder

ImageType: If not specified or left blank, the FlowControl will use the default ImageType for the active platform, or if no active platform an overall default image type will be used. Here are all the possible valid values for platforms views: Clear Logo, Fanart, Banner, Device Here are all the possible valid values for games views: Boxes, 3D Boxes, Carts, 3D Carts, Screenshots, Clear Logos.

CurveAmount: The CurveAmount is a multiplier decimal value that specifies how much the wheel should curve. Putting 0 in this value will result in no curve at all. A negative value will curve the wheel in the opposite direction. CurveAmount is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default CurveAmount value is 4.5.

RotationAmount: The RotationAmount is a multiplier decimal value that specifies how much items in the wheel should rotate as they move further from the selected position. Putting 0 in this value will result in no rotation. A negative value will curve the wheel in the opposite direction. RotationAmount is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default RotationAmount value is 0.

CameraZPosition: The CameraZPosition property specifies the position of the camera in relation to the Z positions of the images. Generally this affects the size of the images. The CameraZPosition property should always be greater than both the ItemZPosition and SelectedItemZPosition properties, or the images will appear behind the camera and hence not be shown. The bigger the CameraZPosition property, the further away from the images the camera will be, and thus the smaller the images will appear. The default CameraZPosition value is 3.0.

ItemZPosition: The ItemZPosition property specifies the Z position of items that are not the currently selected item. This also affects the size of the images in relation to the camera. The ItemZPosition property should always be less than the CameraZPosition property, or the images will appear behind the camera and hence not be shown. The bigger the ItemZPosition property, the closer the images will appear to the camera, and thus the bigger the images will appear. ItemZPosition is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default ItemZPosition value is 1.0.

SelectedItemZPosition: The SelectedItemZPosition property specifies the Z position of the currently selected item only. This affects the size of the selected image in relation to the camera. The SelectedItemZPosition property should always be less than the CameraZPosition property, or the images will appear behind the camera and hence not be shown. The bigger the SelectedItemZPosition property, the closer the selected image will appear to the camera, and thus the bigger the selected image will appear. Generally, the SelectedItemZPosition property should also be larger than the ItemZPosition property in order to make the selected item appear larger than the other items in the control. SelectedItemZPosition is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default SelectedItemZPosition value is 2.0.

Spacing: The Spacing property is a multiplier decimal value that specifies how close the images in the control should appear to each other. The greater the value for the Spacing property, the farther away the images will appear from each other. Spacing is currently only supported by the wheel views (WheelCoverFactory and HorizontalWheelCoverFactory). This property will be ignored for CoverFlow views. The default Spacing value is 1.0.

VisibleCount: The VisibleCount property specifies the total number of images displayed on the screen at once. This number is automatically increased by 3 on the backend in order to prevent clipping or popping as new images are added to the ends of the control. Therefore, if for some reason you want to display less than three images, you’ll need to set this to a negative value.

PageSize: The PageSize property is primarily used for Page Up and Page Down commands. This specifies how many images should be skipped in either direction when pressing Page Up or Page Down.

MaxVerticalImageResolutionOverride: Used to override the user’s default CoverFlow image quality settings. Omit this property to use the default settings (recommended for most scenarios). Cached images will be resized to this vertical resolution.

Note: CurveAmount and RotationAmount examples. These were counterintuitive to me so here are a few examples. Positive or negative values determine direction of curve or rotation. Default Platform and Games views behave similarly but are horizontal instead of vertical.

You are more than welcome to submit other tips, in fact please do! I will do my best to add them to this list. Questions are also welcome, however I'm no expert on the subject. I will add notes as I learn more about what can be done. I will organize and refine the list as time allows

Edited February 28, 2022 by JaysArcade
Added more links from Faraen's structured instructional video series. See spoilers.