Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (gfraser), last modified by Unknown User (amoran) on Apr 08, 2010

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:

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

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

                            <table class="layout atb-page" width="100%">
                                <tr>
                                    <td class="layout atb-upper">
                                        <div class="atb-u1">
                                            <div class="atb-u2">
                                                <table>
                                                    <tr>
                                                        <td id="header" class="layout atb-header" width="100%">
                                                            header
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="menu" class="layout atb-menu" width="100%">
                                                            menu

                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="navigation" class="layout atb-navigation" width="100%">
                                                             navigation
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="layout atb-lower">
                                        <div class="atb-l1">
                                            <div class="atb-l2">
                                                <table width="100%">
                                                    <tr class="layout">
                                                        <td id="leftSidebar" class="layout atb-sidebar atb-leftSidebar" rowspan="2">
                                                            <div>
                                                                lsb
                                                            </div>
                                                        </td>
                                                        <td id="leftSidebar-slider" class="layout atb-slider atb-leftslider noselect" rowspan="2">
                                                            <img class="layout atb-slider-img atb-leftslider-img">
                                                        </td>
                                                        <td class="atb-titlecontent">
                                                            <div id="title" class="atb-title">
                                                                 title
                                                            </div>
                                                            <div id="content" class="layout atb-content">
                                                                <!-- Confluence output -->
                                                                <div id="actionerrors" class="actionerrors"></div>
                                                                <table width="100%">
                                                                    <tr>
                                                                        <td valign="top" class="pagebody">
                                                                            <table style="clear: both" width="100%">
                                                                                <tr>
                                                                                    <td class="pagecontent" valign="top">
                                                                                        <div class="wiki-content">
                                                                                            content
                                                                                        </div>
                                                                                         trackback rdf
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                <!-- end of Confluence output -->
                                                            </div>
                                                        </td>
                                                        <td id="rightSidebar-slider" class="layout atb-slider atb-rightslider noselect" rowspan="2">
                                                            <img class="layout atb-slider-img atb-rightslider-img">
                                                        </td>
                                                        <td id="rightSidebar" class="layout atb-sidebar atb-rightSidebar" rowspan="2">
                                                            <div>
                                                                rsb
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="footnote" class="layout atb-footnote">
                                                            <div>
                                                                footnotes
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td id="footer" class="layout atb-footer">
                                        <div> footer </div>
                                    </td>
                                </tr>
                            </table>

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

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!