I admit I am new to tvml, but it seems to be designd for "anti-obvious"
I want to create a very simple UI with the following specs:
1) white background
2) image that takes about 80% width and 80% height of the screen and centered (both vertically and horizontally)
3) a text above the image
You would imagine something like this, would do the job close enough:
<?xml version="1.0" encoding="UTF-8"?>
<document>
<head>
<style>
.countdownTitle {
tv-text-style:none;
font-size: 45;
font-weight: light;
color: rgba(255, 255, 255, 1);
font-family: "SanFranciscoDisplay-Light";
}
.template {
background-color: rgb(255, 255, 255);
}
</style>
</head>
<oneupTemplate class="template">
<header>
<title class="countdownTitle">Skip Ad in {{SPLASH_AD_SECONDS}} seconds</title>
</header>
<section>
<lockup>
<img src="{{SPLASH_AD_SRC}}" width="1200" height="800"></img>
</lockup>
</section>
</oneupTemplate>
</document>
However the outcome is:
- background color does not get set. I tried different way to specify the color and the attribute name
- Text does not show up. I tried with text as well and different way to wrap it.
- Image size only with absolute dimensions. Ideally would like to make it relative to screen size (somehow)
If someone can reveal the secret behind tvml and its styling master mind, I might like it a bit more