<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="Date-Revision-yyyymmdd" content="20140918"/>
  <meta http-equiv="Content-Language" content="en"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Tag Developers Guide</title>

  <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link href="/css/main.css" rel="stylesheet">
  <link href="/css/custom.css" rel="stylesheet">
  <link href="/highlighter/github-theme.css" rel="stylesheet">

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="/js/community.js"></script>
</head>
<body>

<a href="http://github.com/apache/struts" class="github-ribbon">
  <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
</a>

<header>
  <nav>
    <div role="navigation" class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle">
            Menu
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a>
        </div>
        <div id="struts-menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                Home<b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/index.html">Welcome</a></li>
                <li><a href="/download.cgi">Download</a></li>
                <li><a href="/releases.html">Releases</a></li>
                <li><a href="/announce-2021.html">Announcements</a></li>
                <li><a href="http://www.apache.org/licenses/">License</a></li>
                <li><a href="https://www.apache.org/foundation/thanks.html">Thanks!</a></li>
                <li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                Support<b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/mail.html">User Mailing List</a></li>
                <li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li>
                <li><a href="/security.html">Reporting Security Issues</a></li>
                <li class="divider"></li>
                <li><a href="https://cwiki.apache.org/confluence/display/WW/Migration+Guide">Version Notes</a></li>
                <li><a href="https://cwiki.apache.org/confluence/display/WW/Security+Bulletins">Security Bulletins</a></li>
                <li class="divider"></li>
                <li><a href="/maven/project-info.html">Maven Project Info</a></li>
                <li><a href="/maven/struts2-core/dependencies.html">Struts Core Dependencies</a></li>
                <li><a href="/maven/struts2-plugins/modules.html">Plugin Dependencies</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                Documentation<b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/birdseye.html">Birds Eye</a></li>
                <li><a href="/primer.html">Key Technologies</a></li>
                <li><a href="/kickstart.html">Kickstart FAQ</a></li>
                <li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li>
                <li class="divider"></li>
                <li><a href="/getting-started/">Getting Started</a></li>
                <li><a href="/security/">Security Guide</a></li>
                <li><a href="/core-developers/">Core Developers Guide</a></li>
                <li><a href="/tag-developers/">Tag Developers Guide</a></li>
                <li><a href="/maven-archetypes/">Maven Archetypes</a></li>
                <li><a href="/plugins/">Plugins</a></li>
                <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li>
                <li><a href="/tag-developers/tag-reference.html">Tag reference</a></li>
                <li><a href="https://cwiki.apache.org/confluence/display/WW/FAQs">FAQs</a></li>
                <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                Contributing<b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><a href="/youatstruts.html">You at Struts</a></li>
                <li><a href="/helping.html">How to Help FAQ</a></li>
                <li><a href="/dev-mail.html">Development Lists</a></li>
                <li><a href="/contributors/">Contributors Guide</a></li>
                <li class="divider"></li>
                <li><a href="/submitting-patches.html">Submitting patches</a></li>
                <li><a href="/builds.html">Source Code and Builds</a></li>
                <li><a href="/coding-standards.html">Coding standards</a></li>
                <li><a href="https://cwiki.apache.org/confluence/display/WW/Contributors+Guide">Contributors Guide</a></li>
                <li class="divider"></li>
                <li><a href="/release-guidelines.html">Release Guidelines</a></li>
                <li><a href="/bylaws.html">PMC Charter</a></li>
                <li><a href="/volunteers.html">Volunteers</a></li>
                <li><a href="https://gitbox.apache.org/repos/asf?p=struts.git">Source Repository</a></li>
                <li><a href="/updating-website.html">Updating the website</a></li>
              </ul>
            </li>
            <li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>


<article class="container">
  <section class="col-md-12">
    <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/tag-developers/css-xhtml-theme.md" title="Edit this page on GitHub">Edit on GitHub</a>
    
    <a href="themes-and-templates.html" title="back to Themes and Templates"><< back to Themes and Templates</a>
    
    <h1 id="css_xhtml-theme">css_xhtml theme</h1>

<p>The <em>css_xhtml theme</em> provides all the basics that the <a href="simple-theme.html">simple theme</a> provides and adds several features.</p>

<p>_ Standard two-column CSS-based layout, using <code class="highlighter-rouge">&lt;div&gt;</code> for the HTML <a href="struts-tags.html">Struts Tags</a> (<a href="form-tag.htmk">form</a>, 
  <a href="textfield-tag.html">textfield</a>, <a href="select-tag.html">select</a>, etc)</p>
