CODEWITHSUNDEEP
cssjsf
user2727493
user2727493

Reputation: 143

CSS not applying in JSF application

I am new to JSF. I am trying to put my inline styles to a CSS file but it is not working. Please find the code below.

My XHTML file is in following location:
\WebContent\template\

CSS is in following location:
\WebContent\resources\css\

XHTML code:

<ui:composition template="/template/BasicTemplate.xhtml">
<h:outputStylesheet library="css" name="style.css" />
    <ui:define name="content">
        <h:form>
       dfdskdksdk <h:outputText value="#{msg['message.test1']}" />
<table width="80%">
    <tr>
    <h:outputStylesheet library="css" name="css/style.css" />
        <td width="15%" background="red" >
            <b>Location Coverage*</b>
        </td>

I have tried using the following combinations

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

Tried using this line inside and outside <ui:composition> tag.

Thanks

Upvotes: 1

Views: 6801

Answers (1)

BalusC
BalusC

Reputation: 1108722

Your mistake is the placement of the <h:outputStylesheet>:

<ui:composition template="/template/BasicTemplate.xhtml">
    <h:outputStylesheet library="css" name="style.css" />
    <ui:define name="content">
        ...
    </ui:define>
</ui:composition>

When creating a template client, it's important to understand that anything outside <ui:define> is ignored (like as anything outside <ui:composition>).

Move the <h:outputStylesheet> declaration to inside <ui:define>:

<ui:composition template="/template/BasicTemplate.xhtml">
    <ui:define name="content">
        <h:outputStylesheet library="css" name="style.css" />
        ...
    </ui:define>
</ui:composition>

By the way, the way how you used the generic content type "css" as library name is awkward. As you don't seem to have a real library, just omit it altogether:

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

See also:

Upvotes: 3

Related Questions