Im a newb,
Just starting trying to add simple text buttons etc to the sidebar view of a widget.

Here's the snippet of code I'm using to make a button:

this.controls.button1 = new KONtx.control.TextButton({
            guid: "button0",
            label: $_('view_0'),
            styles: {
                color:"#000000",
                background:"#e28d45",
                fontSize: KONtx.utility.scale(20),
                vAlign: "center",
                hAlign: "center"
            },
            events: {
                onSelect: function(event) {
                    KONtx.application.loadView('view-Settings');
                }
            }
        }).appendTo(this);

Works fine, but no matter what I try the text remains the default white rather than the requested Black. Any ideas?

For styling the button text, you need to pass &quot;textStyles&quot; attribute. The default styles used are mentioned in the theme.js file:<br><br>Theme.storage.add(&#39;ControlTextButtonText&#39;, {<br>&nbsp;&nbsp;&nbsp; //<br>&nbsp;&nbsp;&nbsp; styles: {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; hOffset: 5,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width: Theme.keys.sidebar.width - 10,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; truncation: &#39;end&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; vAlign: &#39;center&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; color: Theme.colors.text,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontFamily: Theme.fonts.regular,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontSize: 16,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; paddingBottom: 1<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; //<br>});<br><br>So you can just copy everything as it is but change the color and you should have the desired text color.<br><br>this.controls.button1 = new KONtx.control.TextButton({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; guid: &quot;button0&quot;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; label: $_(&#39;view_0&#39;),<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; styles: {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; background:&quot;#e28d45&quot;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ..<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; textStyles:{<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; hOffset: 5,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: Theme.keys.sidebar.width - 10,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; truncation: &#39;end&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; vAlign: &#39;center&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; color: &quot;#000000&quot;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontFamily: Theme.fonts.regular,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontSize: 16,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; paddingBottom: 1<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ..<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }).appendTo(this);<br><br>Thanks,<br>Vivek

Thank you so much!<br><br>For anyone attempting to cut and paste this code to adjust text styles, be aware due to encoding some characters may cause a crash in your simulator. Better to type by hand! But otherwise Viveks code worked for me :)<br><br> QUOTE (Vivek Jani @ 23 Jan 2012 1:28 AM) For styling the button text, you need to pass &quot;textStyles&quot; attribute. The default styles used are mentioned in the theme.js file:<br><br>Theme.storage.add(&#39;ControlTextButtonText&#39;, {<br>&nbsp;&nbsp;&nbsp; //<br>&nbsp;&nbsp;&nbsp; styles: {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; hOffset: 5,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width: Theme.keys.sidebar.width - 10,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; truncation: &#39;end&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; vAlign: &#39;center&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; color: Theme.colors.text,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontFamily: Theme.fonts.regular,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontSize: 16,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; paddingBottom: 1<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; //<br>});<br><br>So you can just copy everything as it is but change the color and you should have the desired text color.<br><br>this.controls.button1 = new KONtx.control.TextButton({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; guid: &quot;button0&quot;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; label: $_(&#39;view_0&#39;),<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; styles: {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; background:&quot;#e28d45&quot;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ..<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; textStyles:{<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; hOffset: 5,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: Theme.keys.sidebar.width - 10,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; truncation: &#39;end&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; vAlign: &#39;center&#39;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; color: &quot;#000000&quot;,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontFamily: Theme.fonts.regular,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fontSize: 16,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; paddingBottom: 1<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ..<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }).appendTo(this);<br><br>Thanks,<br>Vivek