{"id":1026,"date":"2010-11-05T18:34:35","date_gmt":"2010-11-05T18:34:35","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1026"},"modified":"2011-06-20T12:23:41","modified_gmt":"2011-06-20T12:23:41","slug":"houtputstylesheet-issues-with-primefacesjquery-skinning","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1026","title":{"rendered":"Issues with JSF h:outputStylesheet and Primefaces\/jQuery skinning"},"content":{"rendered":"

I tried to use this whilst experimenting with dyamic style sheets, but this support post here<\/strong><\/a> confirms that it does not work due to an issue with the way the images are referenced.
\nThe symptom is that you get\u00a0basically correct looking\u00a0layout\/colours but none of the images have loaded.
\nThe solution is to use a link tag directly e.g.:-<\/p>\n

<link type=”text\/css” rel=”stylesheet”
\nhref=”#{request.contextPath}\/resources\/themes\/#{themeSelectorBean.theme}\/skin.css” \/><\/p>\n

Whilst on the subject of h:outputStylesheet, it should be noted that for the following example:-<\/p>\n

<h:outputStylesheet library=”css” name=”styles.css”\/><\/p>\n

Whilst the href of the resulting generated link tag looks like this:-<\/p>\n

<link href=”\/context-root<\/em>\/faces\/javax.faces.resource\/styles.css?ln=css”
\nrel=”stylesheet” type=”text\/css”\/><\/p>\n

the actual physical directory containing the style sheet in this case will be<\/p>\n

…\\WebContent\\resources\\css\\style.css<\/p>\n

i.e. the logical to physical mapping of the web path in this case is not straightforward and obvious. If you just create the resources <\/em>folder under your project’s WebContent<\/em> folder and place all your libraries as subfolders under that, it should all work correctly (the above issue with jQuery\/Primefaces notwithstanding)!<\/p>\n","protected":false},"excerpt":{"rendered":"

I tried to use this whilst experimenting with dyamic style sheets, but this support post here confirms that it does not work due to an issue with the way the images are referenced. The symptom is that you get\u00a0basically correct looking\u00a0layout\/colours but none of the images have loaded. The solution is to use a link […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[13,189,40,184,112,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1026"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1026"}],"version-history":[{"count":3,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1026\/revisions"}],"predecessor-version":[{"id":1389,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1026\/revisions\/1389"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}