Elements

Contents

Formatting Examples Section

  •     Promo Banner Image
  •     Standard Image
  •     Three Sweet Spot Fixed-width Images with Captions
  •     Grid Images (350 x 425 px) with Text Embedded at the bottom of the .jpg image
  •     Linked Grid Images (250 x 313 px) with Text Embedded at the bottom of the .jpg image
  •     Images Embedded on the Right in a Simulated Two Column Grid
  •     Images Embedded on the Left in a Simulated Two Column Grid
  •     Staff Photos with Name & Role Embedded at the bottom of the .jpg image
  •     Images Embedded on the Right
  •     Images Embedded on the Left

Paragraph Format Options
Image Management
Example of Header Colors and Font Sizes
Example of BEFORE & AFTER Formatting
 

Formatting Examples Section

 

optional banner caption

<A 1200 pixel-wide banner at the top of a webpage spans the page width on desktop displays; it is an effective visual to introduce a page. Banner heights of 200 to 420 pixels are recommended; heights larger than 420 can make the image overbearing>

 

In these days of fast-paced living, multi-tasking, and continual connectivity, more than ever we need time apart for communion with Spirit and the refreshment of our soul. Everyone who yearns for spaciousness in silence to deepen your contemplative practice is welcome.

Led by the Retreat and Music Ministries, this retreat will offer instruction in various contemplative practices, as well ...

 

 

Do you ever wonder why you're doing all the "right" things, yet your life just isn't working? Or why you feel that you don't have enough time or money?

In this results-driven, tithing-based course from Rev. Ken Diagle, you will learn about abundance in many aspects of your life. The course is interactive, and includes a variety of excercises, videos, games, and other learning modalities to help you shift your consciousness to one of joyful prosperity. This class is about YOU!

 

 

optional banner caption

<For web pages with a left-hand column of menu items, the available page width is diminished. A 850 x 420 pixel banner at the top will span the page width with a bit of margin between the image and the left-hand menu items>

 

YouTube, width="560" height="315" caption
 

Promo Banner Image

  • Image properties: border=3

Image caption text
 

Standard Image

  • Image properties: border=3, hspace=3, vspace=3

Image caption text
 

Three Sweet Spot Fixed-width Images with Captions

  • Three captions with "three spaces, three periods and three spaces" used as a separator
  • Note that 300 px is the maximum fixed width to display on a 4" mobile phone - fixed size height and width is NOT recommended. Use native image sizing, and delete the height and width values in the image properties block
  • Image properties: border=3, hspace=3, vspace=3

Image Caption for Image #1: Sagittis Felis ac Sagittis   ...   Image Caption for Image #2: Fusce ut aliquet   ...   Image Caption for Image #3: Donec vel dolor at arcu tincidunt
 

Grid Images (350 x 425 px) with Text Embedded at the bottom of the .jpg image

  • Image properties: border=0, hspace=3, vspace=3

 

Linked Grid Images (250 x 313 px) with Text Embedded at the bottom of the .jpg image

  • Image properties: border=0, hspace=3, vspace=3
  • Each image is designed to be a hot link to the referenced page

 

Images Embedded on the Right in a Simulated Two Column Grid

  • Image Properties: border=0, hspace=3, vspace=0

Morbi Mattis

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,

  • Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
  • Duis non efficitur nisi, id malesuada justo.
  • Maecenas sagittis felis ac sagittis semper.
  • Aenean tincidunt lectus auctor
  • Tortor elementum, varius
 

Lectus Auctor

 Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisqueipsum tempor. Duis vulputate ex et ex tincidunt,

Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor.

  • Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
 

Images Embedded on the Left in a Simulated Two Column Grid

  • Image properties: border=3, hspace=3, vspace=3

NOTE: hspace=3 gives adequate spacing between the text and image while still having a minimum image offset in a 4" mobile display provided there are no "buttons" or numbers for a list. A list requires an hspace=20 to allow space to display the buttons or numbers, but hspace=20 offsets the image in a 4" mobile display  

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque.

Maecenas et lorem quis sem varius sagittis et a est. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.

Aenean tincidunt lectus auctor mauris maximus, ac scelerisque.

Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.

 

 

Morbi Mattis

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque

Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper.  

Maecenas et lorem quis sem varius sagittis et a est.

Aenean tincidunt lectus auctor mauris maximus, ac scelerisque.

Maecenas et lorem quis sem varius sagittis

 

Staff Photos with Name & Role Embedded at the bottom of the .jpg image

Image Properties: border=0, hspace=3, vspace=0

 
 

Images Embedded on the Right

Maecenas Sagittis (H3)

  • Image Properties: border=0, hspace=3, vspace=0

NOTE: "hspace=3" gives a bit of spacing between the text and the image without offsetting the image in a 4" mobile display.

Morbi mattis miconsectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo.

Maecenas sagittis (H4)

Felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus.

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

