projectdoc Toolbox

Colored sections or boxes – like the Confluence panel macro – support authors to emphasize their content.

Audience: Author, Template Author, Documentation Architect
Type: Tip
Level of Experience: Novice
Expected Duration: 5 min

Using the Section Macro or Content Marker Macro of the projectdoc Toolbox with version 2.0 it is possible to style the section more easily than defining your own CSS classes (see parameter CSS Classes of the Section Macro).

The projectdoc Toolbox provides a set of predefined CSS classes to support rounded boxes with colors easily.

Using the CSS class projectdoc-section-box the following styles are applied:

.projectdoc-section-box {
    border-radius: 25px;
    padding: 20px;
    margin-bottom: 5px;
    margin-top: 25px;
}

Now in conjunction with three templates for CSS classes colored boxes can be rendered:

heading font color: projectdoc-h-COLORNAME
content font color: projectdoc-c-COLORNAME
background color: projectdoc-bg-COLORNAME

Example

Here is a short example to show how to add a section and configure it to render the section as a box.

Assume to render a section using the Section Macro rendered like this:

Example of a colored section

This is an example of a colored section.

This is an example of a colored section.
This is an example of a colored section.

Use the section macro, add title and body:

Now simply add the following classes to as value to the "CSS Classes" parameter of the Section Macro:

projectdoc-section-box
projectdoc-h-White
projectdoc-c-DarkBlue
projectdoc-bg-Darkorange

In the macro editor these values are added like this:

The CSS class names are separated by whitespace (a single space).

Resources

Selection Boxes on ad-hoc Doctypes: Define a doctype on document instances to select from its set of values.
Section Macro: Renders a section, if the body is not empty. Supports authors to create content, clutter-free rendering without empty sections. Allows to transclude the content.
Content Marker Macro: Marks a piece of content within a document. This content can be referenced for transclusion.
CSS Styles: Lists CSS selectors provided by the projectdoc Toolbox to apply styles.
Caution Box Macro: Renders a box containing a caution message.
Deprecated Box Macro: Renders a box containing a deprecation warning for the reader.
Example Box Macro: Renders an example within a box.
Fault Box Macro: Renders a box containing a fault message reported by a team member for the author.
Feedback Box Macro: Renders a box containing a feedback message from a reader with write privilege.
Generic Box Macro: Generic boxes help to easily define one's own boxes to apply certain CSS styles to them.
Info Box Macro: Renders a box containing an info message.
Note Box Macro: Renders something to note by the reader.
Pending Box Macro: Renders a box containing a pending message to be handled later by the author.
Question Box Macro: Renders a box containing an open question.
References Box Macro: Renders a box with references to further information.
Tip Box Macro: Renders a box with a tip for the reader.
Version Box Macro: Renders information related to a version.

Space shortcuts

Page tree

Docs

Support

Free Blueprints

Tooling for Blueprints

Free Extensions

Spaces

Plugins for Maven

Incubator

Libraries for Java

Incubator

Add-ons for Confluence

Tools

Support

Team

Legal

Example

Example of a colored section

Resources

About

Keep up-to-date!

Powered by