title: Primefaces with jsf template problems
body: <p>i have some serious problems with my jsf webpage. I've written an <code>template.xhtml</code> this way : </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;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:p="http://primefaces.org/ui"
        xmlns:f="http://java.sun.com/jsf/core"&gt;
  &lt;f:view contentType="text/html" id="fview"&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;Page template with PrimeFaces&lt;/title&gt;
      &lt;ui:debug/&gt;
      &lt;f:metadata&gt;
          &lt;ui:insert name="metadata"/&gt;
      &lt;/f:metadata&gt;
  
      &lt;head&gt;
          &lt;p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/&gt;
  
          &lt;p:layout fullPage="true"&gt;
              &lt;p:layoutUnit position="north" style="border: 0;"&gt;
                  &lt;h:form&gt;
                      &lt;p:panel id="basic" header="Usermanagment und Selfcare"
                               style="border: 0;"&gt;
                          &lt;h:outputText value="Willkommen #{login.user}" style="float:left"/&gt;
                          &lt;h:commandLink action="#{login.logout}" value="Logout" style="float:right"/&gt;
                          &lt;p:themeSwitcher id="basictheme" style="width:165px;display: table;margin: auto"&gt;
                              &lt;f:selectItem itemLabel="Choose Theme" itemValue=""/&gt;
                              &lt;f:selectItems value="#{themeSwitcherView.themes}"/&gt;
                          &lt;/p:themeSwitcher&gt;
                      &lt;/p:panel&gt;
                  &lt;/h:form&gt;
              &lt;/p:layoutUnit&gt;
              &lt;p:layoutUnit position="west" style="border: 0;"&gt;
              &lt;/p:layoutUnit&gt;
              &lt;p:layoutUnit position="center" style="border: 0;"&gt;
                  &lt;p:messages autoUpdate="true" id="msgs" showDetail="true" showSummary="true"/&gt;
                  &lt;ui:insert name="content"/&gt;
              &lt;/p:layoutUnit&gt;
          &lt;/p:layout&gt;
  
          &lt;p:dialog modal="true" widgetVar="statusDialog" showHeader="false" draggable="false" closable="false" resizable="false" visible="false" position="center" maximizable="false" minimizable="false" &gt;
              &lt;p:graphicImage value="#{resource['images/ajax-loader.gif']}" /&gt;
          &lt;/p:dialog&gt;
      &lt;/head&gt;
      &lt;body onload="statusDialog.hide();"&gt;
      &lt;/body&gt;
  &lt;/f:view&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and an <code>index.xhtml</code> like this</p>
  
  <pre><code>&lt;ui:composition xmlns="http://www.w3.org/1999/xhtml"
                  xmlns:ui="http://java.sun.com/jsf/facelets"
                  template="WEB-INF/template/layout.xhtml"&gt;
      &lt;ui:define name="metadata"&gt;
      &lt;/ui:define&gt;
      &lt;ui:define name="content"&gt;
          Hello world! Welcome to a page derived from a template
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p>So i want to have an Page with a sidebar with items to select new pages which are rendered in the center. But it seems like i have lost all primefaces design. The page looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/9oJlY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9oJlY.png" alt="enter image description here"></a></p>
  
  <p>So where is the designe gone? what am i missing?</p>