4 Replies Latest reply on Apr 24, 2008 4:21 AM by Zolt Egete

    skin problems

    Zolt Egete Newbie

      Hello I am using SEAM 2.0.1 GA and and richfaces libraries 3.2.0 GA

      I have defined a template for my project which looks like this

      <!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:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:s="http://jboss.com/products/seam/taglib">
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title><h:outputText value="#{messages['RegisterOffice']}" /> </title>
       <link href="stylesheet/theme.css" rel="stylesheet" type="text/css" />
       </head>
      
       <body>
       <div id="document">
       <div id="header">
       <ui:include src="menu.xhtml">
       <ui:param name="projectName" value="Pisarnica"/>
       </ui:include>
       </div>
      
       <div id="container">
       <div id="sidebar">
       <ui:include src="../sidebar.xhtml" />
       </div>
      
       <div id="content">
       <ui:insert name="body"/>
       </div>
       </div>
      
       <div id="footer">
       <ui:include src="../footer.xhtml" />
       </div>
       </div>
       </body>
      </html>



      the CSS file is the standard generated CSS with added definition for the DIV tags, here is the part for the DIV tags


      #document {
       padding: 0 1px;
       float: left;
       border-bottom: 6px solid #BED6F8;
      }
      
      #header {
       float: left;
       width: 900px;
       height: 25px;
      }
      
      #menu {
       float: left;
       width: 900px;
       height: 25px;
       border-bottom: 5px solid #BED6F8;
      }
      
      #container {
       float: left;
       width: 900px;
      }
      
      #sidebar {
       float: left;
       width: 150px;
       height:500px;
       padding: 0px 0px 0px 0px;
       border-right: 2px solid #BED6F8;
      }
      
      #content {
       float: left;
       width: 746px;
       height:500px;
       border-right: 2px solid #BED6F8;
      }
      
      #footer {
       clear: both;
       padding-top: 0px;
       padding-bottom: 0px;
       float: left;
       border-top: 3px solid #BED6F8;
       border-right: 2px solid #BED6F8;
       width: 898px;
       text-align: center;
      }
      
      #org_person_div {
       position:relative;
       padding-top: 0px;
       padding-bottom: 0px;
       width: 300px;
      }


      In the web.xml I have defined the skin style I want to use

      <context-param>
       <param-name>org.richfaces.SKIN</param-name>
       <param-value>emeraldTown</param-value>
       </context-param>


      The problem is that when I load index page, or every other page in the browser (I have checked with firefox and IE7) the skin styles are not loaded, the elements using the DIV id's are shown on the page as they suppose to appear (so the CSS file is loaded OK) but the skin profile is not show on the page, meaning the header part is not formatted nicely in the rich:panel part (there is no color formatting etc.)

      Sometimes when I try to reload a page several times the skin formatting strangely appears but then again it disappears when I start a new browser session

      Here is the code for the login page I use

      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       template="layout/template.xhtml">
      
       <ui:define name="body">
       <h:messages styleClass="message"/>
      
       <h:form id="login">
       <rich:panel>
       <f:facet name="header"><h:outputText value="#{messages['Login']}"/></f:facet>
      
       <p><h:outputText value="#{messages['PleaseLoginHere']}"/></p>
       <div class="dialog">
       <h:panelGrid columns="2" rowClasses="prop" columnClasses="name,value">
       <h:outputLabel for="username"><h:outputText value="#{messages['Username']}"/> :</h:outputLabel>
       <h:inputText id="username"
       value="#{identity.username}"/>
       <h:outputLabel for="password"><h:outputText value="#{messages['Password']}"/> :</h:outputLabel>
       <h:inputSecret id="password"
       value="#{identity.password}"/>
       <h:outputLabel for="rememberMe"><h:outputText value="#{messages['RememberMe']}"/></h:outputLabel>
       <h:selectBooleanCheckbox id="rememberMe"
       value="#{identity.rememberMe}"/>
       </h:panelGrid>
       </div>
       </rich:panel>
      
       <div class="actionButtons">
       <h:commandButton value="#{messages['Login']}" action="#{identity.login}"/>
       </div>
       </h:form>
       </ui:define>
      </ui:composition>


      Does anybody know why this is happening?
      All help is appreciated

      Thanks in advance
      Zolt