- Created by Robert Reiner on 28. Dec 2017
You are viewing an old version of this page. View the current version.
Compare with Current View Page History
Version 1 Next »
projectdoc Toolbox
Short Description | Describes the classes to define to format the main index. |
---|---|
Iteration | Finished |
Content
Assume an index contains h2
, ul
, and link elements.
The following CSS statements format the main index for a container with a class attribute value of projectdoc-topic-main-index
.
/* Headings */ .projectdoc-topic-main-index h2 { color: #FFA62F; margin-top: 10px; font-size: 12pt; } div.hasIdOrTags.projectdoc-topic-main-index { opacity: 1.0; } /* Lists */ .projectdoc-topic-main-index ul { color: #3B73AF; margin-top: 0px; margin-bottom: 9px; } /* Links */ .projectdoc-topic-main-index a:link, .projectdoc-topic-main-index a:visited { color: #3B73AF; } .projectdoc-topic-main-index a:hover { color: #F87217; } .projectdoc-topic-main-index a:active { color: #C35817; }
Add these statements to the space stylesheet:
The result for the example above:
On the other hand it is now (as of projectdoc Toolbox 2.0.0) possible to style the section more easily than defining your own CSS classes:
We predefined some CSS classes to support rounded boxes and different colors.
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
e.g.:
- projectdoc-section-box
- projectdoc-h-White
- projectdoc-c-DarkBlue
- projectdoc-bg-Darkorange
set as macro property value of "CSS Classes"
is rendering to:
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.
Here is a list of all supported HTML color names for the CSS templates:
AliceBlue AntiqueWhite Aqua Beige Black BlanchedAlmond Blue BlueViolet Brown BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow
Transcluded By
Name | Short Description | Doctype |
---|---|---|
Content Marker Macro | Marks a piece of content within a document. This content can be referenced for transclusion. | app-macro |
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. | app-macro |
- No labels