[Resolvido] Problema ao carregar CSS em subpaginas com JSF+Primefaces

Front-end CSS
#1

Fala galera, beleza?

Bom pessoal estou com um problema que já faz alguns dias e até então “não” encontrei uma solução.

Estou trabalhando com um projeto Maven (Utilizo NetBeans). E nesse projeto utilizo JSF 2.2 + PrimeFaces + Bootstrap, e a estrutura está da seguinte forma:

Páginas Web:

      WEB-INF
      Pages
       register
          register.xhtml
          userpanel.xhtml    
      resources
        imgs
        layout
            LayoutAPI.xhtml
            LayoutAPI.css
        styles
           Bootstrap
           UserPanel
               userpanel.css

      Login.xhtml

Assim que é iniciada a aplicação a página inicial a ser chamada é a Login.xhtml. Após o usuário efetuar o login, ele é redirecionado para a página userpanel.xhtml.

Que tem como Template principal a página LayoutAPI.xhtml (Cotem o menu, banner e etc). Até ai tudo beleza funcionando “corretamente”.

O CSS do template funciona perfeitamente na página userpanel.xhtml (Menu, banners, imagens carregados tudo certinho).

O problema é que além do CSS default do Template. Gostaria de carregar um CSS próprio para a página userpanel.xhtml. Que no caso seria o userpanel.css (Styles/UserPanel/userpanel.css)

Só que esse CSS não carrega de jeito nenhum. Navegando aqui no fórum achei o seguinte topico:

E aparentemente a solução foi utilizar a tag

<a4j:loadStyle sr="arquivo.css">

Porém pelo que pesquisei, a tag “LoadStyle” pertence ao RichFaces/Ajax.

Teria alguma outra maneira de carregar o CSS sem utilizar essa tag “LoadStyle” ?

LayoutAPI.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
    <!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:h="http://xmlns.jcp.org/jsf/html"
          xmlns:p="http://primefaces.org/ui"
          xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
        
        <h:head>
            
            <title>Page Title</title>
                 
           <h:outputStylesheet library="layout" name="StyleAPI.css"/>
           <h:outputStylesheet library="styles/bootstrap/css" name="bootstrap.css"/>
           <h:outputStylesheet library="styles/bootstrap/css" name="bootstrap-theme.css"/>
           
        </h:head>
        
        
        <h:body>
            
            <div id="top">
                
                <!-- banner -->
                ...

            </div>
            
            
            <div id="menu">            
                    ....                        
            </div>
            
            <div id="center">
                <ui:insert name="conteudo">
                    
                    
                </ui:insert>            
            </div>
                               
        </h:body>
    </html>

Userpanel.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"     
      >
    <h:head>                
        
    </h:head>
    <h:body>
        <ui:composition template="../../resources/layout/LayoutAPI.xhtml">
            
            <h:outputStylesheet library="styles/userpanel" name="userpanel.css"/> 
                
            <ui:define name="conteudo">
                
                <div class="contentuser">
                    
                    <div class="contentuser">
                        teste
                    </div>
                    
                </div>              
                
            </ui:define>            
        </ui:composition>
    </h:body>
</html>

userpanel.css

.contentuser{
    
    
    background-color: green;
    width: 500px;
    height: 500px;
    
}
#2

Conversei com um amigo. E junto com ele consegui resolver da seguinte maneira

LayoutAPI.xhtml

        <?xml version='1.0' encoding='UTF-8' ?>
            <!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:h="http://xmlns.jcp.org/jsf/html"
                  xmlns:p="http://primefaces.org/ui"
                  xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
                
                <h:head>
                    
                    <title>Page Title</title>
                         
                   <h:outputStylesheet library="layout" name="StyleAPI.css"/>
                   <h:outputStylesheet library="styles/bootstrap/css" name="bootstrap.css"/>
                   <h:outputStylesheet library="styles/bootstrap/css" name="bootstrap-theme.css"/>

                                          
                   <ui:insert name="codecss" />

                </h:head>
                
                
                <h:body>
                    
                    <div id="top">
                        
                        <!-- banner -->
                        ...

                    </div>
                    
                    
                    <div id="menu">            
                            ....                        
                    </div>
                    
                    <div id="center">
                        <ui:insert name="conteudo">
                            
                            
                        </ui:insert>            
                    </div>
                                       
                </h:body>
            </html>

Userpanel.xhtml

        <?xml version='1.0' encoding='UTF-8' ?>
        <!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:h="http://xmlns.jcp.org/jsf/html"
              xmlns:f="http://xmlns.jcp.org/jsf/core"
              xmlns:ui="http://xmlns.jcp.org/jsf/facelets"     
              >
            <h:head>                
                
            </h:head>
            <h:body>
                <ui:composition template="../../resources/layout/LayoutAPI.xhtml">
                    
                    <ui:define name ="codecss">
                            <h:outputStylesheet library="styles/userpanel" name="userpanel.css"/> 
                    </ui:define>
                        


                    <ui:define name="conteudo">
                        
                        <div class="contentuser">
                            
                            <div class="contentuser">
                                teste
                            </div>
                            
                        </div>              
                        
                    </ui:define>            
                </ui:composition>
            </h:body>
        </html>