JSF 2.0 resource management vs Primefaces Theme

[Radulf]

I was having problemas using primefaces theme and JSF 2.0 resource management, as it seems that the images were not being found and even the css, even setting the link to the css like:

Code: Select all

   <link type="text/css" rel="stylesheet" href="${request.contextPath}/app/resources/%THEME_FOLDER%/skin.css">  

So, to not stress myself much about it, I changed the theme CSS to work with JSF 2 h:outputStyle. What I needed to do is only change the link to the images to use #{resource[]}. To do that, using eclipse, I used the the find/replace tool (CTRL+F) checking the regular expression ON.

In the find input I entered

Code: Select all

(images\/)(.+\.png)

And in the replace folder

Code: Select all

\"\#\{resource\[\'%THEME_FOLDER%\/images:$2'\]\}\"

Now, to add the theme I can use the h:outputStyleSheet like this:

Code: Select all

<h:outputStyleSheet library="%THEME_FOLDER%" name="skin.css" />

And it works like a charm Just remenber to change %THEME_FOLDER% to where your theme is placed under the 'resources' folder. Example: "resources/css/themes/aristo", then %THEME_FOLDER% = "css/themes/aristo".

Hope it helps someone If there's an easier way to do this, please reply.

[cagatay.civici]

Code: Select all

<link type="text/css" rel="stylesheet" href="${request.contextPath}/app/resources/%THEME_FOLDER%/skin.css"> 

This just should have worked, I've used this way many many times.

h:outputStylesheet is not supported unless you hack the css as you've done.

[Radulf]

Yeah, I saw the examples using link, but I don't know why it did not worked for me :/. But then, for me I find easier just to hack the CSS and post an easy way to do it, so if someone needs the same thing, they have an example

Thanks for the reply.

[napstercake]

Hello all,

I'm having problems to display a simple images in to my page.xhtml in this page I'm using:

Code: Select all

<h:outputStylesheet name="header.css" library="css" /> 

header.css:

Code: Select all

.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;	                               
	background: url('../resources/images/arrows-ffffff.png')  no-repeat -10px -100px; 
}

I can see the colors, font, position everything except the image
can anyone help me?

thanks in advance.

[SteveTaylor]

Radulf, thanks for the tip. I'll see if it works in NetBeans.

napstercake:

Code: Select all

background: url("#{resource['images:arrows-ffffff.png']}")  no-repeat -10px -100px;