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..
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&#13;&#10;$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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Sorry for the CSS being so messy :).
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.