How to Style

Like the web, styling is added at the top of the document.

<?xml version="1.0" encoding="UTF-8" ?>
<document>
    <head>
        <style>
            <!-- custom styles -->
        </style>
    </head>
    <stackTemplate>
        <!-- template content -->
    </stackTemplate>
</document>

Standard styling rules apply using classes and ids.

<document>
    <head>
        <style>
            .lockupTitle {
                tv-text-highlight-style: marquee-and-show-on-highlight;
            }
        </style>
    </head>
    <stackTemplate>
        ...
        <lockup>
            <img src="..." width="..." height="..." />
            <title class="lockupTitle">...</title>
            ...
        </lockup>
    </stackTemplate>
    ...
</document>

Global Styles

To add your configured site-wide styles to a page, simply add the SiteStyles merge field to your styles section.

<?xml version="1.0" encoding="UTF-8" ?>
<document>
    <head>
        <style>
            {{ SiteStyles }}
            <!-- custom styles -->
        </style>
    </head>
    <stackTemplate>
        <!-- template content -->
    </stackTemplate>
</document>

Styling Syntax

The styling syntax is very similar to CSS. The TVML documentation covers the various options well. In the sections below we'll summarize some of the more common/useful concepts that are unique to TVML.