Increase Icon size of af:panelSpringBoard using ADF Skin

ADF Faces af:panelSpringBoard component shows af:showDetailItem in a fancy view using icons as the notation of showDetailItem

From Oracle Docs

The panelSpringboard control can be used to display a group of contents that belongs to a showDetailItem. An icon strip with icons representing the showDetailItem children along with the item's contents are displayed when in strip mode, and a grid of icons with no contents shown is displayed in grid mode. When the user selects an icon while the panelSpringboard is in strip mode, the panelSpringboard discloses the associated showDetailItem. When the user selects an icon while the panelSpringboard is in grid mode, this automatically causes the panelSpringboard to display in strip mode. Typically you would put one or more showDetailItem components inside of the panelSpringboard but you may also alternatively place a facetRef, group, iterator, or switcher inside of the panelSpringboard as long as these wrappers provide showDetailItem components as a result of their execution

I have added a panel springboard on the page and by default, it looks like this

and this is the XML source of panel springboard

 <af:panelSpringboard id="ps1" displayMode="grid">
                    <af:showDetailItem text="First Item" id="sdi1" icon="#{resource['images:m1.png']}" badge="10"/>
                    <af:showDetailItem text="Second Item" id="sdi2" icon="#{resource['images:m2.png']}" badge="20"/>
                </af:panelSpringboard>

Now to increase the icon size of showDetailItem we need to use ADF Skin (CSS)

See-  How to create ADF Skin file and apply it to application

Use this CSS in ADF Skin file to increase the size of springboard icons and set the position of the badge and other attributes

/**Size of icons when springboard is in strip mode**/
af|panelSpringboard:strip af|panelSpringboard::item-icon-style {
    height: 60px;
    width: 60px;
}

/**Size of item (Icon holder) when springboard is in strip mode**/
af|panelSpringboard:strip af|panelSpringboard::items {
    height: 100px;
    width: 100px;
}

/**Size of item (Icon holder) when springboard is in grid mode**/
af|panelSpringboard:grid af|panelSpringboard::item-icon-style {
    height: 200px;
    width: 200px;
}

af|panelSpringboard::item {
    width: 200px;
}

/**To align item text with icon**/
af|panelSpringboard::item-text {
    position: static;
}

/**To Set Position of badge in grid mode**/
af|panelSpringboard:grid af|panelSpringboard::badge {
    position: absolute;
    margin-left: 70px;
    margin-top: 30px;
}

/**To Set Position of badge in strip mode**/
af|panelSpringboard:strip af|panelSpringboard::badge {
    position: absolute;
    margin-left: 60px;
    margin-top: 0px;
}

and output is

Cheers :) Happy Learning