Custom Button Macro

[Deleted user]

I use Confluence Server 6.9 and wanted a button that I could colorize and left, center, or right align it within a Confluence page.  I also wanted to use it to open pages in the same tab/window or a new tab/window.  The only current issue with this is when you export the page as a PDF for instance, it does not make the button a link.  It only makes it a picture.  These are the main configurations for my custom button user macro:

1.  Categories:  "Navigation"

2. Definition of User Macro:  No macro body

3. Icon:

4. Button Macro Template:

## Macro title: Button
## Macro has a body: N
## Body processing: no macro body
## Output: Selected output option
##
## Developed by: Tim Braxton
## Date created: 05/25/2018
## Installed by: Tim Braxton
## This is a button macro.
## @Param Link:title=Link|type=string|default=https://community.atlassian.com|required=true|desc=Enter your hyperlink.
## @Param BtnText:title=Button Text|type=string|default=Click
Me|required=true|desc=Enter your button's text.
## @Param OpenNewTab:title=Open in New Tab/ Window?
|type=enum|enumValues=_blank,_self|default=_blank|required=true|desc="
_blank" = Open link in new tab/window. "_self" = Open link in same tab
/window.
## @Param Position:title=Button Alignment|type=enum|enumValues=Left,Center,
Right|default=Center|required=true|desc=Select how you would like the
button aligned.
## @Param ButtonBackColor:title=Button Background
Color|type=string|default=#245491|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
## @Param ButtonFontColor:title=Button Font
Color|type=string|default=#ffffff|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
## @Param ButtonBackColorHover:title=Button Background on Hover
Color|type=string|default=#c2d7f2|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
## @Param ButtonFontColorHover:title=Button Font Color
Hover|type=string|default=#292929|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
#if ( $paramPosition == "Left" )
#set ( $CSSPostion = "display:block;margin-right:auto;" )
#elseif ( $paramPosition == "Center" )
#set ( $CSSPostion = "display:block;margin-left:auto;margin-right:auto;" )
#elseif ( $paramPosition == "Right" )
#set ( $CSSPostion = "display:block;margin-left:auto;" )
#end
<style>
.${paramPosition}button {
$CSSPostion
margin-top: 5px;
background-color: $paramButtonBackColor;
border: none;
color: $paramButtonFontColor;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.${paramPosition}button:hover {
background-color: $paramButtonBackColorHover;
color: $paramButtonFontColorHover;
}
</style>
<button class="${paramPosition}button" onclick="window.open('$paramLink',
'$paramOpenNewTab');">$paramBtnText</button>

[Fabienne Gerhard]

@Raduz this is awesome - I love it! 😍

[Raduz]

Hi all,

I just edited the macro above to be able to use it (there were some extra gaps). I also edited it a bit and make the button similar to the Confluence original button.

So here it is:

## Macro title: Customizable button
## Macro has a body: N
## Body processing: no macro body
## Output: Selected output option
##
## Developed by: Tim Braxton
## Edited by: Raduz Sedlar
## Date created: 05/25/2018
## Date edited: 06/16/2020
## Installed by: Tim Braxton
## This is a customizable button macro.
## @Param Link:title=Link|type=string|default=https://community.atlassian.com/|required=true|desc=Enter your hyperlink.
## @Param BtnText:title=Button Text|type=string|default=Click Me|required=true|desc=Enter your button's text.
## @Param OpenNewTab:title=Open in New Tab/ Window?|type=enum|enumValues=_blank,_self|default=_blank|required=true|desc="_blank" = Open link in new tab/window. "_self" = Open link in same tab/window.
## @Param Position:title=Button Alignment|type=enum|enumValues=Left,Center,Right|default=Center|required=true|desc=Select how you would like the button aligned.
## @Param ButtonBackColor:title=Button Background Color|type=string|default=#0052CC|required=true
## @Param ButtonFontColor:title=Button Font Color|type=string|default=#ffffff|required=true
## @Param ButtonBackColorHover:title=Button Background on Hover Color|type=string|default=#0065FF|required=true
## @Param ButtonFontColorHover:title=Button Font Color Hover|type=string|default=#ffffff|required=true|desc=Enter a name, hex code, rgb value, or hsl value found at <a href="https://www.w3schools.com/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:</p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
#if ( $paramPosition == "Left" )
#set ( $CSSPostion = "display:block;margin-right:auto;" )
#elseif ( $paramPosition == "Center" )
#set ( $CSSPostion = "display:block;margin-left:auto;margin-right:auto;" )
#elseif ( $paramPosition == "Right" )
#set ( $CSSPostion = "display:block;margin-left:auto;" )
#end

<style>
.${paramPosition}button {
$CSSPostion
margin-top: 5px;
background-color: $paramButtonBackColor;
border: none;
border-radius: 3px;
color: $paramButtonFontColor;
padding: 7px 9px;
text-align: center;
font-size: 14px;
font-weight: 600;
font-family: Segoe UI;
cursor: pointer;
}
.${paramPosition}button:hover {
background-color: $paramButtonBackColorHover;
color: $paramButtonFontColorHover;
}
</style>

<button class="${paramPosition}button" onclick="window.open('$paramLink','$paramOpenNewTab');">$paramBtnText</button>

[Fabienne Gerhard]

I really really love this costum button - but now I've got a problem. Or maybe it's just because you're not supposed to do like this....

If you use 2 or more different buttons on one page -> only the last style you entered is used for alle buttons on the whole page. First I was like - what did I wrong but .Centerbutton {} will only be written once and only the last one - all others are overwritten (I used Center position...)

Any chance that there is a fast way to fix this? I have no idea... 😌

[Fabienne Gerhard]

Great thanks @Raduz  - I will give it a try 👏🏻

[Mark Stephan]

I wasn't able to get this to work on Confluence Server. 

[Fabienne Gerhard]

Hi @[deleted]

thanks for sharing - definitly gonna use it. Would love to have those coding skills!