Icon Grid - VLab Showcase

 

- Description -

- When To -

- How To -

Navigation: Icon Grid

To the right is an example of an Icon Grid navigation method that represents the Page structure of this Showcase Community.  It is a piece if Web Content, with rather specific structure and requirements.  It uses a sprite image, though a sprite image is not required in order to construct an Icon Grid.  The User Guide section (referenced at the bottom of this page) has more detailed steps that explain how to do this, but some of the highlights are:

  • Obtain or create icons for each element you want in your navigation structure.  (These can represent Pages or any other level of structure in your Community.)
  • Construct the sprite image and obtain its CSS definitions.
  • Place the CSS elements in a properly formatted html table.

See the HTML Web Content that was used for this example, below.

Navigation Communication Content
Look & Feel Technical Spotlight
   
  Discussions  

Icon Grid html

<style type="text/css">:root {
  --icon-grid-margin: 15px;
  --icon-grid-dim: 170px;
  --icon-grid-txt-padding: 30px;
}
#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite {
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-repeat: no-repeat;
    display: block;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-communication_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -5px -5px;
    text-align: center;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-content_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -185px -5px;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-discussion_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -5px -185px;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-look_n_feel_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -185px -185px;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-navigation_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -365px -5px;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-spotlight_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -365px -185px;
}

#portlet_com_liferay_journal_content_web_portlet_JournalContentPortlet_INSTANCE_NDo3UIOeR46n .sprite-technical_mod {
    display: block;
    width: var(--icon-grid-dim);
    height: var(--icon-grid-dim);
    margin: var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin) var(--icon-grid-margin);
    background-image: url(https://vlab.noaa.gov/documents/3593159/0/spritesheet.png/5fb69727-d70d-cea8-bcbc-1ec7cfc761be?t=1550000301701);
    background-position: -5px -365px;
}
</style>
<table align="center" cellpadding="5" cellspacing="5">
    <tbody>
        <tr>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-navigation_mod" href="https://vlab.noaa.gov/web/vlab-showcase/navigation" target="_self">&nbsp;</a></div>
            </td>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-communication_mod" href="https://vlab.noaa.gov/web/vlab-showcase/communication" target="_self">&nbsp;</a></div>
            </td>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-content_mod" href="https://vlab.noaa.gov/web/vlab-showcase/content" target="_self">&nbsp;</a></div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/navigation" target="_self">Navigation</a></td>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/communication" target="_self">Communication</a></td>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/content" target="_self">Content</a></td>
        </tr>
        <tr>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-look_n_feel_mod" href="https://vlab.noaa.gov/web/vlab-showcase/look-n-feel" target="_self">&nbsp;</a></div>
            </td>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-technical_mod" href="https://vlab.noaa.gov/web/vlab-showcase/technical" target="_self">&nbsp;</a></div>
            </td>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-spotlight_mod" href="https://vlab.noaa.gov/web/vlab-showcase/spotlight" target="_self">&nbsp;</a></div>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/look-n-feel" target="_self">Look &amp; Feel</a></td>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/technical" target="_self">Technical</a></td>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/spotlight" target="_self">Spotlight</a></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td style="text-align: center;">
            <div align="center"><a class="sprite-discussion_mod" href="https://vlab.noaa.gov/web/vlab-showcase/discussions" target="_self">&nbsp;</a></div>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td style="text-align: center; padding-bottom: var(--icon-grid-txt-padding);"><a href="https://vlab.noaa.gov/web/vlab-showcase/discussions" target="_self">Discussions</a></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

 

What is Icon Grid Navigation?

An Icon Grid is a graphical way to navigate a categorical data structure.  In VLab, these categories are usually "pages".  Such a grid is often seen as intuitive and visually appealing to users, thus is effective and popular.  Imagine the icons on your phone or the icons on your computer's desktop as great examples of Icon Grids.

What is it good for?

Icon Grids are good for landing pages and for when a community has a large number of "top level" pages - a number that the main navigation bar may not be able to handle well, due to space limitations.  (You don't really want your main nav bar to go beyond a single row.)

How Do I Use It?

In order to generate and use an Icon Grid in VLab, it is suggested that you generate an image sprite and use it in Web Content via CSS in an html table.  See the section in the VLab User's Guide here.