I can style my primefaces elements only if I put them in the same xhtml page like :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb"
xmlns:f="http://ift.tt/HcrI1S"
xmlns:h="http://ift.tt/HjFrZb"
xmlns:p="http://ift.tt/HjFrZc">
<h:head>
<style>
.ui-dialog-titlebar{
color:red;
}
.ui-dialog-title{
background-color: green;
}
</style>
</h:head>
<h:body>
<p:panelGrid style="border:hidden" >
<h:form>
<p:row>
<p:column style="font-weight: bold;border:hidden;">
<p:commandLink id="ajax" update="growl" actionListener="#{dfView.showMessage}" onclick="PF('dlg1').show();">
<h:outputText value="Log in" />
</p:commandLink>
</p:column>
</p:row>
</h:form>
</p:panelGrid>
<p:dialog header="Log in" widgetVar="dlg1" modal="true" height="300" dynamic="true">
</p:dialog>
</h:body>
</html>
in this cas I can style my dialog header. But I need to put all my css in a separate file and load only its url.
I tried to do something like :
1-
<h:body>
<h:outputStylesheet name="/resources/css/style.css" />
...
</h:body>
2-
<h:body>
<h:outputStylesheet name="/css/style.css" />
...
</h:body>
3-
<h:head>
<f:facet name="last">
<h:outputStylesheet name="/resources/css/style.css" />
</f:facet>
</h:head>
4-
<h:head>
<link rel="stylesheet" media="screen" href="resources/css/style.css" type="text/css" />
</h:head>
5-
<h:head>
<link rel="stylesheet" media="screen" href="css/style.css" type="text/css" />
</h:head>
And style.css :
@CHARSET "ISO-8859-1";
.ui-dialog-titlebar{
color:red;
}
.ui-dialog-title{
background-color: green;
}
but all these don't work with me .
Folder structure
WebContent
|-- META-INF
|-- resources
| |-- css
| | `-- style.css
| `-- images
| |-- logo.png
|-- WEB-INF
| |-- bib
| |-- faces-config.xml
| |-- web.xml
|
|-- index.xhtml
please anybody can help me !
Aucun commentaire:
Enregistrer un commentaire