i'm trying to define a better graphic for my widget, and i'm having a problem using a grid on a fullscreen view. I'm paginating the grid and i'm attaching to it a page indicator and a metadata display. I've set all three of them with "width: this.width" and they correctly extends to all the screen, but the page indicator and the metadata displays in a strange way. They stretch like the grid but the grey half of the button stops a lot before the end of the page, basically at the dimension of a sideviewbar. i've tryed changing the background color but it just shows over this with a transparent color.
Also if i try to resize the items to a size shorter than a sidebar size the grey halfbar correctly resizes to the dimension of the button. Is it some style to set?
Also i searched the site but couldn't find a list of styles that can be changed on the various items.

QUOTE (Gades @ Oct 15 2010, 04:17 AM) <{POST_SNAPBACK}>

i'm trying to define a better graphic for my widget, and i'm having a problem using a grid on a fullscreen view. I'm paginating the grid and i'm attaching to it a page indicator and a metadata display. I've set all three of them with "width: this.width" and they correctly extends to all the screen, but the page indicator and the metadata displays in a strange way. They stretch like the grid but the grey half of the button stops a lot before the end of the page, basically at the dimension of a sideviewbar. i've tryed changing the background color but it just shows over this with a transparent color.
Also if i try to resize the items to a size shorter than a sidebar size the grey halfbar correctly resizes to the dimension of the button. Is it some style to set?
Also i searched the site but couldn't find a list of styles that can be changed on the various items.

There is no straight forward way to adjust the glass/glow effect on the controls for the full screen through styles. It is possible though, by extending the original control and defining a Theme for it. Following is the sample code for page indicator.

CODEBOX

<!--ec1-->Theme.storage.add(&quot;MyIndicator&quot;, {<br>  renderSkin: function(state, w, h, args, theme){<br>    var ff = new Frame();<br>    ff.width = w;<br>    ff.height = h;<br><br>    theme.applyLayer(&#39;ObjectGlow&#39;, ff);<br><br>    if (state == &#39;focused&#39;){<br>      theme.applyLayer(&#39;BaseFocusGlow&#39;, ff);<br>    }<br><br>    return ff;<br>  }<br>});<br>Theme.storage.add(&quot;MyIndicatorTextLink&quot;, {<br><br>  styles: {<br>    normal: {<br>      hAlign: &#39;center&#39;,<br>      vAlign: &#39;center&#39;,<br>      paddingBottom: 1,<br>      fontFamily: Theme.fonts.regular,<br>      fontWeight: &#39;bold&#39;,<br>      fontSize: 12,<br>      color: &#39;#FFFFFF&#39;<br>    }<br>  }<br><br>});<br>var custom = {};<br>custom.controls = {<br>  MyIndicator: new KONtx.Class({<br>    ClassName: &#39;MyIndicator&#39;,<br>    Extends: KONtx.control.PageIndicator<br>  });<br>};<!--c2--></code>

After this you can use this indicator i.e. custom.controls.MyIndicator instead of KONtx.control.PageIndicator, with the same arguments. The resulting page indicator will not have the half grayish glow image.

You could do similar stuff for buttons and other controls. You can refer the file ~/TVWidgets/Konfabulator-Latest-540/data/Overlay/Script/Framework/Themes/theme.js to get an idea of the default themes for various controls.