Int3g3r 5 Posted October 2, 2020 Share Posted October 2, 2020 Hello, I'm struggeling at changing the background-color of a TUnimButton. // ExtEvent function added(sender, container, index, eOpts) { sender.addCls('mainBtnBg') } /* CustomCSS */ .mainBtnBg { width:120px; height:30px; background: #1E90FF; /* blue */ border: 5px solid #1E90FF; /* borda branca em volta */ margin: auto; /* centraliza com bordas automáticas nas laterais */ text-align: center; /* centraliza o texto */ font-family: Source Sans Pro; /* fonte */ font-size: 16px; /* tamanho da fonte */ color: #1E90FF; /* cor fonte */ border: 1px solid #ccc; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #b3b3b3; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05); } The font-color changes to blue, but the background-color is still btnFace it should be blue. I copied the code from the example attachment. Regards, Int3g3r btnmobile.zip Link to post Share on other sites
GoldLine 5 Posted October 4, 2020 Share Posted October 4, 2020 Hello, try this and you'll see how it works: /* special button design */ .mainBtnBg { border-radius:0px !important; border: 2px !important; } .mainBtnBg .x-inner-el { icon-color: #ffffff !important; background-color: orange; border-radius:0px !important; /*padding-top: 0 !important;*/ } .mainBtnBg:hover { background-color: green; border-radius:0px !important; border: 2px !important; } .mainBtnBg .x-badge-el { color: green; background-color: lime; background-image: none; border-radius: 10px; } 1 Link to post Share on other sites
Int3g3r 5 Posted October 5, 2020 Author Share Posted October 5, 2020 13 hours ago, GoldLine said: .mainBtnBg .x-inner-el { icon-color: #ffffff !important; background-color: orange; border-radius:0px !important; /*padding-top: 0 !important;*/ } This works, thank you. How can i select the .x-inner-el in a uniEvent without a css-class ? For example: function beforeInit(sender, config) { config.style = {'background-color':'#D3D3D3'} config.style.x-inner-el = {'background-color':'#D3D3D3'} //does not work } Link to post Share on other sites
Sherzod 1093 Posted October 5, 2020 Share Posted October 5, 2020 5 hours ago, Int3g3r said: How can i select the .x-inner-el in a uniEvent without a css-class ? For example: function beforeInit(sender, config) { config.style = {'background-color':'#D3D3D3'} config.style.x-inner-el = {'background-color':'#D3D3D3'} //does not work } Hello, Maybe you want to use something like this: function afterCreate(sender) { sender.element.select('.x-inner-el').setStyle('background-color', '#D3D3D3'); } 1 Link to post Share on other sites
Int3g3r 5 Posted October 5, 2020 Author Share Posted October 5, 2020 Perfect that is what i'm looking for! 1 Link to post Share on other sites
asapltda 14 Posted October 22, 2020 Share Posted October 22, 2020 Goodnight, 1. When it shows the color button it does not show the text, it should be white for example, could you explain how to do it 2.It is possible to put a complete example, I have not been able to make them work thanks Link to post Share on other sites
Int3g3r 5 Posted October 23, 2020 Author Share Posted October 23, 2020 On 10/22/2020 at 3:16 AM, asapltda said: Goodnight, 1. When it shows the color button it does not show the text, it should be white for example, could you explain how to do it 2.It is possible to put a complete example, I have not been able to make them work thanks TMainmForm -> AligmentControl : uniAligmentClient TUnimButton -> ClientEvents -> UniEvents ... -> function afterCreate(sender) { sender.element.select('.x-inner-el').setStyle('background-color','#FF0000'); } TUnimButton -> Font ... -> - Select Color, Bold, Size and Style This works for me atleast. Link to post Share on other sites
asapltda 14 Posted October 24, 2020 Share Posted October 24, 2020 GRACIAS FUNCIONA COMBINADO AMBAS Link to post Share on other sites
Recommended Posts