---
title: "Content Formatting Toolkit for Confluence Documentation (Data Center)"
canonical: "https://support.covectors.io/space/CAD/546177039/Content%20Formatting%20Toolkit%20for%20Confluence%20Documentation%20(Data%20Center)"
format: markdown
---
# What’s new in Content Formatting Toolkit for Confluence
The latest release of our Content Formatting Toolkit Data Center app comes with a host of new changes.
## A brand new name
For this new release, we have decided to change the app name to **Content Formatting Toolkit for Confluence!**
We've made this change to better distinguish ourselves in Atlassian Marketplace, ensuring that our app stands out and resonates more with our users.
## Goodbye “SP” and hello “Vectors”
We have also changed the macro names within the app. You might have noticed the prefix SP (which stood for Spectrum) in some of our macro names. Well, we've decided to streamline things a bit by incorporating **"Vectors"** directly into the macro names, dropping the SP prefix . This adjustment should make it easy for you to identify our macros without any confusion.
Below, you'll find a handy table detailing the old and new macro names.
| | |
| --- | --- |
| **Old name** | **New Name** |
| SP Tabs group | Tabs Group | Vectors (Formerly: SP Tabs group) |
| SP Tab pane | Tab Pane | Vectors (Formerly: SP Tab pane) |
| SP Page Status | Page Status | Vectors (Formerly: SP Page Status) |
| SP Progress bar | Progress Bar | Vectors (Formerly: SP Progress bar) |
| SP Progress bar advanced | Progress Bar Advanced | Vectors (Formely: SP Progress bar advanced) |
| SP Percentage progress bar | Percentage Progress Bar | Vectors (Formerly: SP Percentage progress bar) |
| SP Infobulle | Tooltip | Vectors (Formerly: SP Infobulle) |
| SP Notification | Notification | Vectors (Formerly: SP Notification) |
| SP Foot Note | Footnote | Vectors (Formerly: SP Foot Note) |
| SP Macro Button | Button | Vectors (Formerly: Sp Macro Button) |
| macro panels | Panels | Vectors (Formerly: macro panels) |
# Get Started
Content Formatting Toolkit for Confluence is a collection of macros designed to help you create, structure and organize engaging and dynamic content across Confluence pages. Developed with the users’ needs in mind, SFM allows you to:
## Organize and structure content
With macros such as Tabs, Navigation Groups, and Expanders, you can easily create, organize and structure your content within customizable macros. This makes Confluence pages easier to navigate and content simpler to access and consume.
## Enhance navigation and user journeys
You can contextualize your Confluence pages and enhance navigation with macros such as Panels, Notifications, Infobulles and Footnotes. These macros are ideal for use cases such as user onboarding, product documentation and documented processes where users might need additional content elements to guide them through their journeys.
## Create processes and track progress
Create detailed processes with custom steps and track their progress. You can associate any given Confluence page with a specific status and a certain percentage. This helps teams to better organize, visualize and navigate their processes.
## Anchors
Anchors allow you to link specific sections of a Confluence page with the app’s tabulation macros. You can combine the anchor parameter with the three tabulation macros (tabs, horizontal and vertical navigation).
There are two types of links:
1. **Internal link: **one item can refer to another. For example, one item within a tab/navigation group can be linked to a tab-pane or navigation item
2. **External link:** refer to a specific item from any location within your Confluence page. For example, link a term within a Confluence page with a specific tab-pane or navigation item.
Now let’s walk through how to use the anchor parameter with each macro. And let's start with internal links.
## Insert internal and external links to macro tabulation via Anchors
Here we are going to link a term within a tab/navigation group with a tab pane/navigation item. In our example, the term "Scrum" will be linked to a tab pane/navigation item with the same name.
Tab groups
- Create a tab group and fill it with tab panes.
- Add the tab pane name along with a unique anchor (in our case we specified the word ***Scrum*** as our anchor identifier). To put it simply, the anchor is the link between your Confluence content and tabulation macros. Please note, in case you don’t specify an anchor, a code will be generated automatically acting as your anchor.
- Select the term you want to **link with your tab pane > insert link.**
- Paste the Confluence page link (View mode link) and include "/#Anchor" in our example: /#Scrum. In case you didn't specify an anchor, include “/#” followed by the auto-generated code.
- Click save
Horizontal navigation groups
- Create a navigation group and include horizontal items.
- Specify the navigation item name along with a unique anchor. Please note, in case you don’t specify an anchor, a code will be generated automatically acting as your anchor.
- Navigate to the term you wish to link with the horizontal navigation item.
- Select the term > click insert link > paste the link of the Confluence page (View mode link) and include "/#Anchor" in our example: /#Scrum. In case you didn't specify an acnhor, include “/#” followed by the auto-generated code.
- Click save.
Vertical navigation groups
- Create a navigation group and include items.
- Specify the navigation item name along with a unique anchor. We will use the same example as above with “Scrum” being the anchor. Then, we will link terms within the page with the nav item via the anchor “Scrum”. Please note, in case you don’t specify an anchor, a code will be generated automatically acting as your anchor.
- Create or navigate to the term you wish to link with the vertical navigation item.
- Select the term > click insert link > paste the link of the Confluence page (View mode link) and include "/#Anchor" in our example: /#Scrum.
- Click save
# Tabs
Tabs represent an effective way to help you categorize content and structure the layout of your Confluence pages. Tabs consists of two macros: Tabs group and Tabs Pane. Think of “Tabs group” as the container and Tabs Pane as individual pages that will fill the container. First, create a tab group, and then fill it with one or multiple Tab Panes.
## Tab Group
1. Navigate to the page you want to edit
2. Click on “Edit”
3. Point to the position where you want to insert the tab group
4. Click on the Insert button “+” > Other macros
5. Search for “Tab Group | Vectors” in the dialog box.
6. Select the tab group display (horizontal or vertical), the color and whether to apply CSS outline. A real time preview is displayed on the right hand side of the menu to help you visualize changes in real time.
7. Click Insert. The macro will immediately be displayed.
To edit or remove the Tab group, simply hover your mouse and select “Edit” or “Remove”.
## Tab Pane
Now that you have created your Tab group, you can fill it with one or multiple tab panes.
1. Navigate to the page you want to edit
2. Click on “Edit”
3. Select the Tab Group where you want to insert panes
4. Click on the Insert button “+” > Other macros
5. Search for “Tab Pane | Vectors” in the dialog box
6. Choose the tab pane name along with an icon
7. Click insert. The tab pane will immediately appear within the tab group.
Hover your mouse over the tab pane to remove or edit it.
You are all set! Now you can start filling your tabs with rich content including text, tables, images, and more.
# Page Status
You can associate your Confluence pages with a specific status. It is an effective way to track projects and tasks and keep everyone on the same page. The way these macro works is fairly simple.
1. Navigate to the page you want to edit
2. Click on Edit
3. Click on the Insert button “+” > Other macros
4. Search for “Page Status |Vectors” in the dialog box
5. Insert additional text (Optional), select the macro’s width, and whether to display the name of the user who performed the changes. The preview box on the right-hand side displays changes in real-time. Note that the page is marked as “Draft” by default. You can change its status once you publish it.
6. Click Insert. The macro will be displayed on the page.
7. Click Update to save the page and visualize its status.
8. Navigate to the status and click on the kebab menu to change the page status. Here you have 4 available options (Draft, Action required, Official and Outdated).
> ⚠️ It is worth noting that this macro can be used once within a page.
# Progress and Percentage Bars
The progress (Simple and Advanced) and percentage bar macros allow you to create detailed processes with custom steps and track their progress. You can associate any given Confluence page with a specific process and a certain percentage. This helps teams to better organize, visualize and navigate their processes.
## Progress Bar
1. Navigate to the page you want to edit
2. Click on Edit
3. Point to the position where you want to insert the progress bar
4. Click on the Insert button “+” > Other macros
5. Search for “Progress Bar | Vectors” in the dialog box
6. Define the progress bar steps (You can select up to 7 steps), choose which step to associate with the page you are in, and enable or disable the gray background color. In the example below we have chosen three steps (To do, In Progress, and Done) and we have associated the current page with the “To do” step. The preview box allows you to visualize changes as you make them.
7. Click Insert. The macro will be displayed in edit mode. Similar to the above macros, you can edit or remove the macro by hovering over and selecting either option.
8. Click Update to save the page and visualize the progress bar. As you can see in the screenshot below, the progress bar is displayed indicating that the current page is associated with the “To do” step.
## Advanced Progress Bar
Similar to the simple progress bar, the advanced progress bar macro allows you to include a progress bar within your Confluence page. With this macro though, you can customize the progress bar in both edit and view modes by adding new steps, associating each step with a specific page, changing the look & feel, and more.
1. Navigate to your Confluence page and click edit
2. Point to the position where you want to insert the advanced progress bar
3. Click on the Insert button “+” > Other macros
4. Search for “Progress Bar Advanced” in the dialog box
5. Specify the steps and associate the current page with a specific one. The preview on the right hand side displays changes in real-time.
6. Click Save and update
7. The advanced bar macro will be displayed within your Confluence page.
You can edit the Advanced Progress Bar from both the edit and view modes.
**Edit mode:** Similar to the other macros we have covered, you can edit the Advanced Progress Bar by simply hovering over the macro and selecting “Edit”. You will land on the dialog box where you can change the parameters you have already set (Steps, and current step).
**View mode: **Within the view you can edit the entire progress bar or just a specific step. To edit the Advanced Progress Bar, click on the edit drop-down menu on the right of the progress bar. Here you can either edit the progress bar’s parameters (current step and color of the progress bar) or simply add a new step.
To edit a specific step, hover to the step in question and click the edit icon.
Here, you can:
- Change the step’s name and add a description
- Include a link to a specific Confluence page. Suggestions will appear while you are typing your page name. With the link added, simply click on a specific step, to access the given page.
## Percentage Progress Bar
1. Navigate to the page you want to edit
2. Click on Edit
3. Point to the position where you want to insert the percentage bar
4. Click on the Insert button “+” > Other macros
5. Search for “Percentage Progress Bar | Vectors” in the dialog box
6. Specify the percentage (From 0 to 100), add a brief description (Max 255 characters), the percentage bar width, color, and font size. You can visualize the changes simultaneously in the preview box.
7. Click Insert. The macro will be immediately displayed along with the parameters you have set.
8. Click Update to publish the page and visualize the percentage bar.
# Panels
The Panels macro allows you to create and include customizable messages within your Confluence pages. The macro is ideal for teams working on rich documents such as documentation.
1. Navigate to the page you want to edit
2. Click on Edit
3. Point to the position where you want to insert the panel
4. Click on the Insert button “+” > Other macros
5. Search for “Panels |Vectors” in the dialog box
6. Select the panel type: Customized, Warning, Infor, Error, or Tip.
> ⚠️ You can only specify the panel’s background color, font size and font color and icon when you select “Customized”. The other four options are available by default and you would not be able to customize them.
7. Click Insert. The macro will be displayed and you can start adding your content to the panel.
8. Click Update to visualize the panel.
# Buttons
The Button macro allows you to include customizable buttons with hyperlinks anywhere within a Confluence page.
1. Navigate to the page you want to edit
2. Click on Edit
3. Point to the position where you want to insert the button
4. Click on the Insert button “+” > Other macros
5. Search for “Button | Vectors” in the dialog box
6. Select the button’s title, insert a link (external or internal), background & font color and font size.
7. Click Insert. The macro will be displayed in edit mode and you can both edit or remove it.
8. Click Update to visualize the button.
# Footnote
With the Footnote macro, you can contextualize your content through references and comments displayed at the bottom of your Confluence pages.
1. Navigate to the page you want to edit
2. Click on Edit
3. Point to the position where you want to insert the footnote
4. Click on the Insert button “+” > Other macros
5. Search for “Footnote | Vectors” in the dialog box
6. Select the term and the definition. A preview showcases the changes as you make them.
7. Click Insert and Update the page.
8. The term you have entered will be marked with a number and at the bottom of the page, you will be able to visualize the reference.
# Tooltip
The Tooltip macro *(previously called “SP Infobulle”) *allows you to add a description to a specific term. It is displayed in the view mode when you do a mouseover on the term in question.
1. Navigate to the page you want to edit
2. Click on Edit
3. Click on the Insert button “+” > Other macros
4. Search for “Tooltip |Vectors” in the dialog box
5. Select the term, add a description and choose a background from the drop-down menu.
6. Click Insert and update the page. Once you are in the View Mode, just hover the mouse over the term you have selected to display the Infobulle.
# Expanders
The expander macro is designed to help you organize your content in clickable styled boxes. Similar to both Tabs and Navigation, expanders consist of two macros: Container and box. First, create an expander container, then fill it with one or multiple expander boxes.
## Expander Container
1. Navigate to the page you want to edit
2. Click on Edit
3. Select the area where you want to insert the expander container
4. Click on the Insert button “+” > Other macros
5. Search for “Expander Container | Vectors” in the dialog box
6. Select the box display theme: Cropped or expanded. Cropped is the default value.
7. Click Insert. The container will be displayed where you can start adding content and expander boxes.
## Expander Box
Once you have created the Expander Container, you can start filling it with boxes.
1. Navigate to the page you want to edit
2. Click on Edit
3. Select the Expander Container
4. Click on the Insert button “+” > Other macros
5. Search for “Expander Box |Vectors” in the dialog box
6. Specify the Box’s title, background color, font color, and size.
7. Click Insert. The box will appear within the container you have already created. Here, you can add rich content including text, images, and more.
8. Click update to visualize the box in View mode. You can crop or expand the content by simply clicking on the “Expand” button on the top right of the box.
# Notifications
The Notifications macro allows you to display notifications for a specific period of time. The placement and duration of the notifications are fully configurable by the user.
1. Navigate to the page you want to edit
2. Click on Edit
3. Click on the Insert button “+” > Other macros
4. Search for “Notification | Vectors” in the dialog box
5. Fill the form with the required parameters:
- Text
- Notification type: Success, Info, Warn, or Error
- Choose the notification’s position within the page
- Specify the duration (Time in seconds with 5 as default)
6. Click Insert. The macro will be displayed at the top of the page as specified earlier. You can always change its position by clicking on the macro and selecting Edit.
7. Click Update to save the changes. The notification will be displayed for 20 seconds as specified.
# Navigation
Navigation macros (horizontal and vertical) make Confluence pages easier to navigate and content simpler to locate and access. Similar to tabs, navigation consists of two macros: Navigation Groups and Navigation Items.
## Horizontal Navigation Group
1. Navigate to the page you want to edit
2. Click on “Edit”
3. Point to the position where you want to insert the Horizontal Navigation Group
4. Click on the Insert button “+” > Other macros
5. Search for “SP Horizontal Nav Group” in the dialog box
1. Choose the navigation group’s color and whether to apply outline CSS. You can visualize the changes in real-time within the preview box.
2. Click Insert. The navigation container will appear in which you can start adding navigation items.
## Horizontal Navigation Item
Now that you have created the horizontal navigation group, you can start filling it with navigation items.
1. Navigate to the page you want to edit
2. Click on “Edit”
3. Select the Horizontal Navigation Group where you want to insert items
4. Click on the Insert button “+” > Other macros
5. Search for “SP Horizontal Nav Item” in the dialog box
1. Insert the item’s name and choose an icon from the built-in library
1. Click insert. The navigation item will be displayed within the Horizontal Navigation Group as displayed below. You can start adding content within the body.
## Vertical Navigation Group
The process for Vertical Navigation Groups is more or less the same. First, create a navigation group and then fill it with items.
1. Navigate to the page you want to edit
2. Click on “Edit”
3. Point to the position where you want to insert the Vertical Navigation Group
4. Click on the Insert button “+” > Other macros
5. Search for “SP Vertical Nav Group” in the dialog box
1. Select the navigation groups’ color, border, and whether to apply outline CSS.
2. Click Insert. The navigation group will be immediately displayed on the page. To edit or remove the container just hover your mouse and select “Edit” or “Remove”.
## Vertical Navigation Item
Once you have created the Vertical Navigation Group, now it is time to start adding items.
1. Navigate to the page you want to edit
2. Click on “Edit”
3. Select the Vertical Navigation Group where you want to insert items
4. Click on the Insert button “+” > Other macros
5. Search for “SP Vertical Nav Item” in the dialog box
1. Select the item’s name, header (optional), and choose an icon from the built-in library. If a header is specified, the item will be started by the header. Click on it to display the item’s name.
1. Click Insert. The vertical navigation will be displayed. You can start filling the container with content.
