Overriding Struts2 jqGrid CSS

问题

I'm stuck on overriding the default's struts2-jquery-plugin stylesheet for a grid. I tried defining my own stylesheet (jquery-ui-grid.css) and including it on my JSP page but the framework always downloads the default CSS (ui.jqgrid.css) last and overrides my own styles.

I've used the Chrome developer tools to watch network requests so I could verify that both default CSS and my custom CSS are being downloaded, but only the default is applied (I guess because it's downloaded last). As this "default" CSS is generated by the struts2 framework, I have no idea how can I modify/override it as I don't know the path to this file. I'm currently using maven to manage my dependencies and the struts2-jquery-plugin and struts2-jqgrid-plugin are being included from maven.

I'm trying to change the font size for my grids and I'm getting a little bit desperate at this point...

How can I override/modify the default CSS file that the plugin is using to style the grids? I wouldn't like to change the styles applied to the html tables, I'm searching for a solution that allows me specifically modify the jqGrid related CSS classes.

EDIT:

As mentioned in this question, I included my CSS after the jquery-ui ones (inside the <head /> tag):

<head>
...
<s:head />
<sj:head jqueryui="true" jquerytheme="south-street" loadAtOnce="true"  loadFromGoogle="false" locale="es"/>
<link href="<s:url value='/styles/main.css'/>" rel="stylesheet" type="text/css" media="all" /> 
...
</head>

And inside my main.css belong all the CSS imports:

/*
   Css Framework 
   =============
     - see http://www.contentwithstyle.co.uk/Articles/17/a-css-framework
       for more info.
*/
@import url("tools.css");
@import url("typo.css");
@import url("forms.css");
@import url("layout.css");
/* This is my "custom" jqGrid stylesheet: */
@import url("ui.jqgrid.css");
@import url("dl-forms.css");

PROGRESS UPDATE
I still hadn't been able to override as I wanted to, so for now I had to stop using a jquery-ui theme served from the internet (I prefer that way so I can keep it updated on the fly, as there is no need for major tweaks on the jQuery UI CSS for my webapp).
I downloaded the theme I'm using and put it inside my webapp (template/themes/myTheme-name/), so I could force the framework to use that explicit theme instead of downloading it, and that indeed worked, I can now modify my "custom" CSS for jqGrid.. But I feel like this is just a workaround and I would like to know how to do it the clean way.

回答1:

These are steps to create/modify a custom theme:

Create and Download your own Theme with jQuery ThemeRoller

Create a folder in your WebRoot path template/themes/mytheme

Extract downloaded theme and switch into the css folder

Rename jquery-ui-x.x.x.custom.css to jquery-ui.css

Copy jquery-ui.css and images folder into the template/themes/mytheme folder.
<%@ taglib prefix="s" uri="/struts-tags"%> 
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%> 
<html>   
   <head>
    <s:url var="context" value="/" />
    <sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="%{context}template/themes"/>   
   </head>
   <body>  
   </body> 
</html>

You can also play with scriptPath attribute where you can place your JS code. The same way as you doing it with CSS but copying into js folder.

来源：https://stackoverflow.com/questions/32135534/overriding-struts2-jqgrid-css

标签

css

struts2

jqgrid

struts2-jquery-plugin

struts2-jquery-grid