<ul>
  <li>Labels for each of the HTML <a href="struts-tags.html">Struts Tags</a>, placed according to the CSS stylesheet</li>
  <li><a href="../core-developers/validation.html">Validation</a> and error reporting</li>
  <li><a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a> using 100% 
JavaScript on the browser</li>
</ul>

<h2 id="wrapping-the-simple-theme">Wrapping the Simple Theme</h2>

<p>The xhtml theme uses the “wrapping” technique described by <a href="extending-themes.html">Extending Themes</a>. Let’s look at how 
the HTML tags are wrapped by a standard header and footer. For example, in the <a href="textfield-tag.html">textfield</a> template, 
<code class="highlighter-rouge">text.ftl</code>, the <code class="highlighter-rouge">controlheader.ftl</code> and <code class="highlighter-rouge">controlfooter.ftl</code> templates are wrapped around the simple template.</p>

<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
&lt;input&lt;#rt/&gt;
 type="${(parameters.type!"text")}"&lt;#rt/&gt;
 name="${(parameters.name!"")}"&lt;#rt/&gt;
&lt;#if parameters.get("size")?has_content&gt;
 size="${parameters.get("size")}"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.maxlength?has_content&gt;
 maxlength="${parameters.maxlength}"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.nameValue??&gt;
 value="${parameters.nameValue}"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.disabled!false&gt;
 disabled="disabled"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.readonly!false&gt;
 readonly="readonly"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.tabindex?has_content&gt;
 tabindex="${parameters.tabindex}"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.id?has_content&gt;
 id="${parameters.id}"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/css.ftl" /&gt;
&lt;#if parameters.title?has_content&gt;
 title="${parameters.title}"&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/scripting-events.ftl" /&gt;
&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/common-attributes.ftl" /&gt;
&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/dynamic-attributes.ftl" /&gt;
/&gt;</code></pre></figure>

<h2 id="css-xhtml-theme-header">CSS XHTML theme header</h2>

<p>The header used by the HTML tags in the css_xhtml theme is complicated. Unlike the <a href="xhtml-theme.html">xhtml theme</a>, 
the CSS theme does not use a <code class="highlighter-rouge">labelposition</code> attribute. Instead, the label position is defined by CSS rules.</p>

<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
&lt;#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl"&gt;
&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
&lt;#assign labelpos = parameters.form.labelposition/&gt;
&lt;#elseif parameters.labelposition??&gt;
&lt;#assign labelpos = parameters.labelposition/&gt;
&lt;/#if&gt;
&lt;#if (labelpos!"top") == 'top'&gt;
&lt;div &lt;#rt/&gt;
&lt;#else&gt;
&lt;span &lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.id??&gt;id="wwctrl_${parameters.id}"&lt;#rt/&gt;&lt;/#if&gt; class="wwctrl"&gt;
    </code></pre></figure>

<p>Note that the <code class="highlighter-rouge">fieldErrors</code>, usually caused by <a href="../core-developers/validation.html">Validation</a>, are displayed in a <code class="highlighter-rouge">div</code>
block before the element is displayed.</p>

<h2 id="css-xhtml-theme-footer">CSS XHTML theme footer</h2>

<p>And the <code class="highlighter-rouge">controlfooter.ftl</code> contents:</p>

<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
${parameters.after!}&lt;#t/&gt;
    &lt;#lt/&gt;
&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
&lt;#assign labelpos = parameters.form.labelposition/&gt;
&lt;#elseif parameters.labelposition??&gt;
&lt;#assign labelpos = parameters.labelposition/&gt;
&lt;/#if&gt;
&lt;#if (labelpos!"top") == 'top'&gt;
&lt;/div&gt; &lt;#rt/&gt;
&lt;#else&gt;
&lt;/span&gt; &lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if (parameters.errorposition!"top") == 'bottom'&gt;
&lt;#assign hasFieldErrors = parameters.name?? &amp;&amp; fieldErrors?? &amp;&amp; fieldErrors[parameters.name]??/&gt;
&lt;#if hasFieldErrors&gt;
&lt;div &lt;#rt/&gt;&lt;#if parameters.id??&gt;id="wwerr_${parameters.id}"&lt;#rt/&gt;&lt;/#if&gt; class="wwerr"&gt;
&lt;#list fieldErrors[parameters.name] as error&gt;
    &lt;div&lt;#rt/&gt;
    &lt;#if parameters.id??&gt;
     errorFor="${parameters.id}"&lt;#rt/&gt;
    &lt;/#if&gt;
    class="errorMessage"&gt;
             ${error}
    &lt;/div&gt;&lt;#t/&gt;
