Review the list of widgets

Internal Custom Built Widgets for JADU:
File updated on: Thursday, February 21, 2013
Widgets are designed elements which can be customized with text or images and placed on any
homepage by a content editor or webmaster in Jadu.

Blue Background Box Widget
o

Calendar Icon with EMS Connection
o

list the current month/day with images - link to ems – Messiah’s full calendar.
Caption Box
o

Provides a header text box and a body content text box. Insert images, links using the
text editor.
Similar to the Blue Quote Box. Has text field for caption. Graphics are stained glass
footer with dark blue background and white bold text in a smaller font. Can be used at
any width. Suggested use: video or photo caption.
Facebook Feed
o
Allows editor to add in and configure a Facebook feed of theirs or other Facebook
pages

Falcon Scoreboard

Google Translator
o
Add this widget to translate all non-images into a different language. The languages
available are based on which countries are visiting our site (according to Google
Analytics)

Header: Blue / Header: Green

Image Fader (on homepage)
o

slideshow fader of “at a glance” images
 dynamically fades the images from www
 widget code 100% on Jadu
 images are still served from www
 needs to utilize the media library
Image Popup / zoom
o
Creates a user defined thumbnail image and when clicked, displays the full scale image.

Image Profile
o
o
o

Image Refresher
o
o

The Shared Content widget allows you to add content that is created and maintained by
another office or individual to your own page.
Slideshow: Ordered Rotation
o
o

Provides Quote text box and Name text box. Text is in grey italics.
Shared Content
o

Provides a Quote text box and a Name text box. Graphics are stained glass top, dark
blue background and down arrow to give the ‘quote’ feeling.
Quote: Grey Italics
o

pull latest blog post from 'Features' blog (blogs.messiah.edu/features)
expand to pull from 2 optional blogs
 uses custom php library
 dev guide said to place it in X
 Vik said to place it in Y
 more recommendations on coding
Quote: Blue with stained glass
o

Pulls latest news items from News blog (blogs.messiah.edu/news)
News Feature (on homepage)
o
o

Allows up to 8 images of the same size to be added to the slideshow. Upon refresh this
will always display the first image specified in the listing.
NOTE:
 You MUST specify a slideshow height and width for the display to work.
 If you edit the slideshow, your original image names will not display.
Latest News (on homepage)
o

lists photo and details about the person / lecture / event
align image left/right
collect name/title/time/location/cost/tickets/contact name/email
 coded wrong / XHTML specs
 php coded improperly
 back with examples / referred to dev guide
Allows up to 8 images of the same size to be added to the slideshow. Upon refresh this
will always display the first image specified in the listing.
NOTE:
 You MUST specify a slideshow height and width for the display to work.
Slideshow: Random Rotation:
o
o
Allows up to 8 images of the same size to be added to the slideshow. Upon refresh this
will randomly display any image in the listing.
NOTE:
 You MUST specify a slideshow height and width for the display to work.
Widget Styles Built

Widget Style - Quote
o

