.png)
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
