Style not applying in seperate CSS

Components, Ajax Framework, Utilities and More.
Post Reply
hkcoder
Posts: 11
Joined: 04 Dec 2012, 17:06

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?

Luca_CTB
Posts: 85
Joined: 29 Nov 2012, 19:06
Location: Belgium

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.
PrimeFaces 3.5 | Mojarra 2.1.22 | JBoss 7.1.1

hkcoder
Posts: 11
Joined: 04 Dec 2012, 17:06

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.

tandraschko
PrimeFaces Core Developer
Posts: 3094
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

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>
Last edited by tandraschko on 30 Dec 2012, 22:24, edited 3 times in total.
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/

hkcoder
Posts: 11
Joined: 04 Dec 2012, 17:06

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

tandraschko
PrimeFaces Core Developer
Posts: 3094
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

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>
Always Bet On Prime (+ Extensions)!

Thomas Andraschko
PrimeFaces Developer | PrimeFaces Extensions Founder
Apache OpenWebBeans PMC | Apache DeltaSpike PMC | Apache MyFaces PMC

Personal Blog: http://tandraschko.blogspot.de/

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Bing [Bot], Google [Bot], Yahoo [Bot] and 16 guests