Hi all,
wondering if anybody figured a way to put the Hero image to the left of the stack and the infolist to the right on a ProductTemplate.
I've been trying different things and can't seem to get the image to appear on the left. (ie putting an img inside the infolist, )
Ultimately I want to put the hero image on the left, description in the middle and all the actor/director names on the right.
This is what I currently have:
<document>
<head>
<style>
.longTitleOnHighlightMarquee { tv-text-highlight-style: marquee-on-highlight;} .longTitleOnHighlight { tv-text-max-lines: 3; text-align: left;} .video_type_0 { tv-text-max-lines: 3} .video_type_2 { border-color: rgba( 255.0, 125.0, 100.0, 1.0);} .video_type_3 { border-color: rgba( 255.0, 125.0, 100.0, 1.0);} .video_type_4 { } .video_type_5 { } .video_type_6 { } .video_type_7 { border-color: rgba( 0.0, 125.0, 255.0, 1.0);} .video_type_8 { } .decoration_live_playlist { text-align: left; } .sectionTitle { text-color: black; font-weight: bolder; font-size: 22; margin: 20 0 0 0; } .shelfTitle { font-size: 60; margin: 0 0 30 0; font-weight: 200; color: rgba(255, 255, 255, 1); font-family: "SanFranciscoDisplay-Light";} .lockup { margin: 20px 80px 0 0; } .shelf { margin: 60px 80px 80px 80px; } .room { background-color: #091a2a;} .cbsHeader { padding: 28 0 0 0;} .spotlight { margin: -40 0 0 0; } .carouselTitle { position: relative; margin-top: 600px; text-color: rgba(255,255,255,1);; font-size: 80px;} .carouselSubtitle { position: relative; margin-top: 700px; text-color: rgba(255,255,255,1); font-size: 60px;} .listItemLockup { text-align: left; } .foo1 { margin: 22 0 0 0; } .searchResultsLabel { font-size: large; font-weight: 400; text-align: left; width:100%; } .searchResultsTitle { text-align: center; width: 100%; margin: 20 20 20 80; } collectionList shelf section:first-child{ margin:-80px 0 40px 0} .previouslyAiredShelf { margin: 100 20 0 20; } .live { background-color: #091a2a; } .liveVod { width: 250; height: 250; } .liveSection { tv-content-align: center;} .vod { width: 520; height: 280 } .related_vods {width: 468; height: 252; } .assetRating { border-color: rgba( 255.0, 255.0, 255.0, 1.0); background-color: #091a2a;} .vodDetailsStack {padding: -30 20 0 20; width: 1200} .castSummary { margin: 20 20 0 0; }
</style>
</head>
<productTemplate theme="dark">
<background>
<img style="tv-tint-color:rgba(1, 22, 43, 0.8);" src="http://127.0.0.1:8080/images/cbs-app-background.jpg"/>
</background>
<banner>
<infoList class="castSummary">
<info>
<header>
<title>Rating</title>
</header>
<text>15</text>
</info>
<info class="castSummary">
<header>
<title>Running Time</title>
</header>
<text>121 minutes</text>
</info>
<info id="directors">
<header>
<title>Directors</title>
</header>
<text class="directorName">Tim Burton</text>
</info>
<info id="actors">
<header>
<title>Actors</title>
</header>
<text class="actorName">Christopher Walken</text>
<text class="actorName">Danny DeVito</text>
<text class="actorName">Michelle Pfeiffer</text>
<text class="actorName">Michael Keaton</text>
</info>
</infoList>
<stack theme="dark" class="room vodDetailsStack">
<header class="vodDetailsTitle">
<title class="vodDetailsTitle">Batman Returns</title>
</header>
<description class="vodDetailsDescription" allowsZooming="true" onselect="showDialog(event)" presentation="modalDialogPresenter" template="templates/FullDescriptionDialog.xml">Tim Burton's dark and juicy sequel finds Michael Keaton's troubled superhero fighting off the mischievous attentions of Michelle Pfeiffer's super-sleek Catwoman and Danny DeVito's malevolent Penguin. Colder and deeper than the first reboot, Burton's gothic signature is all over this fantastical follow-up. Pfeiffer steals the show as the downtrodden secretary turned whip-cracking, PVC-clad *** kitten. Miiiaoww!<placeholder>Tim Burton's dark and juicy sequel finds Michael Keaton's troubled superhero fighting off the mischievous attentions of Michelle Pfeiffer's super-sleek Catwoman and Danny DeVito's malevolent Penguin. Colder and deeper than the first reboot, Burton's gothic signature is all over this fantastical follow-up. Pfeiffer steals the show as the downtrodden secretary turned whip-cracking, PVC-clad *** kitten. Miiiaoww!</placeholder></description>
<row>
<buttonLockup onselect="playVideo(event)" video_id="1575204">
<placeholder>
<title>Batman Returns</title>
<duration>7260</duration>
<description>Tim Burton's dark and juicy sequel finds Michael Keaton's troubled superhero fighting off the mischievous attentions of Michelle Pfeiffer's super-sleek Catwoman and Danny DeVito's malevolent Penguin. Colder and deeper than the first reboot, Burton's gothic signature is all over this fantastical follow-up. Pfeiffer steals the show as the downtrodden secretary turned whip-cracking, PVC-clad *** kitten. Miiiaoww!</description>
<thumbnail>http://[url to thumbnail].cloudfront.net/thumbs/1575204.jpg</thumbnail>
</placeholder>
<badge src="resource://button-play" class="buttonBadge"/>
<title>Play</title>
</buttonLockup>
<buttonLockup id="favoriteButton">
<badge src="resource://button-rate" class="buttonBadge"/>
</buttonLockup>
</row>
<heroImg src="[url to hero image]" width="700" height="394"/>
</stack>
</banner>
</productTemplate>
</document>