CustomizationGuide

Customization of jGrouseDoc output

Updated Feb 4, 2010 by denis.riabtchik

Navigation>>	Start	Next - FAQ	Previous - Tag Reference

Customization of jGrouseDoc output

Users can customize the output of jGrouseDoc in a number of ways (from simple to more sophisticated):

Add custom css file to standard theme
Create custom theme
Create custom skin.

As mentioned before, skin is an alternate method of rendering documentation while theme is a set of stylesheets and images that are being applied to certain skins.

Whenever jGrouseDoc produces the output for one of the standard skins, it inserts the following statements into the produced HTML:

  <head>
...
        <link rel="stylesheet" type="text/css" href="jgdoc.css">
        <link rel="stylesheet" type="text/css" href="theme.css">
...

The file jgdoc.css is provided by the skin itself and contains mostly information about layouts, etc. The file theme.css is provided by the theme and generally contains color scheme. Of course, these are just general guidelines, not strict rules.

Custom CSS file

You can specify which CSS file should be included into rendered documentation after the standard stylesheet. This is done by overriding the aux_css property in jgrousedoc.properties file (see Advanced Configuration section for details). The value of this property is a path to your own file, relative to the output directory of your documentation. For example, if you specify

aux_css=../../css/myCustomCSS.css

then the generated documentation would contain the following entries:

        <link rel="stylesheet" type="text/css" href="jgdoc.css">
        <link rel="stylesheet" type="text/css" href="theme.css">
        <link rel="stylesheet" type="text/css" href="../../css/myCustomCSS.css">

As a result, any definitions in the custom CSS file would override or enhance the ones that appear in standard stylesheets. For example, if you want to remove the logo in the noframes skin, you can put the following definition into your custom css:

.banner h1 a
{
	background:  none;
	margin: 0px;
	padding-left: 0px;
	display: block;
	height: 100%;
	color: black;
	text-decoration: none;
}

Note that jGrouseDoc would not copy your custom stylesheet to the specified location, this should be done by your own build script or manually.

Generally speaking, fair efforts have been made in order to ensure that almost all elements in produced documentation have meaningful classes. That gives you ability, for example, to specify that you want the whole section with Throws to have red background, you just need to put

.throws
{
   background: red
}

Custom theme

To create a custom theme, you need to:

Create a directory with ANT file build.xml in it
In that file put instructions to copy necessary resources (stylesheets, images, etc) into output directory. One of the resources must be copied into theme.css
Specify relative path to that directory from the jGrouseDocHome/themes directory in your jgrousedoc.properties file

Say, your directory layout looks like this:

You want to use your custom theme mytheme. The content of the build.xml in the mytheme folder could look like this:

<?xml version="1.0"?>

<project name="sample theme" default="applyJGrouseDoc">
    <target name="applyJGrouseDoc">
        <echo>Applying mytheme theme</echo>
        <copy todir="${outputDir}">
            <fileset dir="./mytheme/css" includes="*.css"></fileset>
        </copy>
    </target>
</project>

In order to use this theme you should add to your jgrousedoc.properties the following setting:

theme=../../myProject/mytheme

Custom skin

Coming soon...

Navigation>>	Start	Next - FAQ	Previous - Tag Reference

► Sign in to add a comment