Relay Online How To:

Size: px

Start display at page:

Download "Relay Online How To:"

Penelope Bryant
6 years ago
Views:

Relay Online How To: ---------------------------------------- Event Announcements Page --------------------------------------- The Event

The top 6 announcement boxes will also pull content directly into your Greeting Page. Manage Images Start by resizing the photos.

Here is an easy web-based photo resizer you can use to get your pictures down to the right shape and pixel width: http://www.picresize.

Resize - select Custom Size under step 2, and enter 275 in the width field.

1 Relay Online How To: Event Announcements Page The Event Announcements page is a great way to share upcoming meetings, fundraisers and activities within your community. The top 6 announcement boxes will also pull content directly into your Greeting Page. Manage Images Start by resizing the photos. All photos for your Event Announcements page should be square images, sized 275x275 prior to uploading them to the image library. Here is an easy web-based photo resizer you can use to get your pictures down to the right shape and pixel width: PIC RESIZE TIPS: Crop hold the SHIFT key, then click and drag on the image to make your selection. Resize - select Custom Size under step 2, and enter 275 in the width field. Once your images have been resized, upload them into your Image Library 1. Start by logging into the EMC 2. Under the Event Center tab, click Manage Event Library and select the Image List tab 3. Then, at the top of the page, click Upload New Image. 4. Provide image details and follow the steps to complete uploading your image to the library.

Update the Announcement Boxes To swap out the default announcements for your own, follow the steps below to maintain proper formatting and to ensure your custom announcements pull into the Greeting

Please know, even though the announcements appear in a vertical position within the WYSIWYG, once saved, they will display in a horizontal line on your website! 1.

2 Update the Announcement Boxes To swap out the default announcements for your own, follow the steps below to maintain proper formatting and to ensure your custom announcements pull into the Greeting Page correctly. There are currently 3 boxes built into your site. If you wish to add additional rows, see Appendix A. Please know, even though the announcements appear in a vertical position within the WYSIWYG, once saved, they will display in a horizontal line on your website! 1. From the EMC, select the Event Website section. 2. From the drop down menu, choose the Event Announcements page, and click the edit button in the upper right hand corner to open the page to edit. Updating Announcement Image 1. From the editing window, click on the image you wish to replace, then click Insert/edit Image button from the WYSIWYG tool bar. 2. Select the image from the Image List dropdown, and click Insert.

3. Your new image will now appear. Click Save to save your changes. Updating Announcement Text 1. From the editing window, highlight the entire line of text you wish to replace. 2.

Typing your new text over the existing text will allow you to maintain the proper formatting! 3. Once you have added the new announcement, you can add text hyperlinks as necessary. 4.

3 3. Your new image will now appear. Click Save to save your changes. Updating Announcement Text 1. From the editing window, highlight the entire line of text you wish to replace. 2. With the existing text highlighted, start typing your new text to replace it. Announcements should be kept to one sentence in length. a. Typing your new text over the existing text will allow you to maintain the proper formatting! 3. Once you have added the new announcement, you can add text hyperlinks as necessary. 4. Click Save to save your changes. Update the Default Page Content If you wish to update the default page content, like upcoming meetings or fundraisers, you can follow the steps above. Please know, the section headers and certain formatting may render differently in the WYSIWYG than on the live site, this is to be expected. In order to maintain the formatting as it appears on the front end, please continue to follow the process of highlighting the existing text and typing directly over to it maintain formatting. If you wish to add more meetings or fundraisers than the existing space allows for, please see below!

Adding Additional Content In some cases, you may want to add more content than the space allows. Your announcement can serve as a teaser with a link to a page with more information.

4 Adding Additional Content In some cases, you may want to add more content than the space allows. Your announcement can serve as a teaser with a link to a page with more information. If you don t already have a page to link to, you can create your own custom page. 1. From the EMC, select the Event Website section. 2. Select Copy a Custom Page. 3. Select an existing webpage whose format you wish to copy. We have provided a Generic Page (for copying) which will carry over all the proper coding and formatting so it matches the look and feel of the existing pages. 4. Click on the appropriate page from the dropdown menu before clicking Next. 5. Specify the following: a. Page Name: Change the name of the page from copy of to what you wish to name the new page. b. Page Body: Use the WYSIWYG tool bar to create and edit the content of the page. 6. When you have completed creating your new page, click Save and Finish. Be sure to save your work often! Once finished, simply create a hyperlink on the Event Announcements page so site visitors can easily access all the great event information! Be sure to update your event announcements often to keep them relevant and timely. Be sure to remove outdated dates as they pass.

Appendix A Add Additional Rows of Boxes. **Please take your time with this step, as it requires working within the HTML content of page (which dictates exactly how your page renders to the public).

5 Appendix A Add Additional Rows of Boxes. **Please take your time with this step, as it requires working within the HTML content of page (which dictates exactly how your page renders to the public). Please review the instructions thoroughly before proceeding, and only touch the parts of the code outlined below. 1. From the EMC, select the Event Website section. 2. From the drop down menu, choose the Event Announcements page, and click the edit button in the upper right hand corner to open the page to edit. 3. Since we are working in the HTML code for this step, click the Disable WYSIWYG button. 4. The HTML Source Editor will open. (As a reminder, please use caution when working within the HTML Source Editor, as this is the code that make your entire web page display!) 5. Carefully scroll down until you see the code that says:

END ROW ONE --> 7. Right-click to COPY the code (or Ctrl C). 8.

6 6. Starting with the line that says , carefully highlight that entire line of code all the way down to the code that says <! END ROW ONE --> 7. Right-click to COPY the code (or Ctrl C). 8. Once the code is copied, place your cursor at the end of the code that says <! END ROW ONE --> and hit Return to bump down to the next row. 9. With your cursor still in the empty row, right-click to PASTE the code (or Ctrl V).

7 10. A new row of duplicate announcement boxes will now appear! a. You may wish to update the text in  and <! END ROW ONE --> to say BEGIN/END ROW TWO (or THREE, or FOUR and so on). 11. Once the code has been correctly updated, click Save to save your changes. The click Enable WYSIWYG to close out of the HTML Source Editor window. 12. Repeat these steps for each additional row of announcements you wish to add (Reminder: only the first 2 rows will pull onto the Greeting Page). 13. Once you save that page, you can now update the new row of boxes to include 3 custom announcements using the instructions above.

Making Strides Online How To: Real Men Wear Pink Customization Guide

Making Strides Online How To: Real Men Wear Pink Customization Guide Included in this guide you will find all the steps you need to fully customize your Real Men site! This is to be used as a quick reference