different button different gradient color

[jptec]

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

[Sherzod]

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

[jptec]

Thank you.

 

it is working as expected. How can I do the on focus and pressed  style?

[Sherzod]

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.

[Sherzod]

And for "focus":

.x-btn.x-btn-my-focus {
    background: lime;
}

... 
config.focusCls = 'my-focus';

[Sherzod]

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/