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

[MJP]

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:

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

[MJP · Accepted solution]

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.


[Kirstin Seidel-Gebert]

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

[Kirstin Seidel-Gebert]

Sorry for the CSS being so messy :).