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

4 + 13 =

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 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

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

Let us improve this post!

Tell us how we can improve this post?