Well, I tried backgroundColor="dadada" but I didn't get anything, and I looked at Flatio (which I think is what you were referring to), but it uses images for this stuff.
But most importantly - what's up with the font rendering?
My layout.xml is
<!----------------------------------------------------------------------------------------------------------------------------------->
<!-- Settings -->
<!----------------------------------------------------------------------------------------------------------------------------------->
<layout width="1920" height="1080" font="fonts/Helvetica-Bold.ttf" loadFontSize="42" loadFontSize="60" loadFontSize="72" fontColor="282828">
<!----------------------------------------------------------------------------------------------------------------------------------->
<!-- Sounds -->
<!----------------------------------------------------------------------------------------------------------------------------------->
<sound type="highlight" src="sounds/highlight.wav" />
<sound type="select" src="sounds/select.wav" />
<!----------------------------------------------------------------------------------------------------------------------------------->
<!-- Main Menu -->
<!----------------------------------------------------------------------------------------------------------------------------------->
<reloadableImage type="background" mode="layout" x="0" y="0" width="stretch" layer="0">
<onMenuEnter menuIndex="0">
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</reloadableImage>
<menu type="custom" imageType="" orientation="vertical" width="1500" height="100" scrollTime=".24" scrollAcceleration=".04">
<itemDefaults spacing="2" y="center" x="center" yOrigin="center" xOrigin="center" fontSize="60" width="1500" maxHeight="120" alpha="0.7" layer="16"/>
<item yOffset="-664" alpha="0" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1430" to="830" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="830" to="1430" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="-568">
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1370" to="770" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="770" to="1370" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="-464">
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1310" to="710" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="710" to="1310" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="-354">
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1265" to="665" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="665" to="1265" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="-238">
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1230" to="630" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="630" to="1230" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="-120">
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1210" to="610" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="610" to="1210" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item backgroundColor="dedede" fontSize="72" fontColor="eaeaea" layer="17" width="1500" maxHeight="200" alpha="1" selected="true">
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1300" to="600" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="600" to="1300" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="120" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1210" to="610" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="610" to="1210" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="238" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1230" to="630" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="630" to="1230" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="354" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1265" to="665" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="665" to="1265" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="464" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1310" to="710" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="710" to="1310" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="568" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1370" to="770" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="770" to="1370" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
<item yOffset="664" alpha="0" >
<onMenuEnter menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="1430" to="830" algorithm="easeincircular"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="0">
<set duration=".25">
<animate type="xOffset" from="830" to="1430" algorithm="easeincircular"/>
</set>
</onMenuExit>
</item>
</menu>
<!----------------------------------------------------------------------------------------------------------------------------------->
<!-- Sub Menu -->
<!----------------------------------------------------------------------------------------------------------------------------------->
<menu type="custom" imageType="" orientation="vertical" width="1500" height="100" scrollTime=".24" scrollAcceleration=".04">
<itemDefaults font="fonts/Helvetica-Bold.ttf" spacing="2" y="center" x="center" yOrigin="center" xOrigin="center" fontSize="42" width="1500" maxHeight="120" layer="16" alpha="1"/>
<item xOffset="0" angle="0" yOffset="-664" alpha="0" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="-568">
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="-464">
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="-354">
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="-238">
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="-120">
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" yOffset="0" layer="17" width="1500" maxHeight="200" alpha="1" selected="true" fontSize="72" fontColor="000000">
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="120" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="238" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="354" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="464" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="568" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
<item xOffset="0" angle="0" yOffset="664" alpha="0" >
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</item>
</menu>
<image src="images/video_overlay.png" x="0" y="0" width="stretch" alpha="0" layer="13">
<onMenuEnter menuIndex="1">
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</image>
<image src="images/dark_overlay.png" x="0" y="0" width="stretch" alpha="0" layer="13">
<onMenuEnter menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0.3" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</image>
<image src="images/items.png" x="center" y="center" yOrigin="center" xOrigin="center" height="150" width="stretch" alpha="0" layer="13">
<onMenuEnter menuIndex="1">
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</image>
<image src="images/items.png" x="center" y="center" yOrigin="center" xOrigin="center" height="150" width="stretch" alpha="0" layer="17">
<onMenuEnter menuIndex="1">
<set duration="0.1">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
</image>
<reloadableVideo imageType="screenshot" alpha="1" x="0" y="center" yOrigin="center" Width="stretch" layer="7">
<onEnter>
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
<animate type="x" to="0"/>
<animate type="y" to="center" />
<animate type="Width" to="stretch"/>
</set>
</onEnter>
<onMenuEnter menuIndex="0">
<set duration=".01">
<animate type="x" to="0"/>
<animate type="y" to="0" />
<animate type="y" to="center" />
<animate type="Width" to="stretch"/>
</set>
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onHighlightEnter menuIndex="0">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onHighlightEnter>
<onMenuExit menuIndex="0">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
<onExit>
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onExit>
<onMenuEnter menuIndex="1">
<set duration=".01">
<animate type="x" to="0"/>
<animate type="y" to="center" />
<animate type="Width" to="stretch"/>
</set>
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onHighlightEnter menuIndex="1">
<set duration=".01">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onHighlightEnter>
<onMenuExit menuIndex="1">
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
<set duration=".01">
<animate type="x" to="0"/>
<animate type="y" to="center" />
<animate type="Width" to="stretch"/>
</set>
</onMenuExit>
</reloadableVideo>
<!----------------------------------------------------------------------------------------------------------------------------------->
<!-- Other -->
<!----------------------------------------------------------------------------------------------------------------------------------->
<reloadableImage type="playlist" mode="commonlayout" alpha="1" x="1850" y="430" xOrigin="center" yOrigin="top" maxHeight="96" layer="19">
<onEnter>
<set duration=".8">
<animate type="nop"/>
</set>
</onEnter>
<onExit>
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onExit>
<onMenuEnter menuIndex="0">
<set duration=".8">
<animate type="y" to="430" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuEnter menuIndex="1">
<set duration=".01">
<animate type="y" from="-50" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuEnter>
<onMenuExit>
<set duration=".01">
<animate type="alpha" to="0" algorithm="easeinquadratic"/>
</set>
</onMenuExit>
<onIdle>
<set duration="1">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
<set duration="1">
<animate type="alpha" to="1" algorithm="easeinquadratic"/>
</set>
</onIdle>
</reloadableImage>
</layout>
You can see some artifacts, it renders the font with a border, and just how compressed it looks compared to the picture I posted above (which is how it renders on Photoshop). I switched the font around from .otf to .ttf but it doesn't fix the problems mentioned... am I doing something wrong or is this how it works currently?