TUnimButton - Background Color

[Int3g3r 5]

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

[GoldLine 6]

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;
}

[Int3g3r 5]

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
}

 

[Sherzod 1131]

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');
}

 

[Int3g3r 5]

Perfect that is what i'm looking for!

[asapltda 16]

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 

[Int3g3r 5]

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.

[asapltda 16]

GRACIAS FUNCIONA COMBINADO AMBAS