JaysArcade Posted July 12, 2021 Share Posted July 12, 2021 (edited) 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 Frames Stacks Docks Viewboxes TEXT UI ELEMENT Spoiler Text UI Element Properties Panel Constant Value Metadata Value Fallback Text Text Format Change the Font Text Trimming Text Wrapping Text Alignment Text Color 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. 8 4 1 3 Quote Link to comment Share on other sites More sharing options...
asmithau Posted August 19, 2021 Share Posted August 19, 2021 Thanks @JaysArcade for pulling this together! Great stuff! 1 Quote Link to comment Share on other sites More sharing options...
proghodet Posted August 19, 2021 Share Posted August 19, 2021 On 7/13/2021 at 12:55 AM, JaysArcade said: Is Faeran ETA Prime's cousin? https://youtu.be/Eu7U0sb1p94?t=2027 ? 1 Quote Link to comment Share on other sites More sharing options...
JaysArcade Posted August 19, 2021 Author Share Posted August 19, 2021 8 hours ago, asmithau said: Thanks @JaysArcade for pulling this together! Great stuff! You're welcome. But the real thanks goes to Faeran and y2guru for putting these together in the first place. 1 Quote Link to comment Share on other sites More sharing options...
The Papaw Posted November 9 Share Posted November 9 @JaysArcade This is amazing Jay! Thank you very much for doing this. Sure wish I found it sooner (well I really didn't find it, @JoeViking245 turned me onto it, thx Joe) 1 Quote Link to comment Share on other sites More sharing options...
JaysArcade Posted November 10 Author Share Posted November 10 8 hours ago, The Papaw said: @JaysArcade This is amazing Jay! Thank you very much for doing this. Sure wish I found it sooner (well I really didn't find it, @JoeViking245 turned me onto it, thx Joe) You're welcome. Some of it is out of date like the wheel properties (rotate/curve) but a lot of it is still applicable and gives a good overview of how the CTC works. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.