How to change label color

[Nori]

Hi

This is Nori from BCKK.

Please help me creating customized player using BEML.

two questions.

1) Is there any way to change the color for the Label (id "thumbnailDate" and "thumbnailTime") based on the status (selected, not selected and rolledover)

2) Is there any way to change the text color to "white" for the Label id Description, videoDate and videoTime?

<Runtime>

<Theme name="Deluxe" style="Light">

<Style id="default"><![CDATA[

.titleText {

fontSize: 26;

}

.bodyText {

fontSize: 15;

active: #666666;

disabled: #999999;

rollover: #333333;

selected: #333333;

}

.linkText {

fontSize: 15;

active: #000099;

disabled: #B0B0B0;

rollover: #0000ff;

downState: #0000ff;

}

]]></Style>

<Style id="videoList"><![CDATA[

.background {

gradientTop: #28292a;

gradientMiddle: #28292a;

gradientBottom: #28292a;

border: #28292a;

}

.listItemBoxes {

gradientTop: #28292a;

gradientMiddle: #28292a;

gradientBottom: #28292a;

rolloverGradientTop: #454d50;

rolloverGradientMiddle: #454d50;

rolloverGradientBottom: #454d50;

selectedGradientTop: #454d50;

selectedGradientMiddle: #454d50;

selectedGradientBottom: #454d50;

border: #28292a;

}

.titleText {

active: #8ac9ff;

disabled: #B0B0B0;

rollover: #8ac9ff;

selected: #8ac9ff;

}

.bodyText {

active: #8ac9ff;

disabled: #B0B0B0;

rollover: #8ac9ff;

selected: #8ac9ff;

}

.linkText {

active: #8ac9ff;

disabled: #B0B0B0;

rollover: #8ac9ff;

downState: #8ac9ff;

}

.buttons {

gradientTop: #FDFDFD;

gradientBottom: #D2D2D2;

borderGradientTop: #E0DFDF;

borderGradientBottom: #ACABAB;

rolloverGradientTop: #FDFDFD;

rolloverGradientBottom: #D2D2D2;

downStateGradientTop: #FDFDFD;

downStateGradientBottom: #D2D2D2;

downStateBorder: #B0C645;

text: #777777;

rolloverText: #B0C645;

disabledText: #AAAAAA;

icons: #777777;

rolloverIcons: #B0C645;

disabledIcons: #AAAAAA;

}

.thumbnail {

innerBorderGradientTop: #FFFFFF;

innerBorderGradientBottom: #D2D2D2;

innerBorderRolloverGradientTop: #888888;

innerBorderRolloverGradientBottom: #4B4B4B;

innerBorderSelectedGradientTop: #B2C846;

innerBorderSelectedGradientBottom: #8C9E37;

outerBorderGradientTop: #E1E1E1;

outerBorderGradientBottom: #D2D2D2;

outerBorderRolloverGradientTop: #888888;

outerBorderRolloverGradientBottom: #4B4B4B;

outerBorderSelectedGradientTop: #B2C846;

outerBorderSelectedGradientBottom: #8C9E37;

}

.scrollbar {

trackGradientLeft: #FFFFFF;

trackGradientRight: #FFFFFF;

sliderGradientLeft: #E9E9E9;

sliderGradientRight: #F3F3F3;

arrows: #7B7B7B;

border: #CCCCCC;

}

]]></Style>

<Style class="TabBar"><![CDATA[

.tabs {

gradientTop: #fafafa;

gradientBottom: #e2e3e3;

rolloverGradientTop: #c4c4c5;

rolloverGradientBottom: #b4b5b5;

selectedGradientTop: #747474;

selectedGradientBottom: #333333;

borderGradientTop: #b7b7b7;

borderGradientBottom: #929292;

bottomBorderLine: #929292;

text: #555555;

rolloverText: #333333;

selectedText: #ff9f4a;

icons: #333333;

rolloverIcons: #68A4AB;

disabledIcons: #BAB9B9;

fontSize: 13;

}

.dropDownMenu {

backgroundGradientTop: #F3F3F3;

backgroundGradientBottom: #EBEBEB;

dividerLines: #CECECD;

rolloverRowGradientTop: #FFFFFF;

rolloverRowGradientBottom: #F6F6F6;

selectedRowGradientTop: #FFFFFF;

selectedRowGradientBottom: #F6F6F6;

text: #5E6062;

rolloverText: #68A4AB;

selectedText: #68A4AB;

arrows: #6D6D6D;

rolloverArrows: #68A4AB;

disabledArrows: #E5E5E5;

}

]]></Style>

<Style id="videoPlayer"><![CDATA[

.video { 

background: #000000;

}

.playerChrome {

gradientTop: #E5E5E5;

gradientMiddle: #EFEFEF;

gradientBottom: #E5E5E5;

border: #CCCCCC;

}

.buttons {

text: #777777;

rolloverText: #1A9FD5;

disabledText: #AAAAAA;

icons: #777777;

rolloverIcons: #1A9FD5;

disabledIcons: #AAAAAA;

}

.menuButton {

borderGradientTop: #BABABA;

borderGradientBottom: #BABABA;

}

.time {

text: #333333;

}

.playhead {

icon: #656565;

gradientTop: #EFEFEF;

gradientBottom: #EFEFEF;

}

.playheadWell {

unloadedGradientTop: #A8A8A8;

unloadedGradientBottom: #C3C3C3;

watchedGradientTop: #3399FF;

watchedGradientBottom: #3399FF;

bufferedGradientTop: #7E7E7E;

bufferedGradientBottom: #929292;

}

.volumeControl {

face: #D3FF67;

}

]]></Style>