&lt;/#list&gt;
&lt;/div&gt;&lt;#t/&gt;
&lt;/#if&gt;
&lt;/#if&gt;
&lt;/div&gt;</code></pre></figure>

<h2 id="special-interest">Special Interest</h2>

<p>Two css_xhtml templates of special interest are <code class="highlighter-rouge">head</code> and <code class="highlighter-rouge">form</code>.</p>

<h3 id="head-template">Head template</h3>

<p>The css_xhtml <a href="head-tag.html">head</a> template is similar to the xhtml head template. The difference is that CSS is used 
to provide the layout. The contents of <strong>head.ftl</strong> are:</p>

<figure class="highlight"><pre><code class="language-freemarker" data-lang="freemarker">&lt;#--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
&lt;link &lt;#include "/${parameters.templateDir}/simple/nonce.ftl" /&gt; rel="stylesheet" href="&lt;@s.url value='${parameters.staticContentPath}/css_xhtml/styles.css' includeParams='none' encode='false' /&gt;" type="text/css" /&gt;
&lt;#include "/${parameters.templateDir}/simple/head.ftl" /&gt;</code></pre></figure>

<p>The head includes a style sheet. The contents of <strong>styles.css</strong> are:</p>

<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="c">/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */</span>

<span class="nc">.wwFormTable</span> <span class="p">{}</span>
<span class="nc">.label</span> <span class="p">{</span>
    <span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">;</span>
    <span class="nl">float</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span><span class="m">30%</span>
<span class="p">}</span>
<span class="nc">.errorLabel</span> <span class="p">{</span><span class="nl">font-style</span><span class="p">:</span><span class="nb">italic</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.errorMessage</span> <span class="p">{</span><span class="nl">font-weight</span><span class="p">:</span><span class="nb">bold</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.checkboxLabel</span> <span class="p">{}</span>
<span class="nc">.checkboxErrorLabel</span> <span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.required</span> <span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="no">red</span><span class="p">;}</span>

<span class="nc">.tdTransferSelect</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">middle</span><span class="p">;}</span>
<span class="nc">.tdLabelTop</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
<span class="nc">.tdCheckboxLabel</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
<span class="nc">.tdCheckboxInput</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
<span class="nc">.tdCheckboxErrorMessage</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">left</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
<span class="nc">.tdErrorMessage</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span> <span class="nl">vertical-align</span><span class="p">:</span><span class="nb">top</span><span class="p">;}</span>
<span class="nc">.formButton</span> <span class="p">{</span><span class="nl">text-align</span><span class="p">:</span><span class="nb">right</span><span class="p">;}</span></code></pre></figure>

<h3 id="form-template">Form template</h3>

<p>The css_xhtml <a href="form-tag.html">form</a> template is almost exactly like the <em>xhtml form template</em> , including support for 
<a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a>. The difference 
is that instead of printing out an opening and closing <code class="highlighter-rouge">&lt;table&gt;</code> element, there are no elements. Instead, the CSS rules 
for the individual HTML tags are assumed to handle all display logic. However, as noted, client-side validation is still 
supported.</p>

<h3 id="css_xhtml-form-template">css_xhtml form template</h3>

<p>The css_xhtml <a href="form-tag.html">form</a> template is almost exactly like the <em>xhtml form template</em> , including support for 
<a href="../core-developers/pure-java-script-client-side-validation.html">Pure JavaScript Client Side Validation</a>. The only 
difference is that instead of printing out an opening and closing <code class="highlighter-rouge">&lt;table&gt;</code> element, there are no elements. Instead, 
the CSS rules for the individual HTML tags are assumed to handle all display logic. However, as noted, client side 
validation is still supported.</p>

  </section>
</article>


<footer class="container">
  <div class="col-md-12">
    Copyright &copy; 2000-2018 <a href="http://www.apache.org/">The Apache Software Foundation </a>.
    All Rights Reserved.
  </div>
  <div class="col-md-12">
    Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are
    trademarks of The Apache Software Foundation.
  </div>
  <div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div>
</footer>

<script>!function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (!d.getElementById(id)) {
    js = d.createElement(s);
    js.id = id;
    js.src = "//platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
  }
}(document, "script", "twitter-wjs");</script>
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>

<div id="fb-root"></div>

<script>(function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


</body>
</html>