I can't style my primefaces elements with a css file

Question

Current .XHTML code and the css file has been linked with :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
        <h:outputStylesheet library="default" name="css/style.css" />
    <p:panelGrid  styleClass="ui-box" >
      <h:form>
        <p:row>
            <p:column  style="padding-left:150px;padding-right:50px;">
                <p:graphicImage url="/resources/images/logo.jpg"/>
            </p:column>
            <p:growl id="growl" life="2000" />
            <p:column style="font-weight: bold;">
                <p:commandLink id="ajax" update="growl" actionListener="#{buttonView.buttonAction}">
                    <h:outputText value="Log in" />
                </p:commandLink>
            </p:column>
            <p:column  style="font-weight: bold;">
                <p:commandLink id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="false">
                    <h:outputText value="Non-Ajax Submit" />
                </p:commandLink>
            </p:column>
            <p:column style="font-weight: bold;">
                <p:commandButton value="Become Speaker" id="ajax2" update="growl" actionListener="#{buttonView.buttonAction}" styleClass="ui-priority-primary" />
            </p:column>
        </p:row>
      </h:form>
    </p:panelGrid>

</h:body>
</html>

Current CSS code (style.css):

@CHARSET "ISO-8859-1";
.ui-box{

    border-color: red;
}

And web.xml :

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>p01</display-name>
  <welcome-file-list>
    <welcome-file>index.xhtml</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  <context-param>
    <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
  <context-param>
    <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
    <param-value>resources.application</param-value>
  </context-param>
  <listener>
    <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
  </listener>
</web-app>

I am biginner... I would appreciate if someone can help me for style my primefaces elements.

thanks in advance.

Duplicated ??

I don't think so.I do what the suggestions answers told us but they are not work with me. Help me please.

A.v · Answer 1 · 2015-06-16T20:40:50.143

-2

If you put a folder named resources in webapp folder and create a css folder in it you should define the css folder name as library and then name your stylesheet like this:

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

edited Jun 16 '15 at 20:40

answered Jun 16 '15 at 20:37

A.v

734
5
26

1

And then pollute the CSS with `!important` over all place? [Oh please no. Keep it in ``](http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles). Edit: as per your edit, a resource library name of "css"? [Oh please no. Let the OP use "default" or no one](http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used). Clearly, you're new to JSF. In spite of your intent, try becoming more well versed before attempting to post JSF answers. – BalusC Jun 16 '15 at 20:40
I can post tons of links which do it this way. Maybe it is not the way you do it but that doesn't make it wrong I guess. – A.v Jun 16 '15 at 20:45
The Internet is indeed full of uncontrollable garbage. That's exactly why Stack Overflow exist. – BalusC Jun 16 '15 at 20:48
@BalusC can you show me the question like the mine please I need the answer, I don't think if this question is duplicated. Thanks – laciane Jun 16 '15 at 22:52
@Ali.Valizadeh I do What you said, it doesn't work with me – laciane Jun 16 '15 at 23:03
@laciane: Have you put your css into resources folder? – A.v Jun 16 '15 at 23:05
@Ali.Valizadeh : yes and it doesn't work – laciane Jun 16 '15 at 23:11
@laciane: you can check in your browser where your css is referring. – A.v Jun 16 '15 at 23:15
I checked it . It doesn't take my style.css as a style. it seems like it doesn't know something which called style.css – laciane Jun 16 '15 at 23:30
I did some test and I think your problem is somewhere else: As you can see [here](http://www.w3schools.com/css/css_border.asp) **None of the border properties will have ANY effect unless the border-style property is set!** So you should add border style to your css code. like this: `.ui-box{ border-color: red; border-style: solid; }` – A.v Jun 16 '15 at 23:43

I can't style my primefaces elements with a css file

1 Answers1