Customizing Site and Space Layouts

You can modify Confluence's look and feel by editing layout files (also known as decorators). Editing these files allows you to change the look and feel of the whole Confluence site, or just an individual space. 

When you edit a site layout, you'll be modifying the default decorators in every space in your site, except for those that have already been edited in a space. See Customize Space Layouts for more information on how to edit the decorators for a single space. 

You'll need System Administrator permissions to edit site layouts.

If you modify layouts in Confluence you will need to reapply your modifications each time you upgrade Confluence. The more dramatic your customizations are, the harder it may be to reapply the changes when upgrading.  See Upgrading Customized Site and Space Layouts to find out what will be involved before modifying the layouts. 

Confluence is built on top of the open source SiteMesh library, a web-page layout system.  

To edit the layout of Confluence, you will need to modify these decorator files. A decorator file is a .vmd file and is written in Velocity. You can learn more from the Velocity User Guide.

Once you are familiar with Velocity, you can edit the decorator files to personalize the appearance of Confluence.

The decorator files in Confluence are grouped into the following categories:

  • Site layouts: These are used to define the controls that surround each page in the site. For example, the header, footer and dashboard.
  • Content layouts: These control the appearance of content such as pages and blog posts. They do not change the way the pages themselves are displayed, but allow you to alter the way the surrounding comments or attachments are displayed.
  • Export layouts: These control the appearance of spaces and pages when they are exported to HTML.

Editing a site decorator file

To edit a site decorator: 

  1. Go to  > General Configuration > Layouts (under Look and Feel)
  2. Click Create Custom next to the decorator .vmd file you want to modify.
  3. Make your changes and click Update.

If something goes wrong: Hit Reset Default to revert to the original layouts.

Using Velocity macros

When editing Custom Decorator Templates, there are a number of macros available to define complex or variable parts of the page such as menus and breadcrumbs. You may insert these macros anywhere in your templates. More information on Working With Decorator Macros.

Advanced customizations

Overriding Velocity templates

The velocity directory is at the front of Confluence's Velocity template search path. As such, you can override any of Confluence's Velocity templates by placing an identically named file in the right place. While we don't recommend you do this unless you know exactly what you're doing, it does give you complete control over the look of every aspect of Confluence. It also means that you can edit your templates in a text-editor if you wish, rather than through the web interface.

Caching

Velocity is configured to cache templates in memory. When you edit a page from within Confluence, it knows to reload that page from disk. If you are editing the pages on disk, you will either have to turn off velocity's caching temporarily in WEB-INF/classes/velocity.properties, or restart the server to make your changes visible.

Location of Velocity files

You will find the Velocity files in your Confluence installation directory. The primary Velocity files are located in the <CONFLUENCE-INSTALLATION>\confluence\decorators directory. For example, you will find the following files in that directory: main.vmd, space.vmd, form-aui.vmd, global.vmd, and more.

Finding the layout via the URL

If the layout has changed so extensively as to not be visible, you can browse to the URL directly:

http://<confluence base url>/admin/resetdecorator.action?decoratorName=decorators/main.vmd

Substitute the base URL and the appropriate .vmd file.

Last modified on Nov 24, 2021

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.