Resize the toolbar buttons and change the colour of mouse hovering on grid

QuestionsResize the toolbar buttons and change the colour of mouse hovering on grid

Hello,
1.) I want to resize the tool bar button size.
2.) Want to change the color of selected row.
3.) Want to change the color of mouse hovering effect.

I tried the following code but failed.Please help me.

jquery-ui.custom.css

code area

.ui-button {
display: inline-block;
position: relative;
padding: 0;
margin-right: .1em;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible;
}

.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active {
text-decoration: none;
}

.ui-button-icon-only {
width: 2.2em;
}

button.ui-button-icon-only {
width: 2.4em;
}

.ui-button-icons-only {
width: 3.4em;
}

button.ui-button-icons-only {
width: 3.7em;
}

.ui-button .ui-button-text {
display: block;
line-height: 1.4;
}

.ui-button-text-only .ui-button-text {
padding: .4em 1em;
}

.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text {
padding: .4em;
text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text {
padding: .4em 1em .4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text {
padding: .4em 2.1em .4em 1em;
}

.ui-button-text-icons .ui-button-text {
padding-left: 2.1em;
padding-right: 2.1em;
}

input.ui-button {
padding: .4em 1em;
}

.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
left: 50%;
margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary {
left: .5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary {
right: .5em;
}

.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary {
right: .5em;
}

.ui-buttonset {
margin-right: 7px;
}

.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -.3em;
}

button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}

and ui.jqgrid.css

1 Answers
Abu Ghufran answered 6 years ago

1) It is not current doable. I'll check and update if found some solution.
2) Redefine the css class .ui-state-highlight { } with your new setting.
3) Redefine the css class .ui-state-hover { }

Your Answer

7 + 12 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating / 5. Vote count:

We are sorry that this post was not useful for you!

Let us improve this post!