Back to Design / Interaction - Yahoo! TV Widgets Forum
0

Working with basic text

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?

by
Report Abuse
2 Replies
  • For styling the button text, you need to pass "textStyles" attribute. The default styles used are mentioned in the theme.js file:

    Theme.storage.add('ControlTextButtonText', {
        //
        styles: {
            hOffset: 5,
            width: Theme.keys.sidebar.width - 10,
            truncation: 'end',
            vAlign: 'center',
            color: Theme.colors.text,
            fontFamily: Theme.fonts.regular,
            fontSize: 16,
            paddingBottom: 1
        }
        //
    });

    So you can just copy everything as it is but change the color and you should have the desired text color.

    this.controls.button1 = new KONtx.control.TextButton({
                guid: "button0",
                label: $_('view_0'),
                styles: {
                    background:"#e28d45",
                    ..
                },
                textStyles:{
                    hOffset: 5,
                    width: Theme.keys.sidebar.width - 10,
                    truncation: 'end',
                    vAlign: 'center',
                    color: "#000000",
                    fontFamily: Theme.fonts.regular,
                    fontSize: 16,
                    paddingBottom: 1
                }
                ..
            }).appendTo(this);

    Thanks,
    Vivek
    Report Abuse
    0
  • Thank you so much!

    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 :)

    QUOTE (Vivek Jani @ 23 Jan 2012 1:28 AM) For styling the button text, you need to pass "textStyles" attribute. The default styles used are mentioned in the theme.js file:

    Theme.storage.add('ControlTextButtonText', {
        //
        styles: {
            hOffset: 5,
            width: Theme.keys.sidebar.width - 10,
            truncation: 'end',
            vAlign: 'center',
            color: Theme.colors.text,
            fontFamily: Theme.fonts.regular,
            fontSize: 16,
            paddingBottom: 1
        }
        //
    });

    So you can just copy everything as it is but change the color and you should have the desired text color.

    this.controls.button1 = new KONtx.control.TextButton({
                guid: "button0",
                label: $_('view_0'),
                styles: {
                    background:"#e28d45",
                    ..
                },
                textStyles:{
                    hOffset: 5,
                    width: Theme.keys.sidebar.width - 10,
                    truncation: 'end',
                    vAlign: 'center',
                    color: "#000000",
                    fontFamily: Theme.fonts.regular,
                    fontSize: 16,
                    paddingBottom: 1
                }
                ..
            }).appendTo(this);

    Thanks,
    Vivek
    Report Abuse
    0
Ask a Question

Recent Posts

in Design / Interaction - Yahoo! TV Widgets