jptec Posted December 23, 2016 Share Posted December 23, 2016 Hi, I want like to do each button different appearance. I do at the button : function beforeInit(sender, config) { config.style ={ borderColor: 'red', borderStyle: 'solid' } } This can change border color but I like to change the background to a gradient color. Any hints? I find this in the neptune css .x-nlg .x-btn-default-large {background-image: url(images/btn/btn-default-large-bg.gif);background-position: 0 top} can I use that in button with different image for different button? if I put simple in it function beforeInit(sender, config) { config.style ={ borderColor: 'red', borderStyle: 'solid', background-image: url(images/btn/btn-default-large-bg.gif); } } it come with loading cannot show the page. How can I do that ? Joe Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 23, 2016 Share Posted December 23, 2016 Hi, if I put simple in it function beforeInit(sender, config) { config.style ={ borderColor: 'red', borderStyle: 'solid', background-image: url(images/btn/btn-default-large-bg.gif); } } it come with loading cannot show the page. How can I do that ? Try like this: function beforeInit(sender, config) { config.style = { 'borderColor': 'red', 'borderStyle': 'solid', 'background-image': 'url("images/btn/btn-default-large-bg.gif")' } } Quote Link to comment Share on other sites More sharing options...
jptec Posted December 24, 2016 Author Share Posted December 24, 2016 Thank you. it is working as expected. How can I do the on focus and pressed style? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 24, 2016 Share Posted December 24, 2016 Hi, Can you try this?: 1. UniServerModule -> CustomCSS: .x-btn.x-my-over { background: blue none repeat scroll 0 0; } .x-btn.x-btn-my-pressed { background: red none repeat scroll 0 0; } 2. UniButton1 -> ClientEvents -> UniEvents -> beforeInit fn: function beforeInit(sender, config) { config.overCls = 'my-over'; config.pressedCls = 'my-pressed'; } Best regards. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 24, 2016 Share Posted December 24, 2016 And for "focus": .x-btn.x-btn-my-focus { background: lime; } ... config.focusCls = 'my-focus'; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 24, 2016 Share Posted December 24, 2016 Corrected: 1. UniServerModule -> CustomCSS: .x-btn.x-my-over.x-my-focus { background: blue none repeat scroll 0 0; } .x-btn.x-my-over { background: blue; } .x-btn.x-my-focus.x-my-pressed { background: red none repeat scroll 0 0; } .x-btn.x-my-focus { background: lime none repeat scroll 0 0; } 2. UniButton1 -> ClientEvents -> UniEvents -> beforeInit fn: function beforeInit(sender, config) { config.overCls = 'my-over'; config.pressedCls = 'my-pressed'; config.focusCls = 'my-focus'; } This post also can help you, try: http://forums.unigui.com/index.php?/topic/5861-change-background-color-button-solved/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.