Buttons for the Confluence Dashboard - How do you do it?

Hello!
I like to use big buttons on the dashboard of our Confluence wiki for the most important pages.

I tried "Lozenge" from Adaptavist's ContentFormattingMacros but it does not fit my needs.

My solution at the moment is to work with HTML-Code (Input type button) in an HTML-Makro.

The styling is done via CSS inside the global CSS stylesheet of Confluence.

The icons are simply attached to a confluence page. It looks like this:

HTML Buttons CSS

An example of the content of the HTML-Makro für a NEWS-Button:

<input class="button1" type="button" style="background-image:url('/download/attachments/newsicon.png');" 
     value="News" onClick="self.location.href='/pages/viewpage.action?pageId=590954'">

The stylesheet code looks like this:

input.button1:hover { border: solid 2px #ff6600; }
input.button1:active { border: solid 4px #ff6600; }
input.button1{
    width: 265px;
    height: 70px;
    border: solid 1px #990099;
    border-radius: 5px;
    background-repeat:no-repeat;
    background-position:28px 11px;
    padding-left:100px;
    text-align: left;
    font-size: 1.8em;
    color: 990099;
    font-family: arial,sans-serif;"}

Do you use buttons in your Wiki? How do you do it? Do you see any improvements to my solution?

P.S.:
As it is very difficult to hand-code the buttons, I am looking for an option to use a user makro that simply asks for the needed Information (Picture-URL, Text, Destination-URL) and inserts the code into the page..

2 answers

1 accepted

Thank your for the suggestion to do this with a user makro. I never wrote one before.
But now I improved the insertion of a button by a user makro.

Thats how I do it now:

1. CSS is the same like above:

input.button1:hover { border: solid 2px #ff6600; }
input.button1:active { border: solid 4px #ff6600; }
input.button1{
    width: 265px;
    height: 70px;
    border: solid 1px #990099;
    border-radius: 5px;
    background-repeat:no-repeat;
    background-position:28px 11px;
    padding-left:100px;
    text-align: left;
    font-size: 1.8em;
    color: 990099;
    font-family: arial,sans-serif;"}

2. The User makro:

## @param 0:title=Image-URL|type=string|desc=Insert URL like www.example.com/Picture1.jpg
## @param 1:title=ButtonLabelingLine1|type=string|desc=Obere Zeile
## @param 2:title=ButtonLabelingLine2|type=string|desc=Untere Zeile
## @param 3:title=destination|type=string|desc=Insert URL like www.google.com


<input class="button1" type="button" style="background-image:url('$param0');"
     value="$param1
$param2" onClick="self.location.href='$param3'">

## Macro has a body: No

Now I can simply copy/paste the URLs into the empty fields.

I also thought about giving a search option for confluence pages ( via $content ...) but I also want to link to external pages, so I skipped this.

Hello MJP,

we needed a way to give our users the possibility to create a blog post with specified labels with one click. To do that, I created a user macro that displays a button with a link.

User macro code:

[...]## Insert the button/link.
<span class="e2e-bpButton">
<a href='$wikibaseurl/pages/createblogpost.action?spaceKey=$space.key&labelsString=${addLabelsString}'>$paramLinkText</a>
</span>

CSS:

.e2e-bpButton a:link,  
.e2e-bpButton a:hover,  
.e2e-bpButton a:visited  { color: white; font-weight: bold; text-align: center; border-style: solid; border-color: darkgrey; border-width: 1px; border-radius: 2px; padding: 9px 10px; background-color: darkgrey;                             background: -webkit-gradient(linear, left top, left bottom, from(darkgrey), to(lightgrey)); background: -moz-linear-gradient(top, darkgrey, lightgrey); }  
.e2e-bpButton a:active   { color: white; font-weight: bold; text-align: center; border-style: solid; border-color: lightgrey; border-width: 1px; border-radius: 2px; padding: 9px 10px; background-color: lightgrey;  background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(darkgrey)); background: -moz-linear-gradient(top, darkgrey, lightgrey); }  
p.e2e-bpButton             { margin-bottom: 20px; margin-top: 20px; }  
span.e2e-bpButton        { margin-right: 10px; }

You certainly could add an image to that.

Greetings,
Kirstin

Sorry for the CSS being so messy :).

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Apr 13, 2018 in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

2,894 views 27 12
Join discussion

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you