grey / large font treatment
Widget Style - Messiah CSS widgets
o
o
o
double bar for H2 – to apply, add a heading to your content widget, click “Settings”
under ‘Widget Details” header, in the select style dropdown, select Messiah Widget
CSS. Click Continue.
proper spacing
image alignments
Blue Background Box Widget:
What it looks like:
A specific style for the header, and a specific style for the body text.
The background is always the light blue color which is taken from our
color guide. Used here: http://www.messiah.edu/gradprograms
How to add it:
To create the blue background box, you use the Blue Background Box widget in the widget list. Drag that into
your row, click on the wrench, and fill in the Heading text box, fill in the Text text box. Click Continue.
Calendar Block:
What it looks like:
This widget is not an editable widget, but you may place it on any
homepage and it will display as it does below. This automatically tie in
with the EMS calendar campus wide. http://www.messiah.edu/
Caption Box:
What it looks like:
Similar to the Quote: Blue with stained glass. Has text field for
caption. Graphics are stained glass footer with dark blue
background and white bold text in a smaller font. Can be used at
any width. Used here: http://www.messiah.edu/gradprograms
Suggested use: video or photo caption.
How to add it:
Facebook Feed:
What it looks like:
This widget is configurable to display your own Facebook feed
on any homepage.
Click on the wrench and define your Facebook url, the width,
the height. Click Continue to apply.
Falcon Scoreboard:
What it looks like:
This widget is non-configurable. However, to have it
display as it does above, you will need to click the
wrench, and select the Falcon Scoreboard from the
“Select Style” dropdown.
Used here: http://www.messiah.edu/
How to add it:
Google Translator:
What it looks like:
How to add it:
Drag the Google Translator into a row. There is no need to configure
anything on this widget. It is automatically generated.
Header: Blue / Header: Green:
What it looks like:
Both headers are the same concept, but different colors. This can be
used as a column header as it is on this page:
http://www.messiah.edu/students/
Homepage (Image) Fader:
What it looks like:
http://www.messiah.edu/
This is a non-configurable widget. It is pulling in images that the Office of
Marketing and Public Relations creates and uploads on a bi-weekly basis.
You may add this widget to your homepage, but again, you do not have
control over which images appear. To configure your own images,
please use one of the Slideshow widgets.
Drag the Homepage_Fader into a row. There is no need to configure
anything on this widget. It is automatically generated.
Image Popup / Zoom
What it looks like:
Simply upload an image or use and existing image,
define the size of the thumbnail and you are all set.
You can use as many of these widgets on a single
page as you wish. See it in action.
How to add it:
Define your options:



select the size of the thumbnail you prefer
add a caption to your image
link to a page
Image Profile:
Image Refresher:
What it looks like:
This is a configurable widget that changes an image upon refresh. See
http://www.messiah.edu/gradprograms for an example using the image
above. Any image may be used. There is no pre-defined formatting or
style – although all images should be of the same dimensions.
How to add it:
Define Height and Width, name the group, add your images, alt text and
image link if desired. You can add up to 8 images. Click Continue to
apply.
(Messiah) Latest News:
What it looks like:
How to add it:
Select which blog feed you’d like to display from the dropdown. These are predefined and are not editable. By default, the latest news widget will display 2
items from the same blog. This widget is used on the http://www.messiah.edu/
landing page.
(Messiah) News Feature:
What it looks like:
How to add it:
Select which blog feed you’d like to display from the dropdown. These are predefined and are not editable. By default, the latest news widget will display 1
item from the selected blog. This widget is used on the http://www.messiah.edu/
landing page.
(Messiah) Office Directory:
This widget is database driven and pre-defined. It is only used on the Offices page, available on the global nav
bar. Where to find it: http://www.messiah.edu/offices
Quote: Blue with stained glass:
What is looks like:
The Blue Quote Widget provides a specific style for the overall
display, and a specific style for the quote and for the citing. The
background is always the dark blue color which is taken from our
color guide. Used here: http://www.messiah.edu/gradprograms
How to add it:
To create the Blue Quote, you use the Blue Quote widget in the widget list. Drag that into your row, click on
the wrench, and fill in the Quote Text text box, fill in the Citing Source text box. Click Continue.
Quote: Grey Italics
What is looks like:
How to add it:
This widget is used to emphasize a pullquote on a
homepage. The font is always grey, italics, and the
font is always sized 50% larger than the paragraph
font.
Shared Content:
The Shared Content widget allows you to add content that is created and
maintained by another office or individual to your own page. When the content is
updated by the content owner, it is automatically updated on your site.
Select the content you want to use from the dropdown menu.
Slideshow – ordered rotation:
This is a configurable widget that fades in
and out in set order. See
http://www.messiah.edu/conducting for an
example. Any image may be used. There is
no pre-defined formatting or style.
Define Height and Width, add your images, alt text and image link if desired.
You can add up to 8 images. Click Continue to apply.
Slideshow: Random Rotation:
This is a configurable widget that fades images in and out in set order. See http://www.messiah.edu/cph/ for
an example. Any image may be used. There is no pre-defined formatting or style – although all images should
be of the same dimensions.
Define Height and Width, add your images, alt text and image link if desired.
You can add up to 8 images. Click Continue to apply.