If you have read previous Look&Feel tricks, you know that Confluence appearance is way more flexible than it seems to be. In this post we’re going to explore how the Atlassian User Interface (AUI) library can help with improving Confluence usability.
AUI allows you to do a lot of things, but for now we will focus on buttons. Buttons are a cool way to make links more visible on Confluence pages. Atlassian doesn’t recommend to use buttons as links, however, as we will see further, sometimes you can deviate from this rule.
Let’s see an example of how buttons can be used. On the home page of our Documentation Confluence we have several icons of our products. We wanted to place a link that would take users to the support request form in case they don’t know how to proceed or need more information.
Since we wanted to make this link easier to find on the page, we thought it would make sense to put a button, because, first it would be easier to find the link on the page. And second, the button would be in line with the product icons.
So, how exactly can you place a button? We created a user macro called aui-button in Confluence Admin – User Macros with the following code:
## Macro title: AUI Button ## Macro has a body: N ## @param Title:title=Title|type=string|required=true ## @param URL:title=URL|type=string|required=true <a href="$paramURL"> <button class="aui-button aui-button-primary"> $paramTitle </button> </a>
Then we saved the macro and made sure it appeared in the macro list.
Our macro is now available in the macro browser (Insert More Content – Other Macros), so we can insert it to any page and set its name and URL.
If you want to test your ideas without making a mess of your production system, have a look at AUI Sandbox where you can see sample code for other kinds of buttons (for example, drop-down button) and play around with it.
For example, to add a small question mark icon to the Get Help button, it’s enough to take the default code for the icon button and replace the default code with the following:
<button class="aui-button"> <span class="aui-icon aui-icon-small aui-iconfont-help"> Help </span> <span> Icon button </span> </button>
You can immediately see the result of your experiments in the Preview pane in Sandbox: