hi all -

i'm very new to this platform, and want to do some different over states for buttons (rather than the blue highlight). This is what I have tried so far:

Hey Julie,<br><br>What you&#39;ve described is a common snag for beginners to the Connect! platform.&nbsp; It may be possible to do custom backgrounds in the way you&#39;ve described, but I&#39;m not failiar with that method.&nbsp; What I typically do is used stacked controls:<br><br>createView: function() {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //self reference for object level manipulation<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; self=this;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //The button holds the rest of the elements.&nbsp; NOTE that this is .element.Button and not control.Button or control.TextButton!<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //element.button does not have any of the typical styles associated with it<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.controls.btn=new KONtx.element.Button({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; events : {&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; onBlur : function(){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //use self to reference the object and set the src of the image accordingly.<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; self.controls.img.src=&#39;Images/btnbg.png&#39;;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; onFocus : function(){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; self.controls.img.src=&#39;Images/btnbgOver.png&#39;;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; onSelect : function(){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; print(&#39;OOOOOOOOOOOOO&#39;);<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; styles:{<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; height:KONtx.utility.scale(88),<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; vOffset:0,<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width:KONtx.utility.scale(97),<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }).appendTo(this);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //The image is attached to the button.&nbsp; It will display your background<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.controls.img = new KONtx.element.Image({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; src:&#39;Images/btnbg.png&#39;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }).appendTo(this.controls.btn)<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //The label for your text box.<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.controls.label = new KONtx.element.Text({<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; label:&#39;Text!!&#39;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }).appendTo(this.controls.btn)<br>&nbsp;&nbsp;&nbsp; },<br><br>Using this &quot;stack&quot; of controls, you can have buttons with a custom background.&nbsp; Of course, if you&#39;re doing this a lot, you could make your own class based on this structure or by extending KONtx.control.TextButton<br><br><div class="quote"><div class="quotetop">QUOTE<cite>(Julie @ 29 Sep 2011 2:11 PM)</cite></div><blockquote class="quotemain">hi all -<br><br>i&#39;m very new to this platform, and want to do some different over states for buttons (rather than the blue highlight). This is what I have tried so far:<br><br><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button = new KONtx.control.TextButton({&nbsp;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>id: idName,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>label: &quot;Hello World&quot;,&nbsp;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>styles: $merge({vOffset: 10}, Bravo.styles.main.menuButton),&nbsp;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>textStyles: App.styles.main.menuButtonText,<div><span class="Apple-tab-span" style="white-space:pre;"> </span>events: {<div><span class="Apple-tab-span" style="white-space:pre;"> </span>onSelect: function(event) {<div>&nbsp; &nbsp;<span class="Apple-tab-span" style="white-space:pre;"> </span>KONtx.application.loadView( destinationId, data );&nbsp;<div><span class="Apple-tab-span" style="white-space:pre;"> </span>},<div><span class="Apple-tab-span" style="white-space:pre;"> </span>onFocus: function(event){<div><span class="Apple-tab-span" style="white-space:pre;"> </span>this.styles = App.styles.main.menuButtonOver<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span><div><span class="Apple-tab-span" style="white-space:pre;"> </span>}<div><span class="Apple-tab-span" style="white-space:pre;"> </span>}).appendTo(this);&nbsp;<br><br>so the style menuButtonOver has a different background image. Sadly, this isn&#39;t working. Is this possible? Thanks</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></blockquote></div>