Parent Home > Style Guide > Editing Source Code

Editing Source Code

To make some content on the Parent website appear the way you'd like it to appear, you will need to edit the content in the source code.

This means working with HTML.

Edit source code.
Figure A.

Follow these steps to bravely edit source code:

  1. Click on the Edit icon for the Body Content to go into the UMContent content editor.
  2. Click into the Body Content or Right Column section in the editor where you'd like to make the edits.
  3. Click on "Source" in the toolbar (see figure A).
  4. Don't panic.
  5. Find the part of code you'd like to modify or the area in the code where you'd like to add something.
  6. For example, let's say you've just placed an image on a page and you'd like to add an "image" class to it in order to align it to the left or right and to have a stylized caption. Figure B shows what the source code looks like for an image before the "image" class is applied. The highlighted paragraph, or <p> tag, shows where you will add your code.
  7. Style-Guide-image-example1
    Figure B.

  8. Typing directly into the source code, you would add class="image" to the <p> tag. Figure C shows how the "image-g3" class is applied to an image that is 3 columns wide and will align to the right. See Photos and Captions for image classes. Also note that when adding a caption, you must put a <br /> between the image and the caption so that the "image" class will also style the caption text.
  9. Style-Guide-image-example2
    Figure C.

  10. To get out of the source code and back to the WYSIWYG editor (Google it if you don't know what it means!), simply click on  "Source" in the toolbar again.