Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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
Highlighted

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>

3 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. 

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>

Like Fabienne Gerhard likes this

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

@Raduz this is awesome - I love it! 😍

Like Raduz likes this

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... 😌

Comment

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

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

463 views 24 9
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