How to copy/paste clean code

Have you ever pasted content into the CMS, and it just doesn’t look right? You’re probably carrying old formatting code into the new CMS. Common culprits are copying from a Word document, copying text from one browser and pasting it into another, or copying text that was formatted in-line (using <span> and <style> tags directly in the code instead of letting the preformatted stylesheets do the work.)

Adding content with this type of formatting is bad for a couple of reasons:

  • It doesn’t let your page update with the rest of the CMS. We may decide to change the font size or style to make the site more accessible or to keep up with modern design trends. By using the standard heading (<h1>, <h2>, etc) and paragraph (<p>) tags, your content will be ready to shift in an instant. If you leave hard-coded styles in the page, your look won’t automatically change.
  • It can look strange on different devices. Everything on our new template is designed to expand and contract with the user’s screen size. Hard-coded styles may not change in the right way between desktop and mobile.
  • It’s annoying for you, the CMS user. Sometimes you’ll have lines and lines of needless code – annoying when you’re trying to find one or two words in pages of <span>s and <color>s. For example, look at the coding on the links below—the <u> and <span> tags make for messy code on the back and and ugly links on the front end.

Screen Shot 2017-06-30 at 2.38.47 PMScreen Shot 2017-06-30 at 2.40.52 PM


Profile Snippet

This snippet is traditionally used for information about people that are not employees, such as alumni or student award winners, this snippet can include a photo and text on the left with a short description on the right to be used on a listing page with several other profiles. The short listing then includes a link to a full-page listing. If you would like to use this layout on just one page, not a short version and long version, you should use the Row w/ Left Image snippet instead.

profile-short profile-full


Blockquote Snippet

This snippet creates a formatted blockquote that includes the quote and the author. View the blockquote in the Style Guide.

blockquote


(Video has no sound.)

  1. Insert the snippet.
  2. Edit the quote and author content.
  3. If you do not have an author, you must edit the code to remove <span class=”author”>Author Name</span> in the code view or put your cursor at the end of the quote and press the delete key (in the section on a keyboard between the letters and number pad).


(Video has no sound.)

When used inside the Row w/ Background snippet it will have different styling.
Blockquote snippet in a row with background.


(Video has no sound.)