.ui-jqgrid-title {
    font-size: 12px;
}

.ui-pg-button {
    border: 1px solid transparent;
}

table.ui-pg-table td,
table.ui-pg-table td span {
    border: 1px solid transparent !important;
    font-size:11px;
}

table.ui-pg-table input {
    font-size:12px !important;
    height:18px !important;
}

$("div#pager").removeClass("ui-jqgrid-pager");

That is excellent! I have only been working with jqGrid for a few days, and been trying hard to hack it to work nicely with jquery UI, as demonstrated here:

http://www.trirand.com/jqgrid3.....qgrid.html

Looks nice with your border hack, but I would really like a nice hack for the pager aw well! Currently the .ui-state-hover triggered on hovering the arrow icons, adds a border. I guess I should add a 1px border hidden for the ui-state-default?

I also have problems with the placement of the text and arrows, looking at Firebug, I can see the problem is that the containers are forced into dimension of width x 41 pixels. Is it eh background image from jquer-UI exanding them?

Not much of a CSS expert unfortunately... 🙁

Please give me some hints of what to do here 😉

Kristian

I just hacked-in ThemeRoller support for my jqGrids.  So I thought I would share this hoping it might help others.

Warning: the jqGrids I am developing right now have no footers.  IOW, I hide the whole area that says “Page 1 of NN” at the bottom.  So implementing that is up to you and the code below is a good starter.  The code below only applies to the grid title.  If I decide to hack column headers, I will add to this but, right now, I do not have the need to theme column headers.  Looks fine to me…

I am using the latest jQuery-UI 1.6R6 which will soon ship as jQuery-UI 1.7 and require jQuery 1.31 at minimum.

My current pages include the ThemeRoller switching tool and this seems to work fine on my themed jqGrids.

// As usual
$(”#MyTable”).jqGrid(…);

// theme support
$(”#MyTable”).addClass(”ui-widget”);
$(”table.Header th, .HeaderRight, .HeaderLeft”).css(”background-image”,”url()”).addClass(”ui-widget-header”).addClass(”ui-state-default”);

// This side-border suppression is necessary since the jqGrid title area is a composite and the jQuery UI themes place borders that do not look so good in this partucular context.
$(”td.HeaderRight”).css(”border-left”,”0px”);
$(”td.HeaderLeft”).css(”border-right”,”0px”);
$(”table.Header th”).css({borderLeft:”0px”, borderRight:”0px”});

I am pretty happy with the result on my limited and simple jqGrids and I hope this gets you started if you need ThemeRoller support for your jqGrids.

**–**  Steve