<Style id="videoTitle"><![CDATA[

.titleText { 

active: #ffffff;

disabled: #A1A1A1;

rollover: #ffffff;

selected: #ffffff;

fontSize: 14;

}

]]></Style>

<Style id="Description"><![CDATA[

.text { 

active: #ffffff;

disabled: #ffffff;

rollover: #ffffff;

selected: #ffffff;

}

]]></Style>

<Style id="thumbnailDate"><![CDATA[

.text { 

active: #ffffff;

disabled: #B0B0B0;

rollover: #ffffff;

selected: #ffffff;

}

]]></Style>

<Style id="thumbnailItem"><![CDATA[

.text { 

active: #ffffff;

disabled: #B0B0B0;

rollover: #ffffff;

selected: #ffffff;

}

]]></Style>

<Style id="videoDate"><![CDATA[

.text { 

active: #ffffff;

disabled: #B0B0B0;

rollover: #ffffff;

selected: #ffffff;

}

]]></Style>

<Style id="videoTime"><![CDATA[

.text { 

active: #ffffff;

disabled: #B0B0B0;

rollover: #ffffff;

selected: #ffffff;

}

]]></Style>

</Theme>

<Layout width="790" height="547" boxType="hbox">

<VBox width="790">

<Spacer height="6"/>

<HBox height="23">

<Spacer width="10"/>

<TabBar id="playlistTabs" autoSizeTabs="false" tabWidth="96" depth="1" height="23" hideSingleTab="true" width="770"/>

<Spacer width="10"/>

</HBox>

<Spacer height="10"/>

<HBox hAlign="left">

<Spacer width="10"/>

<VBox>

<VideoPlayer id="videoPlayer" width="480" height="406" video="{videoList.selectedItem}"/>

<Spacer height="5"/>

<HBox width="480" height="20" vAlign="bottom">

<TitleLabel width="350" height="20" id="videoTitle" text="{videoPlayer.video.displayName}" selected="true" size="16" truncate="true"/>

<Label id="videoDate" width="100" height="12" size="10" hAlign="right" text="{videoPlayer.video.customFields.date}"/>

<Label id="videoTime" width="30" height="12" size="10" hAlign="right" text="{videoPlayer.video.customFields.time}"/>

</HBox>

<Spacer height="5"/>

<Label id="Description" width="480" height="72" size="14" truncate="true" multiline="true" text="{videoPlayer.video.shortDescription}"/>

</VBox>

<Spacer width="20"/>

<List id="videoList" width="280" height="508" rowHeight="80" itemLeading="4" automaticAdvance="true" data="{playlistTabs.selectedItem.videoDTOs}" selectOnClick="true">

<ListItem boxType="hbox">

<VBox>

<Spacer height="5"/>

<HBox hAlign="left" />

<Spacer width="5"/>

<ThumbnailButton data="{currentItem}" width="92" height="69" source="{currentItem.thumbnailURL}"/>

<Spacer width="5"/>

<VBox vAlign="top">

<TitleLabel id="videoTitle2" width="153" height="40" size="14" text="{currentItem.displayName}" multiline="true" truncate="true"/>

<HBox height="12">

<Label id="thumbnailDate" width="56" size="10" text="{currentItem.customFields.date}" style=""/>

<Label id="thumbnailTime" width="74" size="10" text="{currentItem.customFields.time}"/>

</HBox>

<HBox height="15">

<Label id="playtime:" width="55" height="15" size="10" text="playtime: "/>

<Label id="playtime" width="25" height="15" size="10" text="00:50"/>

</HBox>

</VBox>

<Spacer width="30"/>

</HBox>

</VBox>

</ListItem>

</List>

</HBox>

</VBox>

</Layout>

</Runtime>

Thank you in advance!

Nori 

[BC-Mikey · Accepted solution]

Hey Nori! :)

We have already touched base off the forums, but for the sake of posting the solution on the web:

1) Unfortunately, you cannot have all three states (selected, not selected, and rollover) at the same time for styling Labels. A <TitleLabel> will give you a selected and not selected (also called active). While a <Link> element will give you the option for a rollover state and a down state, although it will also underline your text because it is a hyperlink.

2) You can use internal styles such as the following:

<Style id="videoTitle"><![CDATA[
.titleText {
active: #880088;
selected: #FF0000;
fontSize: 18;
}
]]></Style>

However, because the 'thumbnailDate' and 'thumbnailTime' are included inside of your <ListItem> container we cannot style these Labels using internal styles. Anything outside of a List can be styled using the above method.

If you want to style Labels inside of a <ListItem> then you must use in-line styling methods. For example:

<TitleLabel id="thumbnailDate" width="56" size="10" text="thumbnailDate" style="titleText-selected:#FF0000;titleText-active:#0000FF;titleText-rollover:#00FF00;"/>