It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Custom Button Macro Edited

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:

Button_Macro_Example.png

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>

2 comments

Hi @Timothy Braxton

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

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

Comment

Log in or Sign up to comment
TAGS
Community showcase
Posted in Confluence

How is your team having fun and bonding, remotely, utilizing Confluence?

Thanks everyone for answering last week’s question. The winner of the random drawing from those who commented is: @LarryBrock I’ll contact you separately with your prize details. This wee...

302 views 9 7
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you