Wiki Markup to Storage Format
Many macros can be converted to storage format using the Confluence conversion when a page with wiki markup is saved. See David Simpson's blog for more information on that process.
For deprecated ThemeBuilder macros that don't convert using that method, a list of their equivalent HTML or storage format can be found on this page.
HTML Macro
When working with HTML or storage format in the ThemeBuilder panel editor, you do not need to use the HTML macro.
See the wiki markup below for an example.
Wiki Markup
{html}<ul id="mynav">{html}
{html}<li id="myId"><a class="myclass" href="#">My Link</a></li>{html}
{html}</ul>{html}becomes
HTML
<ul id="mynav">
<li id="myId"><a class="myclass" href="#">My Link</a></li>
</ul>Align Macro
{align:center}My content{align:center}<div class="center">My content</div>.center {
text-align: center;
}Menu Macros
In ThemeBuilder 4 and earlier, there were macros to help create a drop-down menu. When rendered, these macros created their equivalent HTML elements. This is the key to translating wiki markup menu macros to storage format.
- Menubar = <ul>
- Menuitem = <li>
- Menulink = <a>
- Similar in function to the compound Menuitem macro, which has also been deprecated
We have documented how to add resources in ThemeBuilder to create a drop-down menu that looks similar to the one produced by the deprecated menu macros. We will refer to those instructions as part of this guide.
First, we will cover the HTML equivalent of each component and then describe how to combine them.
| Macro Name | Wiki Markup | HTML | Comment |
|---|---|---|---|
| Menubar | The ID is not required, as it was with the wiki markup version, but you may want to keep it in the parent <div> or the <ul> if you have styles associated with that ID.The classes in the <div> are needed for the dropdown functionality. | ||
| Menuitem | |||
| Menulink to External or Hard Coded Location | For Confluence pages, you should use the <ac:link> macro as described below, or if you need to use ThemeBuilder flagLogic, you can use the Link macro. | ||
| Menulink to Confluence Page | Confluence pages always use the Confluence link function because it keeps pages linked even if they are moved. You can create these links by adding a link into a Confluence page then copying the storage format for the link.Add a list menu on a Confluence page using the standard editor methods and then include or import that page into your menu. See an example of this menu in action. | ||
| Menulink to Relative Page | Use the Page Navigation macro to create relative links. | ||
| Menulink to Home Page | The Panel Sitehome macro can link to the dashboard, site home, and space home. | ||
| Menulink Site or Page Functions | For Confluence functionality, you should convert Menulink macros to single web-items or grouped web-sections using the destinations listed from Web UI Links: |
Combined Menu Example
Using some of these examples, we can create a drop-down menu with a combination of HTML and storage format.
Example drop-down menu:
<div class="adpt-dropdown horizontal">
<ul id="level-1">
<li>
<ac:macro ac:name="panel-sitehome">
<ac:rich-text-body>
Home
</ac:rich-text-body>
</ac:macro>
<ul id="level-2">
<li>
<a href="https://www.adaptavist.com/">
Adaptavist.com
</a>
</li>
<li>
<ac:link>
<ri:page ri:content-title="Mouse" ri:space-key="TR"/>
</ac:link>
</li>
</ul>
</li>
<li>
<ac:macro ac:name="panel-pagenav">
<ac:parameter ac:name="mode">firstchild</ac:parameter>
<ac:rich-text-body>
First Child
</ac:rich-text-body>
</ac:macro>
</li>
<li>
<ac:macro ac:name="web-item">
<ac:parameter ac:name="section">system.user/user-content</ac:parameter>
<ac:parameter ac:name="item">user-profile</ac:parameter>
<ac:rich-text-body>Profile</ac:rich-text-body>
</ac:macro>
</li>
</ul>
</div>Combined Menu Result
Related Content
See an example of a ThemeBuilder style drop-down menu that imports a standard Confluence list of links from another page.