06 Main Menu Background
Introduction
The first set of modifications that we make to move from the templates to your own theme is to set the background for the menus. Depending on your theme, the background may be static or it may change depending on different factors.
Static (Non-Changing) Background
The simplest menu background is a static background. Your background may be a simple shape with a border and fill, or it may be a full-screen image.
Solid Color or Gradient
If your theme's background is a solid color, then the modification is very simple. You may already have made the modification in an earlier lesson. If not, find the existing definition for the background shape:
<shape name="shape_background"> <area>0,0,100%,100%</area> <type>roundbox</type> <cornerradius>4</cornerradius> <fill color="#101010" alpha="255" /> <line color="#FFFFFF" alpha="255" width="4" /></shape>Determine the hexadecimal value of the color that you want for your background, and then modify fill color accordingly. You may want to change the type to box and remove the cornerradius definition, depending on your needs. Modify or remove the line color to suit your needs as well.
If, instead of a solid color, you want the background to be a simple gradient (a blend of two colors), modify shape_background to something like the following:
<shape name="shape_background"> <area>0,0,100%,100%</area> <type>roundbox</type> <cornerradius>4</cornerradius> <fill style="gradient"> <gradient start="#FF0000" end="#0000FF" alpha="255" direction="diagonal" /> </fill> <line color="#FFFFFF" alpha="255" width="4" /></shape>For a more complex gradient, you could try something like this:
<shape name="shape_background"> <area>0,0,100%,100%</area> <type>roundbox</type> <cornerradius>4</cornerradius> <fill style="gradient"> <gradient direction="vertical" alpha="255">
<stop position="0" color="#000000" />
<stop position="25" color="#FFFFFF" alpha="40" />
<stop position="100" color="#000000" />
</gradient>
</fill> <line color="#FFFFFF" alpha="255" width="4" /></shape>
For more information on defining gradients, see the documentation at the MythTV Wiki. A link is provided at the end of the lesson.
Once you have defined the shape, save your changes, copy the changed files into your mythtv working directory, and then request mythfrontend to reload your theme.
Background Image
If, instead of a solid color, you would rather use a static image for the background of your theme, there are a couple of changes to make to your base.xml file. First, define your background image with something like the following:
<imagetype name="imagetype_bg" from="imagetype_default"> <filename>images/background.png</filename></imagetype>Note that, with this definition, you place a PNG of your background image, called background.png, in the images folder in your theme. Modify as needed for your theme. Also, be sure that your background image is at least as large as your window size. If it is bigger, it will be scaled down to fit. If it is smaller, it will not be expanded to fit the screen.
Next, modify the backgroundwindow definition to the following:
<window name="backgroundwindow"> <imagetype name="window_bg" from="imagetype_bg" /></window>Once you have made your changes, copy the changed files into your mythtv working directory, and then request mythfrontend to reload your theme.
Dynamic Background - Menu-Level Dependant
One option for dynamic backgrounds is to use a different background depending on the menu that is displayed (e.g. main menu, television menu). The example provided here uses images; you easily could use shapes instead.
Start by defining some imagetypes in base.xml so that you can reuse the images in other UI screens:
<imagetype name="imagetype_bg_default" from="imagetype_default"> <filename>images/background/default.png</filename></imagetype><imagetype name="imagetype_bg_tv" from="imagetype_default"> <filename>images/background/tv.png</filename></imagetype>After that, alter the window in menu-ui.xml to use the titles statetype:
<window name="mainmenu"> <statetype name="titles"> <area>0,0,100%,100%</area> <state name="Default"> <imagetype name="bg_Default" from="imagetype_bg_default" /> </state> <state name="TV"> <imagetype name="bg_TV" from="imagetype_bg_tv" /> </state> <state name="MAIN" from="Default"> </state> <state name="MUSIC" from="Default"> </state> </statetype><buttonlist name="menu" from="buttonlist_vertical">
</buttonlist>
</window>The sample provided here only shows a few of the possible states. The snippet file provided at the end of this lesson has a more complete set of states.
As noted in the previous section, if you are using images for backgrounds, be sure that they are at least as large as your window size. If the images are smaller, they will not be expanded to fill the screen.
Dynamic Background - Selected-Item Dependant
Another option for dynamic backgrounds is to use a different background depending on the menu item that currently is selected. The example provided here uses images; you easily could use shapes instead.
As in the previous section, start by defining some imagetypes in base.xml so that you can reuse the images in other UI screens:
<imagetype name="imagetype_bg_default" from="imagetype_default"> <filename>images/background/default.png</filename></imagetype><imagetype name="imagetype_bg_tv" from="imagetype_default"> <filename>images/background/tv.png</filename></imagetype><imagetype name="imagetype_bg_music" from="imagetype_default"> <filename>images/background/music.png</filename></imagetype>After that, alter the window in menu-ui.xml to use the watermarks statetype:
<window name="mainmenu">
<statetype name="watermarks">
<area>0,0,100%,100%</area>
<state name="Default">
<imagetype name="bg_Default" from="imagetype_bg_default" />
</state>
<state name="TV">
<imagetype name="bg_TV" from="imagetype_bg_tv" />
</state>
<state name="TV_WATCH_TV" from="TV">
</state>
<state name="MUSIC">
<imagetype name="bg_Music" from="imagetype_bg_music" />
</state>
<state name="MUSIC_PLAY" from="MUSIC">
</state>
<state name="VIDEO" from="Default">
</state>
</statetype>
<buttonlist name="menu" from="buttonlist_vertical">
</buttonlist>
</window>
Again, the sample provided here only shows a few of the possible states. The snippet file provided at the end of this lesson has a more complete set of states.
Again as noted in previous sections, if you are using images for backgrounds, be sure that they are at least as large as your window size. If the images are smaller, they will not be expanded to fill the screen.