Theme Builder Plugin

[All Adaptavist Apps]

Page tree

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

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

Compare with Current View Page History

« Previous Version 2 Current »

The following HTML markup represents a highly simplified version of the HTML output by pages when viewed with Theme Builder 4.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-leftAdbar">
                                        <div>
                                            Left Ad-Bar
                                        </div>
                                    </td>

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

                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td id="navigation" class="layout atb-navigation" width="100%">
                                                           <div>
                                                              Navigation
                                                           </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="layout atb-rightAdbar">
                                        <div>
                                            Right Ad-Bar
                                        </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>
                                                                Left Sidebar
                                                            </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"><div class="layout atb-contentdiv">
                                                                Confluence output
                                                            </div></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>
                                                                Right Sidebar
                                                            </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="attribution" align="center" class="attribution"> 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!

  • No labels