Branding the Web Console

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
// This value is used as the Window/Page title together with the
// title of the respective 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.brand.name

Apache Felix Web Console

getBrandName()

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

https://svn.apache.org/repos/asf/sling/trunk/bundles/extensions/webconsolebranding/src/main/resources/META-INF/webconsole.properties?view=markup]

Branding the Stylesheet

Branding the CSS Stylesheet is basically possible with the BrandingPlugin.getMainStyleSheet() method. The default value of the DefaultBrandingPlugin points to webconsole.css. This allows styling the main content structure as shown here:

<body>
    <div id="main">

        <!-- Lead -->
        <div id="lead">
            <h1>
                Bundle Name
                <br>
                Page Title
            </h1>
            <p>
                <a target="_blank" href="productURL" title="productName">
                    <img src="productImage" border="0"/>
                </a>
            </p>
        </div>

        <!-- Top Navigation -->
        <div id="technav">
            <!-- regular link -->
            <a href="">title</a>
            <!-- label of current page -->
            <span class="technavat">title</span>
            <!-- label of current page if drawing as link -->
            <a href="" class="technavat">title</a>
        </div>

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

Predefined plugins use other styles defined by further CSS styles contained in the web console bundle.

It is yet unclear how these plugins can be styled…​.