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>
@Raduz this is awesome - I love it! 😍
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>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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... 😌
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Great thanks @Raduz - I will give it a try 👏🏻
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I wasn't able to get this to work on Confluence Server.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi @[deleted]
thanks for sharing - definitly gonna use it. Would love to have those coding skills!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.