Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (gfraser), last modified by Unknown User (amoran) on Oct 24, 2008

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

HTML Structure

The following HTML markup represents a highly simplified version of the HTML output by pages when viewed with Theme Builder 3.x - if you're looking to go the extra mile with CSS customisation, this should help a lot:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >

 <head>
 </head>

 <body class="atb-body context-$context mode-$mode" id="document">

  <table class="atb-shell">
   <tr>
    <td style="vertical-align:top;">
     <div class="atb-p1"><div class="atb-p2"><div class="atb-p3">

      <table class="layout atb-page">
       <tbody>

        <!-- headings region -->
        <tr>
         <td class="layout atb-upper">
          <div class="atb-u1"><div class="atb-u2">
           <table>
            <tr>
             <td id="header" class="layout atb-header">### header ###</td>
            </tr>
            <tr>
             <td id="menu" class="layout atb-menu">### menu ###</td>
            </tr>
            <tr>
             <td id="navigation" class="layout atb-navigation">### navigation ###</td>
            </tr>
           </table>
          </div></div>
         </td>
        </tr>
        <!-- end of headings region -->

        <!-- central region -->
        <tr>
         <td class="layout atb-lower">
          <div class="atb-l1"><div class="atb-l2">
           <table>
            <tr class="layout">

             <!-- left sidebar -->
             <td id="leftSidebar" class="layout atb-sidebar atb-leftSidebar">
              <div>### lsb ###</div>
             </td>
             <td id="leftSidebar-slider" class="layout atb-slider atb-leftslider noselect">
              <img class="layout atb-slider-img atb-leftslider-img">
             </td>
             <!-- end of left sidebar -->

             <td class="atb-titlecontent">
              <!-- page title -->
              <div id="title" class="atb-title">
               ### title ###
              </div>
              <!-- end of page title -->

              <div id="content" class="layout atb-content">
                <!-- Confluence output -->
                <div id="actionerrors" class="actionerrors"></div>
                <table>
                 <tr>
                  <td valign="top" class="pagebody">
                   <table style="clear: both">
                    <tr>
                     <td class="pagecontent" valign="top">
                      <div class="wiki-content">### content ###</div>
                      ### trackback rdf ###
                     </td>
                    </tr>
                   </table>
                  </td>
                 </tr>
                </table>
                <!-- end of Confluence output -->
               </td>
              </div>
             </td>

             <!-- right sidebar -->
             <td id="rightSidebar-slider" class="layout atb-slider atb-rightslider noselect">
              <img class="layout atb-slider-img atb-rightslider-img">
             </td>
             <td id="rightSidebar" class="layout atb-sidebar atb-rightSidebar">
              <div>### rsb ###</div>
             </td>
             <!-- end of right sidebar -->

            </tr>

            <!-- footnotes section -->
            <tr>
             <td id="footnote" class="layout atb-footnote">
              <div>### footnotes ###</div>
             </td>
            </tr>
            <!-- end of footnotes section -->

           </table>
          </div></div>
         </td>
        </tr>

        <tr>
         <td id="footer" class="layout atb-footer">
          <div>### footer ###</div>
         </td>
        </tr>
        <!-- end of central region -->

       </tbody>
      </table>

     </div></div></div>
    </td>
   </tr>
   <tr>
    <td id="poweredby" align="center" class="poweredby smalltext">### powered by ###</td>
   </tr>
  </table>
 </body>
</html>

FAQs

We had hoped to remove as many tables as possible in Theme Builder 3.0, however a number of factors prevented us from doing so:

  • Browser inconsistencies prevented us from making more extensive use of <div> elements
  • Vertical alignment is far easier in table cells - it's possible but deeply painful with <div> elements
  • We had to retain a high degree of backwards compatibility
  • There's not a lot we can do about the TWO tables output by Confluence in the content area without causing problems when Confluence is upgraded
  • Current <div> box models didn't provide the layout flexibility that we wanted and we also wanted to avoid using JavaScript to overcome height and positioning problems

We're going to keep looking for ways to simplify the markup, however with 2000+ customers in 55+ countries using a wide range of browsers and operating systems, it's somewhat tricky and will take a while before we find a reliable alternative to using nasty tables. If you have any suggestions, we'd love to hear them!

  • No labels