Page tree
Skip to end of metadata
Go to start of metadata

모서리가 둥근 사각형을 만들도록 하는 매크로

버전 히스토리

Version

Notes

Author

0.1

Initial release

~alainmoran

NB: Now part of Adaptavist's Content Formatting Macros

개요

This user macro allows you to create rounded rectangles for containing content

설치

  • You need to be a Confluence administrator with access to the Confluence server
  • Download the attached images and attach them to a page
  • Modify the path in the code below to point to the page you attached the images to
  • Go to Administration->User macros and add the code below as a user macro called roundrect
  • Modify your site css to contain the code below
Macro
 
## usage roundrect:title|footer|background color|width|height|corner size|corner color 

#set($globalHelper=$action.getGlobalHelper()) 
#set($renderer=$globalHelper.getWikiStyleRenderer()) 
#set($context=$content.toPageContext()) 

#set($title=$renderer.convertWikiToXHtml($context, $param0)) 
#set($footer=$renderer.convertWikiToXHtml($context, $param1)) 
#set($body=$renderer.convertWikiToXHtml($context, $body)) 

#set ($tableBackground="#a0a0a0") 
#set ($path="/download/attachments/6545/") 
#set ($prefix="${path}white") 
#set ($tableWidth="") 
#set ($cornerSize="25px") 
#set ($tableHeight="") 

#if ($param2) 
#set ($tableBackground=${param2}) 
#end 

#if ($param3) 
#set ($tableWidth="width='${param3}px'") 
#end 

#if ($param4) 
#set ($tableHeight="height='${param4}px'") 
#end 

#if ($param5) 
#set ($cornerSize="${param5}px") 
#end 

#if ($param6) 
#set ($prefix="/download/attachments/6545/${param6}") 
#end 

<div class="inline"> 
<table border="0" cellpadding="0" cellspacing="0" bgcolor="${tableBackground}" ${tableWidth} ${tableHeight}> 
<tr valign="top"> 
<td align="left" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-TopL.gif" width=${cornerSize} height=${cornerSize}></td> 
<td height="${cornerSize}" class="roundrect_title">${title}</td> 
<td align="right" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-TopR.gif" width=${cornerSize} height=${cornerSize}></td> 
</tr> 
<tr valign="top"> 
<td width="${cornerSize}">&nbsp;</td> 
<td class="roundrect_body">${body}</td> 
<td width="${cornerSize}">&nbsp;</td> 
</tr> 
<tr valign="bottom"> 
<td align="left" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-BtmL.gif" width=${cornerSize} height=${cornerSize}></td> 
<td height="${cornerSize}" class="roundrect_footer">${footer}</td> 
<td align="right" width="${cornerSize}" height="${cornerSize}"><img xsrc="${prefix}-BtmR.gif" width=${cornerSize} height=${cornerSize}></td> 
</tr> 
</table> 
</div> 
CSS
 
td.roundrect_title { 
text-align:left !important; 
vertical-align:top !important; 
padding-top:6px !important; 
} 

td.roundrect_body { 
text-align:left !important; 
vertical-align:top !important; 
} 

td.roundrect_footer { 
text-align:right !important; 
vertical-align:bottom !important; 
padding-bottom:6px !important; 
} 

사용법

 
{roundrect:title|footer|width|height|corner size|corner color}body text{roundrect} 

Because parameters are not named, you should ensure that all preceeding parameters are specified.

Parameter

Notes

Default

title

The title of the round rectangle (may contain wiki markup)

none

footer

The foter of the round rectangle (may contain wiki markup)

none

width

The outer width of the round rectangle

none (aka width of content)

height

The outer height of the round rectangle

none (aka height of content)

corner size

The radius of the corners (may get pixellated >100px)

25px

corner color

The prefix of the corner gif files

white

body text

The text/markup to be contained within the rounded rectangle

라이센스

This user macro is released under the BSD License - (c) 2005-2006 Adaptavist.com Limited

예제

 
{roundrect:My Title|}My Content{roundrect} 
{roundrect:My Other Title| |200|100|10}My Content{roundrect 

원문보기