Branding the Web Console

Branding support is currently work in progress tracked by FELIX-1015.

Branding the Web Consle mainly concerns hooking into the looks of the Web Console providing vendor-provided setup like CSS, Logo, Main Title, Vendor URL, etc.

BrandingPlugin and DefaultBrandingPlugin

Branding for the Web Console can be provided in two ways: By registering a BrandingPlugin service or by providing a branding properties files. The Web Console uses the branding from the BrandingPlugin service registered with the highest ranking.

The BrandingPlugin interface provides the following information used for branding:

// Returns an indicative name of the branding plugin
String getBrandName();

// Returns the name of the product in which the web console is contained
// and to which the web console is branded.
String getProductName();

// Returns an (absolute) URL to a web site representing the product to
// which the web console is branded.
String getProductURL();

// Returns an absolute path to an image to be rendered as the logo of the
// branding product.
String getProductImage();

// Returns the name of the branding product vendor.
String getVendorName();

// Returns an (absolute) URL to the web site of the branding product
// vendor.
String getVendorURL();

// Returns an absolute path to an image to be rendered as the logo of the
// branding product vendor.
String getVendorImage();

// Returns the absolute path to an icon to be used as the web console
// "favicon".
String getFavIcon();

// Returns the absolute path to a CSS file to be used as the main CSS for
// the basic admin site.
String getMainStyleSheet();

If no BrandingPlugin service is registered, the DefaultBrandingPlugin is used.

The DefaultBrandingPlugin reads the /META-INF/webconsole.properties from the web console bundle to setup the branding using the following properties:

Property Name	Default Value	`BrandingPlugin` method name
`webconsole.product.name`	Apache Felix	`getProductName()`
`webconsole.product.url`	http://felix.apache.org	`getProductURL()`
`webconsole.product.image`	/res/imgs/logo.png	`getProductImage()`
`webconsole.vendor.name`	The Apache Software Foundation	`getVendorName()`
`webconsole.vendor.url`	http://www.apache.org	`getVendorURL()`
`webconsole.vendor.image`	/res/imgs/logo.png	`getVendorImage()`
`webconsole.favicon`	/res/imgs/favicon.ico	`getFavIcon()`
`webconsole.stylesheet`	/res/ui/webconsole.css	`getMainStyleSheet()`

Note: The /META-INF/webconsole.properties file is not contained in the Apache Felix Web Console bundle itself. It may be provided by a Fragment Bundle attaching to the Apache Felix Web Console bundle. For an example of such a fragment bundle see prototype Sling Web Console Branding Bundle with its webconsole.properties

Branding the Stylesheet

Branding the CSS Stylesheet is basically possible with the BrandingPlugin.getMainStyleSheet() method.

<!-- general structure of a web console page -->

<body>

    <div id="main">

        <!-- Lead -->
        <div id="lead">
            <h1>
                Bundle Name
                <br>            <!-- br probably sub-optimal -->
                Page Title
            </h1>
            <p>                 <!-- is p a good thing ?? -->
                <a target="_blank" href=" + getProductURL() + "\" title=\""+getProductName() + "\">
                    <img src=\"{2}" + getProductImage() + "\" border=\"0\"/>
                </a>
            </p>
        </div>

        <!-- Top Navigation -->
        <div id="technav">
            <!-- this should probably be an <ul> list -->
            <!-- nobr should be white-space:nowrap -->
            <!-- regular link -->
            <nobr><a href="">title</a></nobr>
            <!-- label of current page -->
            <nobr><span class="technavat">title</span></nobr>
            <!-- label of current page if drawing as link -->
            <nobr><a href="" class="technavat">title</a></nobr>
        </div>

        <!-- this should be inside a div ... -->
        <div id="content">
            <!-- here comes the content -->
        </div>

    </div>

</body>