Hi,

I'm working on developing a Yahoo! TV Widget, but I'm a bit confused about the "description" meta-data and how it appears in the AboutBox view.
The Yahoo! Widget Engine acceptance criteria (here) says the description should be about 2-3 sentences long, which makes sense.

However, the AboutBox view only shows the first 40-or-so characters of the description, and cuts off the rest with ellipses.
Since this view is created almost entirely by the KONtx.views.AboutBox class which pulls the meta-data straight from widget.xml, it doesn't appear that there's any way to show more than 40 characters of the description in this view.

Should the description be less than 40 characters?
Is there any way to make the description text carry over to the next line instead of cutting it off at 40 characters?
Was it intended that the description be cut off with ellipses?

Thanks for your help,

-- Ideashaker

I've attached a screen-shot of our widget's about page as reference to the problem I'm talking about:

Unfortunately, this is a bug that'll have to be addressed in the framework.

For now, the description will need to be shorter to display without ellipsis.

Rob's right, but you could extend from the AboutBoxView class and fix the issue with text wrapping on the description. If this is something you are interested in doing, let us know and we can provide sample code.

-Jeremy

I am very interested.

THX

Hello Everyone,<br><br>I know Jeremy has left for LinkedIn, but is there still anyone at yahoo who can give an example of how to override the&nbsp; KONtx.views.AboutBox base class per this post?<br><br>Our widget got bumped out of QA because yahoo&#39;s KONtx.views.AboutBox class truncates the name and description values present in the widget.xml file.<br><br>So we want to either override the base class&#39; font size, text wrapping, or the actual name value that is pulled from the widget.xml<br><br>All the docs point to using this class for the mandatory About view when pushing the &#39;green button&#39;. <br><br>However, this post acknowledged this is a bug. So we would like to know what the workaround is. <br><br>-Daniel<br><br><br> QUOTE (Jeremy Johnstone @ 16 Aug 2010 10:00 AM) Rob&#39;s right, but you could extend from the AboutBoxView class and fix the issue with text wrapping on the description. If this is something you are interested in doing, let us know and we can provide sample code.<br><br>-Jeremy

You may override the styles of the name and description in the about box by adding the following in your widget.

Theme.storage.add('AboutBoxView.metadataName', {
    styles: {
        width: Theme.keys.sidebar.width - 10,
        truncation: "end",
        hOffset: 5,
        vOffset: 67,
        fontSize: 26,
        fontFamily: Theme.fonts.light,
        color: 'white',
        KonShadow: '0px -1px black'
    }
    
});

Theme.storage.add('AboutBoxView.metadataDescription', {
    styles: {
        truncation: 'end',
        width: Theme.keys.sidebar.width - 10,
        hOffset: 5,
        fontSize: 14,
        fontFamily: Theme.fonts.regular,
        fontWeight: 'bold',
        color: '#FFFFFF',
        KonShadow: "0px -1px black"
    }

});

You can also change many other styles by referring to ~/TVWidgets/Konfabulator-Latest/data/Overlay/Script/Framework/Themes/theme.js, find the style you want to change and include that change in your particular widget.

Thanks,
Vivek

You may override the styles of the name and description in the about box by adding the following in your widget.&nbsp; Theme.storage.add(&#39;AboutBoxView.metadataName&#39;, { &nbsp;&nbsp;&nbsp;&nbsp;styles: { width: Theme.keys.sidebar.width - 10, truncation: &quot;end&quot;, hOffset: 5, vOffset: 67, fontSize: 26, fontFamily: Theme.fonts.light, color: &#39;white&#39;, KonShadow: &#39;0px -1px black&#39; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; }); Theme.storage.add(&#39;AboutBoxView.metadataDescription&#39;, { &nbsp;&nbsp;&nbsp;&nbsp;styles: { truncation: &#39;end&#39;, width: Theme.keys.sidebar.width - 10, hOffset: 5, fontSize: 14, fontFamily: Theme.fonts.regular, fontWeight: &#39;bold&#39;, color: &#39;#FFFFFF&#39;, KonShadow: &quot;0px -1px black&quot; &nbsp;&nbsp;&nbsp;&nbsp;}<br> }); You can also change many other styles by referring to ~/TVWidgets/Konfabulator-Latest/data/Overlay/Script/Framework/Themes/theme.js, find the style you want to change and include that change in your particular widget.<br> Thanks, Vivek

<br>Vivek, Thank you!! <br><br>I knew there had to be an elegant way of extending the base class attributes. Also this is also my first time doing any real JavaScript coding (outside of client side form validations) until I started using the widget platform... :-) <br><br>-Daniel<br><br><br> QUOTE (Vivek Jani @ 18 Jan 2012 1:58 AM) You may override the styles of the name and description in the about box by adding the following in your widget. <br><br> Theme.storage.add(&#39;AboutBoxView.metadataName&#39;, {<br> &nbsp;&nbsp; &nbsp;styles: {<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: Theme.keys.sidebar.width - 10,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;truncation: &quot;end&quot;,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;hOffset: 5,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;vOffset: 67,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fontSize: 26,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fontFamily: Theme.fonts.light,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: &#39;white&#39;,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;KonShadow: &#39;0px -1px black&#39;<br> &nbsp;&nbsp; &nbsp;}<br> &nbsp;&nbsp; &nbsp;<br> });<br><br> Theme.storage.add(&#39;AboutBoxView.metadataDescription&#39;, {<br> &nbsp;&nbsp; &nbsp;styles: {<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;truncation: &#39;end&#39;,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: Theme.keys.sidebar.width - 10,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;hOffset: 5,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fontSize: 14,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fontFamily: Theme.fonts.regular,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;fontWeight: &#39;bold&#39;,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: &#39;#FFFFFF&#39;,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;KonShadow: &quot;0px -1px black&quot;<br> &nbsp;&nbsp; &nbsp;}<br><br> });<br><br>You can also change many other styles by referring to ~/TVWidgets/Konfabulator-Latest/data/Overlay/Script/Framework/Themes/theme.js, find the style you want to change and include that change in your particular widget.<br><br>Thanks,<br>Vivek

You are welcome Daniel. Hope you enjoy working with Javascript and Yahoo connected TV platform :).