View and Edit Menus

The new menu code has been kept neutral and straightforward, but the colors and drop-down icons can be easily customized. There are no menu icons; these have been removed from ThemeBuilder. Add your own custom choices using HTML or CSS.

Usage

The HTML for the View and Edit menus should be copied into a ThemeBuilder panel. We recommend using a different panel for each menu to ease maintenance.

  1. Click on the Confluence Administration icon, and select General Configuration.

  2. Choose Edit Skins from the ThemeBuilder section of the left sidebar.

  3. Select the skin you want to edit, and click on the Panels tab.

  4. Click the Create a New Panel button beneath the Disabled Panels section of the page.

  5. Rename the panel to match the menu you are adding. If you are using the code from this page, we suggest menu-view and menu-edit. Keep the Storage Format option in the Type column.

  6. Click the Edit Panel Content icon to edit the panel contents, then copy the relevant code from this page and paste it into the new panel.

  7. Repeat steps 4 through 6 for each menu you want to add.

    The panel will need to be included from another panel, for example, the Title.

  8. Open the Title panel and place the cursor where you want the menus to appear. They need to be wrapped in an HTML unordered menu to control the styling. Copy the HTML below into your panel. It will create a horizontal menu containing the following:

    • The Panel Sitehome macro for a context-sensitive link to space or site home

    • A Panel Import macro for the drop-down view menu - be sure to check the name matches your panel.

    • A Panel Import macro for the drop-down edit menu - be sure to check the name matches your panel. This content is wrapped by a Builder Hide macro, so anonymous users will not see it.

       
      <div class="adpt-dropdown horizontal">
	<ul>
		<li>
			<ac:macro ac:name="panel-sitehome">
				<ac:parameter ac:name="target">spacehome</ac:parameter>
				<ac:rich-text-body>Home</ac:rich-text-body>
			</ac:macro>
		</li>
	</ul>
	<ac:macro ac:name="panel-import">
		<ac:parameter ac:name="panel">menu-view</ac:parameter>
	</ac:macro>
	<ac:macro ac:name="panel-hide">
		<ac:parameter ac:name="user">@anonymous</ac:parameter>
		<ac:rich-text-body>
			<ac:macro ac:name="panel-import">
				<ac:parameter ac:name="panel">menu-edit</ac:parameter>
			</ac:macro>
		</ac:rich-text-body>
	</ac:macro>
</div>

Follow the instructions on this page to add ThemeBuilder dropdown styles resources to your skin. With dropdown.css and the images in place, your new menus should automatically pick up the styling.

Menu Customization

If you want to alter the icons or color scheme, look at these code lines in dropdown.css

  • Top Level List Items Text and Background

     
    .adpt-dropdown ul li {
    background-color: #F5F5F5;
    border-color: #EBEBEB #D9D9D9 #D9D9D9;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    color: #000;
...
}

  • Dropdown Menu Items Text

     
    .adpt-dropdown ul ul li,
.adpt-dropdown-horizontal ul .dir {
    background-color: #E9E9E9;
    padding-right: 20px;
}

  • Dropdown Menu Link Hover and Active Text Colors

     
    .adpt-dropdown a:hover {
    color: #cc3300;
}
.adpt-dropdown a:active {
    color: #ffa500;
}

  • Dropdown Menu Link Hover Background Colors

     
    .adpt-dropdown li.hover,
.adpt-dropdown li:hover,
.adpt-dropdown ul li.hover,
.adpt-dropdown ul li:hover,
.adpt-dropdown-horizontal ul .dir.hover,
.adpt-dropdown-horizontal ul .dir:hover {
    background-color: #d9d9d9;
}

Resources

HTML for View Menu

