Jump to content

TUnimButton - Background Color


Recommended Posts

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

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

  • Like 1
Link to post
Share on other sites
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
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');
}

 

  • Like 1
Link to post
Share on other sites
  • 3 weeks later...

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
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
×
×
  • Create New...