Board index JavaServer Faces General Style not applying in seperate CSS

Style not applying in seperate CSS

Components, Ajax Framework, Utilities and More.


Posts: 11
Hi Team,

I am facing very weird problem while applying styles in the CSS.

When i am overriding the style by defining the style in xhtml, it is working fine.

like :

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
  <h:head>
  .ui-outputlabel
{color:yellow;}//Working
  </h:head>
<h:body>
<h:outputLabel for="fname" value="First Name" style="color:white"/> 
            <p:inputText id="fname" required="true" />
</h:body>

In this case it is successfully overriding the styles.
But with this case, i don't know why it is not applying, since the concept it same.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
        </f:facet>
        <link type="text/css" rel="stylesheet" href="css/myCustomize.css" />
</h:head>

<h:body>

<h:outputLabel for="fname" value="First Name" style="color:white"/> 
            <p:inputText id="fname" required="true" />
</h:body>


CSS:

.ui-outputlabel
{color:yellow;}


I may be doing something wrong while loading the CSS.

Kindly suggest?


Posts: 85
Location: Belgium
Hi hkcoder,

In JSF to include a stylesheet u use h:outputStylesheet.

On the mkyong blog, you can find an example:

http://www.mkyong.com/jsf2/how-to-include-cascading-style-sheets-css-in-jsf/


The h:outputStylesheet will generate your <link /> tag in the html.
PrimeFaces 3.5 | Mojarra 2.1.22 | JBoss 7.1.1


Posts: 11
Thanks for your reply.
As per the mkyong blog i added the following code in bold :

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
        </f:facet>
        <link type="text/css" rel="stylesheet" href="css/myCustomize.css" />
</h:head>

<h:body>
[b]<f:facet name="last">
      <h:outputStylesheet library="default" name="css/layout.css" />
   </f:facet> [/b]

<h:outputLabel for="fname" value="First Name" style="color:white"/>
            <p:inputText id="fname" required="true" />
</h:body>



But, still the same problem persists.

tandraschko PrimeFaces Core Developer

Posts: 2279
Location: Bavaria, DE

Try this:

<h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
        </f:facet>
        <f:facet name="last">
                <link type="text/css" rel="stylesheet" href="/css/myCustomize.css" />
         </f:facet>
</h:head>
Last edited by tandraschko on 30 Dec 2012, 22:24, edited 3 times in total.
Always Bet On Prime (+ Extensions)!

PrimeFaces Extensions: https://github.com/primefaces-extensions
OpenWebBeans: http://openwebbeans.apache.org/
DeltaSpike: http://deltaspike.apache.org/
Personal Blog: http://tandraschko.blogspot.de/


Posts: 11
Great!

It really worked like a magic for me.

I really thank you for your effort!

Thanks to all!

- Hitesh

tandraschko PrimeFaces Core Developer

Posts: 2279
Location: Bavaria, DE

ahh sorry, this will not work for sub-context's. You should use:

<h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
        </f:facet>
        <f:facet name="last">
                <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/myCustomize.css" />
         </f:facet>
</h:head>
Always Bet On Prime (+ Extensions)!

PrimeFaces Extensions: https://github.com/primefaces-extensions
OpenWebBeans: http://openwebbeans.apache.org/
DeltaSpike: http://deltaspike.apache.org/
Personal Blog: http://tandraschko.blogspot.de/


Return to General