xml
<ul>
  <li>View
  <ul>
    <ac:macro ac:name="panel-show">
      <ac:parameter ac:name="context">page</ac:parameter>
      <ac:rich-text-body>
        <li>This page
          <ul>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.page</ac:parameter>
                <ac:parameter ac:name="item">view</ac:parameter>
                <ac:rich-text-body>Normal View</ac:rich-text-body>
              </ac:macro>
            </li>
            <ac:macro ac:name="panel-show">
              <ac:parameter ac:name="context">page</ac:parameter>
              <ac:rich-text-body>
                <li class="menuseparator">
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.page.operations.export</ac:parameter>
                    <ac:parameter ac:name="item">pdfexportpageop</ac:parameter>
                    <ac:rich-text-body>Export to PDF</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.page.operations.export</ac:parameter>
                    <ac:parameter ac:name="item">wordexport</ac:parameter>
                    <ac:rich-text-body>Export to Word</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.button</ac:parameter>
                    <ac:parameter ac:name="item">share</ac:parameter>
                    <ac:rich-text-body>Share this Page</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li class="menuseparator">
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/secondary</ac:parameter>
                    <ac:parameter ac:name="item">view-information</ac:parameter>
                    <ac:rich-text-body>Page Information</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pagefavourite</ac:parameter>
                    <ac:rich-text-body>Add Favourite</ac:rich-text-body>
                  </ac:macro>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pageunfavourite</ac:parameter>
                    <ac:rich-text-body>Remove Favourite</ac:rich-text-body>
                  </ac:macro>
                </li>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pagestartwatching</ac:parameter>
                    <ac:rich-text-body>Watch Page</ac:rich-text-body>
                  </ac:macro>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.action/marker</ac:parameter>
                    <ac:parameter ac:name="item">pagestopwatching</ac:parameter>
                    <ac:rich-text-body>Stop Watching Page</ac:rich-text-body>
                  </ac:macro>
                </li>
              </ac:rich-text-body>
            </ac:macro>
            <ac:macro ac:name="panel-hide">
              <ac:parameter ac:name="context">page</ac:parameter>
              <ac:rich-text-body>
                <li>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.collector.pages</ac:parameter>
                    <ac:parameter ac:name="item">watch-space</ac:parameter>
                    <ac:rich-text-body>Watch Space</ac:rich-text-body>
                  </ac:macro>
                  <ac:macro ac:name="web-item">
                    <ac:parameter ac:name="section">system.content.collector.pages</ac:parameter>
                    <ac:parameter ac:name="item">stop-watching-space</ac:parameter>
                    <ac:rich-text-body>Stop Watching Space</ac:rich-text-body>
                  </ac:macro>
                </li>
              </ac:rich-text-body>
            </ac:macro>
          </ul>
        </li>
      </ac:rich-text-body>
    </ac:macro>
    <li>Other pages
      <ul>
        <li>
          <ac:macro ac:name="panel-sitehome">
            <ac:parameter ac:name="target">spacehome</ac:parameter>
            <ac:rich-text-body>Home Page</ac:rich-text-body>
          </ac:macro>
        </li>
        <li>
          <ac:macro ac:name="panel-sitehome">
            <ac:parameter ac:name="target">dashboard</ac:parameter>
            <ac:rich-text-body>Dashboard</ac:rich-text-body>
          </ac:macro>
        </li>
        <ac:macro ac:name="panel-hide">
          <ac:parameter ac:name="context">global</ac:parameter>
          <ac:rich-text-body>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space</ac:parameter>
                <ac:parameter ac:name="item">space-blogposts</ac:parameter>
                <ac:parameter ac:name="force">true</ac:parameter>
                <ac:rich-text-body>News</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.pages</ac:parameter>
                <ac:parameter ac:name="item">list-recently-updated</ac:parameter>
                <ac:rich-text-body>Recent Updates</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.help/pages</ac:parameter>
                <ac:parameter ac:name="item">feedbuilder</ac:parameter>
                <ac:rich-text-body>RSS Feed Builder</ac:rich-text-body>
              </ac:macro>
            </li>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.pages</ac:parameter>
                <ac:parameter ac:name="item">list-alphabetically</ac:parameter>
                <ac:rich-text-body>Index</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.pages</ac:parameter>
                <ac:parameter ac:name="item">list-content-tree</ac:parameter>
                <ac:rich-text-body>Site Map</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.labels</ac:parameter>
                <ac:parameter ac:name="item">view-labels-all</ac:parameter>
                <ac:rich-text-body>Labels</ac:rich-text-body>
              </ac:macro>
            </li>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.space.tools/contenttools</ac:parameter>
                <ac:parameter ac:name="item">space-attachments</ac:parameter>
                <ac:parameter ac:name="icons">false</ac:parameter>
                <ac:rich-text-body>Space Attachments</ac:rich-text-body>
              </ac:macro>
            </li>
          </ac:rich-text-body>
        </ac:macro>
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.header/left</ac:parameter>
            <ac:parameter ac:name="item">header-people-link</ac:parameter>
            <ac:rich-text-body>People Directory</ac:rich-text-body>
          </ac:macro>
        </li>
      </ul>
    </li>
    <li>Account
      <ul>
        <ac:macro ac:name="panel-show">
          <ac:parameter ac:name="group">confluence-users</ac:parameter>
          <ac:rich-text-body>
            <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>Preferences: %user%</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user.concise/user-concise</ac:parameter>
                <ac:parameter ac:name="item">user-history</ac:parameter>
                <ac:rich-text-body>History</ac:rich-text-body>
              </ac:macro>
            </li>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user.concise/user-concise</ac:parameter>
                <ac:parameter ac:name="item">logout</ac:parameter>
                <ac:rich-text-body>Log Out</ac:rich-text-body>
              </ac:macro>
            </li>
          </ac:rich-text-body>
        </ac:macro>
        <ac:macro ac:name="panel-show">
          <ac:parameter ac:name="user">@anonymous</ac:parameter>
          <ac:rich-text-body>
            <li class="menuseparator">
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user/anonymous</ac:parameter>
                <ac:parameter ac:name="item">login</ac:parameter>
                <ac:rich-text-body>Log In</ac:rich-text-body>
              </ac:macro>
            </li>
            <li>
              <ac:macro ac:name="web-item">
                <ac:parameter ac:name="section">system.user/anonymous</ac:parameter>
                <ac:parameter ac:name="item">signup</ac:parameter>
                <ac:parameter ac:name="icons">false</ac:parameter>
                <ac:rich-text-body>Sign Up</ac:rich-text-body>
              </ac:macro>
            </li>
          </ac:rich-text-body>
        </ac:macro>
      </ul>
    </li>
  </ul>
  </li>