Bold May Be Used as an Alternate Header Style

Mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

Maecenas sagittis (H3)

Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius.

Morbi Mattis (H4)

Mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

Morbi Mattis (H3)

Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius.

Morbi Mattis (H4)

Mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

Vestibulum Ultrice (H3)

Sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius.

Bold May Be Used as an Alternate Header Style

Mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

 

Images Embedded on the Left

Ligurnas Pateratas Gravida (H3)

  • Image Properties: border=0, hspace=7, vspace=3

NOTE: "hspace=7" gives spacing between the text and the image while still having a minimum image offset in a 4" mobile display.

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis.

Varius Pellentesque (H3)

Etiam ut gravida sapien. orbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo.

Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus.

Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus.

Ligula non Velit (H3)

NOTE: hspace=20 only for this image allows extra space for the following bullet list, BUT the image will be offset in a 4" mobile display. Bullets to the right of images is therefore not recommended. Move the image to the right or avoid bulleted and numbered lists where feasible.

  • Ex et ex tincidunt, quis lacinia velit aliquet.
  • Duis non efficitur nisi, id malesuada justo.
  • Maecenas sagittis felis ac sagittis semper.
  • Curabitur purus leo, tempus sed finibus eget, fringilla.

Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus.

Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.


 

End Section

 


Paragraph Format Options

Normal: used for 99% of  the text

Address: this is an example of the "address" format which looks a lot like selecting "italic" as a text option. Rarely used.
Formatted this is an example of the "formatted" format. Used sparingly.
1234567890123456789012345678901234567890123456789012345678901234567890
Now is the time for all good men to come to the aid of their country.
Looks like a good choice to avoid proportional spacing, e.g. similar to the Courier font style

Header Option (H2) - often centered at the top of the page or used for major page divisions

Header Option (H3) - used for 99% of section headers

Header Option (H4) - used sparingly. Use H2 and H3 for most internal headers; two levels of headers are generally better than three

Bold - An Alternate Header Option

Header Option (H5) - This size is used for image captions. Avoid use of bold. Use italics only where grammatically correct. Add all upper case for particular words only if needed to direct focus
Header Option (H6) - This size is used for the "Last updated by ..." at the bottom right of the page. Used rarely: it may also be used for a footnote.
Normal (DIV): Among other qualities, this format doesn't create a new paragraph after a <return> character. Rarely used.
Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque.
Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius.

 

End Section

 

 

Image Management

To assure that images resize properly from desktop to iPad to iPhone/Mobile, do the following steps for each image on every page:

STEP ONE: Change the native resolution of your image to the desired display size and ratio before uploading to the File Manager. For example, 400 px x 191 px as shown in the image to the left.

In Photoshop Elements, use "Image/Resize/Image Size..." to establish the desired pixel width and height. Then use "Save for Web..." to render the smallest download size that will display clearly. A free app such as http://gimp.org is an alternative to Photoshop.

You may also use Image Optimizer to prepare images for the web. Specify "Quality: Normal", and the desired Max Width & Max Height in pixels.

Download sizes of around 100 KB are best and give great resolution on computer displays. Download sizes of 500 KB or 1MB or 4MB take much too long to download to a web browser and do not render with greater resolution. Individuals with slower internet connections will find a web page unresponsive if the image sizes are not adjusted beforehand.

STEP TWO: Upload your image to the File Manager into the <root> directory. Do not use any of the other subdirectories.

STEP THREE: After your image is selected in the Image Properties block:

(a) Click the lock icon (1) if necessary to constrain proportions

(b) Click the refresh icon (2) to restore the native resolution of the image

(c) Most Important: delete the Width and Height values (3), which in this example are 400 x 191. This is what allows a web browser to resize an image. If you leave values in place,  a web browser will not resize.

(d) Adjust the Border, HSpace, VSpace and Allignment. Frequent values are 3 - 12 - 3.

(e) Click OK


 

End Section

 


Example of Header Colors and Font Sizes

