projectdoc Toolbox

With the doctypeBorderImageServlet and some custom CSS it is possible to render a border image that contains the doctype name of the currently displayed Confluence page.

Audience: Documentation Architect, Confluence Administrator, Documentation Gardener
Type: Tutorial
Since: 2.0

Using the servlet projectdoc/doctypeBorderImage.png it is possible to render a CSS border image for the HTML main content of a Confluence page.

This is very useful for some use cases because the doctype of a page can such be made is immediately clear for the reader.

This screenshot shows a grey border image for the Blank Document Doctype.

Servlet URL

The URL of the Servlet is:

{confluence-base-URL}/plugins/servlet/projectdoc/doctypeBorderImage.png.

Query Parameter

Parameter	Value	Explanation
doctype	String	The name of the Doctype whose name shall be rendered. When the length of the name (taking into account the size of the font) is greater than the height of the image the name will be shortened.
text	String	Alternatively to the doctype a plain text can be set. When text and doctype are set the doctype has precedence. When the length of the text (taking into account the size of the font) is greater than the height of the image the text will be shortened. Defaults to 'none'.
width	int	The width of the image: 0<width<4096. Defaults to 30.
height	int	The height of the image: 0<height<2160. Defaults to 266.
fontSize	int	The size of the font. As of now only the size can be set. The font itsself can not be changed from Arial bold. Defaults to 18.
fontColor	String	The hex color code of the selected color (Web colors - Wikipedia(six digit value)). The prefix (0x) can be omitted e.g. for white use ffffff of 0xffffff and for black use 000000 or 0x000000. Defaults to black (0x000000) when omitted.
backgroundColor	String	The hex color code of the selected color (Web colors - Wikipedia(six digit value)). The prefix (0x) can be omitted e.g. for white use ffffff of 0xffffff and for black use 000000 or 0x000000. Defaults to dark grey (0xaaaaaa) when omitted.

Examples

All examples start with the URL-prefix:

{confluence-base-URL}/plugins/servlet/projectdoc/

e.g. doctypeBorderImage.png resolves to {confluence-base-URL}/plugins/servlet/projectdoc/doctypeBorderImage.png

URL

Result

doctypeBorderImage.png

doctypeBorderImage.png?doctype=blank

doctypeBorderImage.png?doctype=blank&width=50&height=30

doctypeBorderImage.png?doctype=blank&width=50&height=300&fontColor=ff00ff&backgroundColor=00ff00

How to CSS style the Border of a Page

CSS-styling the border is now pretty easy.

Prepare a CSS-Snippet for each doctype

Prepare a css snippet for each doctype you want to have a border image using the following template:

<style>
body.projectdoc-doctype-{DOCTYPE} #main
{
  border-image: url('/{CONTEXT-PATH}/plugins/servlet/projectdoc/doctypeBorderImage.png?doctype={DOCTYPE}&{YOUR_QUERY_PARAMS}') 0 0 0 30 round;
  border-style: inset;
  border-left-width: 30px;
}
...
...
<style>

Example snippet for the blank Doctype:

<style>
body.projectdoc-doctype-blank #main
{
  border-image: url('/confluence/plugins/servlet/projectdoc/doctypeBorderImage.png?doctype=blank&height=266') 0 0 0 30 round;
  border-style: inset;
  border-left-width: 30px;
}
</style>

Navigate to the Confluence Admin Pages

Navigate to the Admin Pages by opening the Confluence General configuration: