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

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