InfoFacts: Spotlight

CSS Style Overview

  • infofacts_spotlight_univBlue
  • infofacts_ spotlight _medBlue
  • infofacts_ spotlight _lightBlue
  • infofacts_ spotlight _gray
  • infofacts_ spotlight _orange
  • infofacts_ spotlight _beige
  • infofacts_ spotlight _black
  • infofacts_ spotlight _white
  • infofacts_ spotlight _gradient

Lots of things to say

Spotlight was designed to be small round points of information that your page can use as a single UL or multiple UL's against a background.  Since they are sized to be small you want to limit the data to a small chunk of data with each having a hover effect.

OmniUpdate users just place a single bulleted list with the top being a piece of data and a second / bottom bullet being description about that data.  You can use multiple UL's in an editable zone and each will have additional margins to offset each spotlight from one another.

All UL's in the editable zone will be styled like this.

Code Example:

<ul>

<li> Data</li>

<li>Why this is important</li>

</ul>

CSS Style

infofacts_ spotlight _univBlue

 
  • 100%
  • what we try to give each day

CSS Style

infofacts_ spotlight _medBlue

 
  • 100%
  • what we try to give each day

CSS Style

infofacts_ spotlight _lightBlue

 
  • 100%
  • what we try to give each day

CSS STYLE

infofacts_ spotlight _gray

 
  • 100%
  • what we try to give each day

CSS STYLE

infofacts_ spotlight _orange

 
  • 100%
  • what we try to give each day

CSS STYLE

infofacts_ spotlight _beige

 
  • 100%
  • what we try to give each day

CSS STYLE

infofacts_ spotlight _black

 
  • 100%
  • what we try to give each day

CSS STYLE

infofacts_ spotlight _white

 
  • 100%
  • what we try to give each day

CSS Style

infofacts_ spotlight _gradient

 
  • 100%
  • what we try to give each day

Expanded Example:

infofacts_spotlight_univBlue

with custom background image.

 
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day
  • 100%
  • what we try to give each day