Sentry Maven Skin 6.4.01
-
Home
- User Documentation Features 14
Styling
The Sentry Maven Skin's look and feel can be easily customized for your documentation with a simple configuration setting, or a few CSS properties.
Basic Themes
By default, the Sentry Maven Skin comes in nice shades of blue, featuring Raleway and Lato elegant fonts. Using the <bodyClass> property under <custom> in src/site/site.xml, you can specify a different color scheme:
<bodyClass> |
Screenshot |
|---|---|
sentry-blue |
|
sentry-green |
|
sentry-orange |
|
sentry-purple |
|
Example of site.xml:
<project>
...
<custom>
<bodyClass>sentry-orange</bodyClass>
...
</custom>
How CSS customization works
Create a src/site/resources/css/site.css file in your project. This CSS will be loaded with your documentation and that will override the CSS that ships by default with the skin.
In this site.css, you will redefine the value of a few CSS variables[1] on the <body> element for colors, and on the :root element for the fonts.
Colors
You will mainly set 7 CSS variables to modify the colors of the skin for your documentation:
| CSS Variable | Description |
|---|---|
--banner-bgcolor |
Main theme color, used in the title banner background. |
--banner-fgcolor |
Text color in the title banner. Must provide enough contrast with banner-bgcolor for accessibility. |
--main-bgcolor |
Main content background color (usually white). |
--main-fgcolor |
Main content text color (usually black). |
--alternate-bgcolor |
Alternate background color for highlighting content (typically a shade of var(--banner-bgcolor)). |
--alternate-fgcolor |
Alternate foreground color for highlighted content (typically white or a shade of var(--banner-fgcolor)). |
--link-color |
Color for the links (usually something blue). |
/* We're only customizing the title banner background color and the links */
body {
--banner-bgcolor: #266fd0;
--alternate-bgcolor: var(--banner-bgcolor);
--alternate-fgcolor: var(--banner-fgcolor);
--link-color: #d50c37;
}
Colors default values
Default values for all customizable colors are (variable names are self-explanatory):
body {
--banner-bgcolor: #3399ff;
--banner-fgcolor: #fff;
--main-bgcolor: #fff;
--main-fgcolor: #000;
--alternate-bgcolor: #c0defd;
--alternate-fgcolor: #013e7a;
--link-color: #266eb7;;
--success-bg: #d6e9c6;
--success-fg: #32661c;
--info-bg: #bce8f1;
--info-fg: #0e5172;
--warning-bg: #faebcc;
--warning-fg: #7f6c08;
--danger-bg: #ebccd1;
--danger-fg: #680c0c;
}
Dark colors
When the user is displaying your documentation using a dark colors scheme, the dark class is added to the <body> element, so you can customize the colors to use when in dark mode with the body.dark CSS selector:
/* Default colors in light mode */
body {
--banner-bgcolor: #266fd0;
--alternate-bgcolor: var(--banner-bgcolor);
--alternate-fgcolor: var(--banner-fgcolor);
--link-color: #d50c37;
}
/* Use a lighter red when in dark mode */
body.dark {
--link-color: #ff6989;
}
Default values for colors in dark are:
body.dark {
--main-bgcolor: #343434;
--main-fgcolor: #fff;
--link-color: #81cbf7;
--success-bg: #32661c;
--success-fg: #d6e9c6;
--info-bg: #0e5172;
--info-fg: #bce8f1;
--warning-bg: #7f6c08;
--warning-fg: #faebcc;
--danger-bg: #680c0c;
--danger-fg: #ebccd1;
}
Fonts
3 main font families are used by the Sentry Maven Skin, which can be customized with the below CSS variables defined on the :root pseudo-element:
| CSS Variable | Description | Default |
|---|---|---|
--title-font |
Mainly used for the project title in the banner and the document title. | Raleway |
--heading-font |
Used for headings in the document, and header and footer. | Raleway |
--content-font |
Used in the main content of your documentation, everywhere else. | Lato |
--content-font-size |
Associated default font size for the main content. | 15px |
Each of these variables can specify several alternate fonts[2] if the first one is not available on the reader's system.
Example of site.css:
:root {
--title-font: "Gill Sans", sans-serif;
--heading-font: system-ui;
--content-font: Georgia, serif;
--content-font-size: medium;
}
All fonts customizable properties
Actually, the font family, size, weight and style can all be customized with CSS variables defined on the :root element. The HTML page is split in 6 main sections with separate settings:
top-...for the very top headerbanner-...for the colorful banner with the project titleleft-...for the navigation menu on the leftmain-title-...for the document titlecontent-...for the content default propertiesbottom-...for the page footer
The default values for all fonts properties are:
:root {
--content-font: 'Lato', sans-serif;
--content-font-size: 15px;
--title-font: 'Raleway', sans-serif;
--heading-font: 'Raleway', sans-serif;
--top-font: var(--heading-font);
--top-font-size: small;
--top-font-weight: normal;
--top-font-style: normal;
--left-title-font: var(--title-font);
--left-title-font-size: var(--content-font-size);
--left-title-font-weight: var(--main-title-font-weight);
--left-title-font-style: var(--main-title-font-style);
--left-font: var(--content-font);
--left-font-size: var(--content-font-size);
--left-font-weight: normal;
--left-font-style: normal;
--banner-font: var(--title-font);
--banner-font-size: xx-large;
--banner-font-weight: bold;
--banner-font-style: normal;
--main-title-font: var(--title-font);
--main-title-font-size: 40px;
--main-title-font-weight: bold;
--main-title-font-style: normal;
--h2-font-size: xx-large;
--h2-font-weight: bold;
--h2-font-style: normal;
--h3-font-size: x-large;
--h3-font-weight: normal;
--h3-font-style: normal;
--h4-font-size: large;
--h4-font-weight: normal;
--h4-font-style: italic;
/* Bottom same as top */
--bottom-font: var(--top-font);
--bottom-font-size: var(--top-font-size);
--bottom-font-weight: var(--top-font-weight);
--bottom-font-style: var(--top-font-style);
}