Prime Community Forum

Posted: **30 Dec 2012, 21:20**

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 :

Code: Select all

<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.

Code: Select all

<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:

Code: Select all

.ui-outputlabel
{color:yellow;}

I may be doing something wrong while loading the CSS.

Kindly suggest?

Posted: **30 Dec 2012, 21:26**

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-inclu ... ss-in-jsf/

The h:outputStylesheet will generate your <link /> tag in the html.

Posted: **30 Dec 2012, 21:36**

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

Code: Select all

<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.

Posted: **30 Dec 2012, 21:42**

Try this:

Code: Select all

<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>

Posted: **30 Dec 2012, 21:58**

Great!

It really worked like a magic for me.

I really thank you for your effort!

Thanks to all!

- Hitesh

Posted: **30 Dec 2012, 22:24**

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

Code: Select all

<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>

Prime Community Forum

Style not applying in seperate CSS

Style not applying in seperate CSS

Re: Style not applying in seperate CSS

Re: Style not applying in seperate CSS

Re: Style not applying in seperate CSS

Re: Style not applying in seperate CSS

Re: Style not applying in seperate CSS