This diagram portrays a linear version of Wikidot's page structure. This shows all of the tags that Wikidot utilizes in order to form the page you see, complete with any ID or class individual elements may use.
Here, you can see the level of each element. Levels go deeper as an elements are nested within one another. So for instance, everything on level 6 is contained within level 5. Since the top bar is on level 6, then it is contained within the header, which is on level 5. You can proceed deeper to see what the top bar contains as well. So, if you ever wanted to style the links that appear in the top bar drop downs, you can style #top-bar ul li ul li a, which is in the order that this page structure shows.
<html>
<head>
<title> </title>
<script type="text/javascript"> </script>
<script type="text/javascript"> </script>
<script type="text/javascript"> </script>
<script type="text/javascript"> </script>
<meta>
<meta>
<script type="text/javascript"> </script>
<style type="text/css"> </style>
<style id="internal-style" type="text/css"> </style>
<link>
<link>
<link>
<script type="text/javascript"> </script>
<style> CSS Module Styling</style>
<script type="text/javascript"> </script>
</head>
<body id="html-body">
<a name="page-top"> </a>
<div id="navi-bar">
<a class="random-site">Explore »</a>
</div>
<div id="navi-bar-shadow"> </div>
<script type="text/javascript"> </script>
<div id="container-wrap-wrap">
<div id="container-wrap">
<div id="container">
<div id="header">
<h1>
<a>
<span> </span>
</a>
</h1>
<h2>
<span> </span>
</h2>
<div id="search-top-box">
<form id="search-top-box-form">
<input id="search-top-box-input" class="text empty">
<input class="button">
</form>
</div>
<div id="top-bar">
<ul>
<li>
<a> Single Link</a>
</li>
<li>
<a> Nested Links</a>
<ul>
<li>
<a> </a>
</li>
<li>
<a> </a>
</li>
</ul>
</li>
</ul>
</div>
<div id="login-status">
<a id="my-account">My account</a>
<a id="account-topbutton"> </a>
<div id="account-options">
<ul>
<li>
<a>Activities</a>
</li>
<li>
<a>Messages</a>
</li>
<li>
<a>Sites</a>
</li>
<li>
<a>Settings</a>
</li>
<li>
<a>Upgrade</a>
</li>
<li>
<a>Sign out</a>
</li>
</ul>
</div>
<script type="text/javascript"> </script>
</div>
</div>
<div id="content-wrap">
<div id="main-content">
<div id="action-area-top"> </div>
<div id="page-title"> </div>
<div id="page-info-break"> </div>
<div id="page-options-container">
<div id="page-options-bottom" class="page-options-bottom">
<a id="edit-button">Edit</a>
<a id="tags-button">Tags</a>
<a id="discuss-button">Discuss</a>
<a id="history-button">History</a>
<a id="files-button">Files</a>
<a id="print-button">Print</a>
<a id="site-tools-button">Site tools</a>
<a id="more-options-button">+ Options</a>
</div>
<div id="page-options-bottom-2" class="page-options-bottom">
<a id="edit-sections-button">Edit Sections</a>
<a id="edit-append-button">Append</a>
<a id="edit-meta-button">Edit Meta</a>
<a id="watchers-button">Watchers</a>
<a id="backlinks-button">Backlinks</a>
<a id="view-source-button">Page Source</a>
<a id="parent-page-button">Parent</a>
<a id="page-block-button">Lock Page</a>
<a id="rename-move-button">Rename</a>
<a id="delete-button">Delete</a>
</div>
<div id="page-options-area-bottom"> </div>
</div>
</div>
</div>
<div id="footer">
<div class="options">
<a id="wikidot-help-button">Help</a>
<a id="wikidot-tos-button">Terms of Service</a>
<a id="wikidot-privacy-button">Privacy</a>
<a id="bug-report-button">Report a bug</a>
<a id="abuse-report-button">Flag as objectionable</a>
</div>
<a>Wikidot.com</a>
</div>
<div id="footer-bar">
<div> </div>
<h2>Other interesting sites</h2>
<div class="units">
</div>
</div>
</div>
</div>
</div>
<div id="page-options-bottom-tips"> </div>
<div id="page-options-bottom-2-tips"> </div>
<div id="account-notifications-dummy"> </div>
<div id="dummy-ondomready-block"> </div>
<script type="text/javascript"> </script>
<script type="text/javascript"> </script>
<noscript>
<img> </img>
</noscript>
</body>
</html>
External References
- Layout Reference (Simple description of the layout of a Wikidot page)
- A Wikidot Page Explained (A nice graphical representation of a Wikidot page)