Page Header (H2 - Color #007998 - Font Size 22 PT)

Image Caption, Woman and Child  (H5)

Text Header (H3 - Color #007998 - Font Size 18 PT)

NORMAL Format - Color #77777 - Font Size 13 PT (= 16px).  Etiam ut gravida sapien. orbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.

Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum.

Subtext Header (H4 -  COLOR is #41AFC0 - Font Size 16 PT)

Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sen      

Last updated on ... (H6 -  COLOR is #77777 - Font Size 0.67 em = 8.71 PT)

 

End Section

 


Example of BEFORE & AFTER Formatting


BEFORE


Unity of Fairfax and its EarthCare Ministry Team is one of five Unity congregations internationally to receive the Green Star Award for Congregational Environmental Excellence from Unity Worldwide Ministries.The award was presented June 14 at the 2017 Unity People’s Convention in San Antonio, Texas. Rev. Russell Heiland accepted the award from Rev. Karen Tudor, Chair of the Unity Worldwide Ministries Board of Directors. The criteria for the award is the accomplishment of at least three projects in the last year which foster awareness of spiritual oneness with our Earth home and promote active care of the environment. 

In 2016, Unity of Fairfax and its EarthCare Ministry Team led the project to replace all fluorescent and incandescent lighting with state-of-the-art LED lights throughout two church buildings and the parking lot.  In the first seven months after installation of the LED lights, the church has saved $2,960 in electricity costs and reduced greenhouse gas emissions by 37,415 pounds of CO2.

In addition, Unity of Fairfax hosted the 3rd Faith Alliance for Climate Solutions (FACS) and Interfaith Power and Light (IPL) (MD, DC, NoVA) symposium “Working Faithfully with Our Leaders on Climate Solutions” and supported a weekly Farmers’ Market each Saturday from 9 a.m. to 2 p.m. in the church parking lot.

“This represents a united effort to keep our campus healthy, preserved and beautiful as well as recognition of our efforts to reduce greenhouse gasses and educate our members on ways they can help Mother Earth,” said Pete Clifford, leader of the EarthCare Ministry Team.

Unity of Fairfax has been focused on environmental activity and awareness since the EarthCare Ministry team was formed in 2009. In addition to caring for the church’s five acres, which are planted with a wide variety of native plants, the EarthCare team has spearheaded such projects as creation of a detention pond and riparian buffer, the implementation and maintenance of a vegetative green roof on one of the buildings, educational programs about recycling and environmental issues, extensive programs for Earth Day, and much more.

Unity of Fairfax has been designated by Fairfax County as a demonstration site to provide education to the community on best practices in storm water management, and works with Northern Virginia Community College to educate Earth Science classes on environmental issues. In addition, Unity of Fairfax is a wildlife habitat certified by the National Wildlife Federation since 2005.

The EarthCare Ministry Team of Unity of Fairfax is a member of the nationwide EarthCare program of Unity Worldwide Ministries, which established the Green Star Award to recognize leaders in sacred environmental responsibility. Only five congregations in the world were recognized for their efforts in the last calendar year.

 


AFTER


 

Unity of Fairfax and its EarthCare Ministry Team is one of five Unity congregations internationally to receive the Green Star Award for Congregational Environmental Excellence from Unity Worldwide Ministries.

The award was presented June 14 at the 2017 Unity People’s Convention in San Antonio, Texas.

Rev. Russell Heiland accepted the award from Rev. Karen Tudor, Chair of the Unity Worldwide Ministries Board of Directors.

The criteria for the award is the accomplishment of at least three projects in the last year which foster awareness of spiritual oneness with our Earth home and promote active care of the environment. 

1. LED Light Project

In 2016, Unity of Fairfax and its EarthCare Ministry Team led the project to replace all fluorescent and incandescent lighting with state-of-the-art LED lights throughout two church buildings and the parking lot. 

In the first seven months after installation of the LED lights, the church has saved $2,960 in electricity costs and reduced greenhouse gas emissions by 37,415 pounds of CO2.

2. Faith Alliance for Climate Solutions

In addition, Unity of Fairfax hosted the 3rd Faith Alliance for Climate Solutions (FACS) and Interfaith Power and Light (IPL) (MD, DC, NoVA) symposium “Working Faithfully with Our Leaders on Climate Solutions

3. Farmers' Market

Unity of Fairfax also supports a weekly Farmers’ Market each Saturday from 9 a.m. to 2 p.m. in the church parking lot.

 

This represents a united effort to keep our campus healthy, preserved and beautiful as well as recognition of our efforts to reduce greenhouse gasses and educate our members on ways they can help Mother Earth,”

—Pete Clifford, leader of the EarthCare Ministry Team
 


EarthCare Projects

Unity of Fairfax has been focused on environmental activity and awareness since the EarthCare Ministry team was formed in 2009. In addition to caring for the church’s five acres, which are planted with a wide variety of native plants, the EarthCare team has spearheaded such projects as:

  • creation of a detention pond and riparian buffer
  • implementation and maintenance of a vegetative green roof on one of the buildings
  • educational programs about recycling and environmental issues
  • extensive programs for Earth Day
  • and much more.

EarthCare Honors

  • Unity of Fairfax has been designated by Fairfax County as a demonstration site to provide education to the community on best practices in storm water management.
  • EarthCare works with Northern Virginia Community College to educate Earth Science classes on environmental issues.
  • In addition, Unity of Fairfax is a wildlife habitat certified by the National Wildlife Federation since 2005.
  • The EarthCare Ministry Team of Unity of Fairfax is a member of the nationwide EarthCare program of Unity Worldwide Ministries, which established the Green Star Award to recognize leaders in sacred environmental responsibility.
    • Only five congregations in the world were recognized for their efforts in the last calendar year.
       

 

End Section

 


 

Last updated on December 23, 2018