Formatting Demo

Sample Text Formatting and Image Embedding with the Editor Toolbar

Formatting Guidelines
Here are a few suggestions on formatting guidelines when creating and editing site pages. Several of these topics are covered in the Content Entry Guide, I also included some additional suggestions based on reviewing the other pages I edited. Hope these suggestions are helpful!
Headings
  • Always use a heading tag when creating a heading. Do not just use the bold and/or italic button to style the text.
  • For heading sizes remember to use heading hierarchically on the page. If there is just one level of headings on the page I would use the medium size (Heading 3) for all headings. If there are two levels of headings I would use the medium size (Heading 3) and the small size (Heading 4). If there are three levels of headings use the large size (Heading 2), the medium size (Heading Three), and the small size (Heading 4).
  • Don’t use italics in headings (either on single words or the entire heading).
  • Limit punctuation other than text in headings. Avoid using exclamation points and dashes. If you need to segment the heading use a colon and commas (for example “Mystic Choral Concerts: 3 Seasons, 6 Concerts a Year”).
  • Capitalize each word in headings except for prepositions and articles. Do not use all caps. On capitalization one exception would be for FAQ style pages (https://mysticchorale.org/faqs-for-singers/) where you should treat each heading as a sentence with a question mark and only capitalize the first word.
  • Don’t use numbers in heading in effect to create a numbered list out of your headings. For example: 1) Rehearsal Guidelines.
Bulleted and Numbered Lists
  • Don’t create nested lists, use only a single level. As an alternative try to use subheadings and split the list up into multiple lists. For an example of this see the Ticket Sales and Contest page (https://mysticchorale.org/ticket-sales-and-contest/).
  • If you need to segment one of the bullet points in a list use a colon and make the first part bold (essentially creating a label). See the Mystic Yahoo Group page for an example (https://mysticchorale.org/mystic-yahoo-group/), list under the What are the different way’s I can view the group’s posting.
Outbound Links
Remember to set any outbound links pointing away from the Mystic site to open in a new browser window/tab. See the Content Entry Guide for more on how to use the link options.
Tables
Avoid creating and/or importing HTML tables into the editor field. Tables are not friendly for mobile devices as they cannot be collapsed via CSS to fit the width of the screen. As an alternative to tables present the content using subheadings and bulleted and/or numbered lists.
Pasting Content from Other Sources
When pasting content from other sources (Word Processing programs etc) be sure to use the Paste as Text button in the editor to remove any embedded formatting. In particular any <div> tags accidentally pasted into the editor from another source can mess up the spacing in the content column.
Though somewhat tedious whenever I paste something from an outside source I paste in the text one paragraph at time using the paste as text option, then I go back and apply the formatting needed with the editor toolbar. This method in particular helps in avoiding pasting in unwanted <div> tags.
Dead White Space
Try to avoid leaving dead white space in the content editor (empty paragraph tags). It is particularly easy to do this a the bottom of the page. Between sections/headings and at the bottom of the page make sure to backspace to ensure you aren’t leaving dead white space.
Other General Suggestions
  • Limit the use of exclamation points in the text copy. Use only single exclamation points, do not use multiple exclamation points.
  • Do not use all caps to emphasize text. Use bold text to emphasize text, however I would recommend using this sparingly. For example on the General Singer Info page there is so much bold text used that the emphasis effect is somewhat minimized.
  • I would stay away from using dashes to segment text content, try to use colons and commas instead.
  • Be consistent in using commas in terms of the final comma and the word and. I’m a big fan of the Oxford comma but either is fine, just be consistent.
  • Be consistent with abbreviation use particularly for things like for example. I would recommend using for example with a colon rather than e.g.

 

Heading One

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis iaculis nec mauris nec porttitor. Duis aliquet eros eu nisi pellentesque, quis congue eros luctus. Aenean nisl risus, porttitor sit amet tellus vel, commodo dictum justo.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Heading Two

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

  • Ut sit amet metus vel turpis sollicitudin dapibus varius vitae metus. Sed blandit dictum diam nec eleifend.
  • Maecenas pretium dolor purus, ac vestibulum tortor faucibus luctus. Cras et facilisis nisl.
  • Sed eget gravida tellus. Nulla suscipit pharetra lorem, eleifend tempus elit porttitor id.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

  1. Suspendisse ultricies finibus augue, vel auctor mauris auctor in.
  2. Nulla suscipit pharetra lorem, eleifend tempus elit porttitor id.
  3. Maecenas pretium dolor purus, ac vestibulum tortor faucibus luctus.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Heading Three

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Aenean quis lorem mollis, lobortis lectus condimentum, ultricies neque. Nunc id ex nec purus bibendum viverra eu in risus.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.


Image Embedding

Bobby McFerrin

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Billy Novick playing clarinet

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.

Bill Staines leads the Mystic Chorale in a performance of River

Nunc sed aliquet nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare tristique turpis consequat fringilla. Quisque non sollicitudin risus, vestibulum venenatis neque. Ut eu posuere quam, eu commodo odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu maximus risus. Sed convallis leo at libero consectetur rutrum. Sed tristique fringilla lorem id pulvinar. Etiam consequat libero vel mauris tempor, nec auctor velit condimentum. Vivamus iaculis lacus vitae nisl pellentesque maximus. Suspendisse potenti. Mauris eleifend nisi sit amet turpis posuere, sollicitudin lobortis lorem imperdiet. Donec vel mattis ipsum. Cras ut felis at arcu porttitor maximus sed vel justo. Fusce tempor lacus purus, nec consectetur sem porttitor quis.