</ul>


HTML for Edit Menu

 
<ul>
  <li>Edit
    <ul>
      <ac:macro ac:name="panel-show">
        <ac:parameter ac:name="context">page</ac:parameter>
        <ac:rich-text-body>
            <li>Create
                <ac:macro ac:name="web-section">
                    <ac:parameter ac:name="location">system.content.add/space</ac:parameter>
                    <ac:parameter ac:name="icons">false</ac:parameter>
                </ac:macro>
            </li>
        </ac:rich-text-body>
    </ac:macro>
      <li>New
        <ul>
          <li>
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.create/global</ac:parameter>
              <ac:parameter ac:name="item">create-space</ac:parameter>
              <ac:rich-text-body>Space...</ac:rich-text-body>
            </ac:macro>
          </li>
        </ul>
      </li>
      <ac:macro ac:name="panel-show">
        <ac:parameter ac:name="context">page</ac:parameter>
        <ac:rich-text-body>
          <li>Add
            <ac:macro ac:name="web-section">
              <ac:parameter ac:name="location">system.content.add/page</ac:parameter>
              <ac:parameter ac:name="icons">false</ac:parameter>
            </ac:macro>
          </li>
          <li class="menuseparator">
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.page</ac:parameter>
              <ac:parameter ac:name="item">edit</ac:parameter>
              <ac:rich-text-body>Edit page...</ac:rich-text-body>
            </ac:macro>
          </li>
          <li>
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.content.action/modify</ac:parameter>
              <ac:parameter ac:name="item">copy</ac:parameter>
              <ac:rich-text-body>Copy Page...</ac:rich-text-body>
            </ac:macro>
          </li>
          <ac:macro ac:name="panel-show">
            <ac:parameter ac:name="permission">spaceadmin</ac:parameter>
            <ac:rich-text-body>
              <li>
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.content.action/modify</ac:parameter>
                  <ac:parameter ac:name="item">remove-page</ac:parameter>
                  <ac:rich-text-body>Remove Page...</ac:rich-text-body>
                </ac:macro>
              </li>
            </ac:rich-text-body>
          </ac:macro>
          <li class="menuseparator">
            <ac:macro ac:name="web-item">
              <ac:parameter ac:name="section">system.content.action/primary</ac:parameter>
              <ac:parameter ac:name="item">view-attachments</ac:parameter>
              <ac:rich-text-body>Attachments...</ac:rich-text-body>
            </ac:macro>
          </li>
        </ac:rich-text-body>
      </ac:macro>
      <ac:macro ac:name="panel-show">
        <ac:parameter ac:name="permission">siteadmin</ac:parameter>
        <ac:rich-text-body>
          <li class="menuseparator">Administration...
            <ul>
              <ac:macro ac:name="panel-hide">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/contenttools</ac:parameter>
                      <ac:parameter ac:name="item">space-templates-2</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Templates</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <li>
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.admin/configuration</ac:parameter>
                  <ac:parameter ac:name="item">globaltemplates</ac:parameter>
                  <ac:rich-text-body>Global Templates</ac:rich-text-body>
                </ac:macro>
              </li>
              <ac:macro ac:name="panel-hide">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li class="menuseparator">
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/adaptavist.theme.engine.space.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.builder.space.select-skin</ac:parameter>
                      <ac:rich-text-body>Select Skin</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/adaptavist.theme.engine.space.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.builder.space.edit-skins</ac:parameter>
                      <ac:rich-text-body>Edit Skins</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/lookandfeel</ac:parameter>
                      <ac:parameter ac:name="item">colorscheme</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Colour Scheme</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <ac:macro ac:name="panel-show">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li class="menuseparator">
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.admin/adaptavist.theme.engine.admin.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.theme.creator.themeadmin.global-skin</ac:parameter>
                      <ac:rich-text-body>Select Global Skin</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.admin/adaptavist.theme.engine.admin.web-section</ac:parameter>
                      <ac:parameter ac:name="item">adaptavist.theme.creator.themeadmin.edit-skins</ac:parameter>
                      <ac:rich-text-body>Edit Skins</ac:rich-text-body>
                    </ac:macro>
                  </li>
                  <li>
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.admin/lookandfeel</ac:parameter>
                      <ac:parameter ac:name="item">colourscheme</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Colour Scheme</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <ac:macro ac:name="panel-hide">
                <ac:parameter ac:name="flag">context-global</ac:parameter>
                <ac:rich-text-body>
                  <li class="menuseparator">
                    <ac:macro ac:name="web-item">
                      <ac:parameter ac:name="section">system.space.tools/overview</ac:parameter>
                      <ac:parameter ac:name="item">spacedetails</ac:parameter>
                      <ac:parameter ac:name="icons">false</ac:parameter>
                      <ac:rich-text-body>Space Administration</ac:rich-text-body>
                    </ac:macro>
                  </li>
                </ac:rich-text-body>
              </ac:macro>
              <li class="menuseparator">
                <ac:macro ac:name="web-item">
                  <ac:parameter ac:name="section">system.admin/pages</ac:parameter>
                  <ac:parameter ac:name="item">administration</ac:parameter>
                  <ac:rich-text-body>Site Administration</ac:rich-text-body>
                </ac:macro>
              </li>
            </ul>
          </li>
        </ac:rich-text-body>
      </ac:macro>
    </ul>
  </li>
</ul>

As these menus are being produced manually, the usual Confluence context controls may not apply. We have tested for the standard anonymous against the logged in user view, but we suggest you test the menus against your own restrictions and wrap the content in Builder Show/Hide where appropriate.

On this page