Editing Volunteer Opportunity Descriptions
When you first create a volunteer opportunity using the "Create Volunteer Opportunity" link - you put in a basic volunteer opportunity description which is text only.
However, if you want to make it a bit fancier, you can edit that description and add boldface, italics, hyperlinks and more using our WYSIWYG editor.
On the volunteer opportunity detail page click on Add/Change Description
This will open the WYSIWYG Editor for the project description.
The WYSIWYG editor icons
An updated WYSIWYG editor was released to HandsOn Connect in the December 2015 release. It is somewhat mobile responsive and resizes itself based on the width of your browser window.
When in the editor - you'll see the name of what you are editing in the Top Left of the editor window. (In the image above, we are editing the volunteer opportunity "To Be or Not To Be"
1. Source - allows you to see the html code. You can paste external code here or edit existing code produced by the editor.
2. Cut and copy icons.
3. Paste. Paste as plain text. Paste from Word.
(Be sure to use paste from word if copying from a word document.)
4. Undo and Redo.
5. Find and Replace
6. Select All and Remove Formatting. (Use the "Remove formatting icon to remove any formatting you've added to the text)
7. Link (see below) and Remove Link.
8. Anchors (see below)
9. Insert Image (see below)
10. Tables
11. Horizontal Line
12. Smileys and special characters
13. Bold. Italic. Underline. Cross out
14. Bullets and numbered lists.
15. Indent
16. Blockquote (can also be accessed via style menu)
17. Alignment
18. Style (see below)
19. Font and Size. (if you want to deviate from the standard fonts and styles used by HandsOn Connect. Note.. not all fonts will work for all users, they must have the font installed in their machine for it to show up exactly as you specify it.)
20. Text color and background color.
Linking Text
Select text or picture and click on the Link Icon. A popup will appear.
You can link to URLs, Anchors (see anchors below), or create a link to an email address.
Use the Target tab to define whether the linked page opens on the same page, or a new page or tab.
We recommend always using relative links for pages within the site. The friendly URL 'news' would be linked as /news
You can define links as URLs, email links, or link to anchors you have inserted on the page.
Linking text or pictures
You can set the alignment, spacing width and height of images.
The Upload Tab will allow you to upload images to the server (Make sure they are optimized for web viewing. Large, non-optimized images will load slowly and take up a lot of data storage).
You can select from uploaded images by clicking on the Browse Server button and choose from any previously uploaded image.
Once selected, you can enter alternative text, edit the size, place a border, define the spacing around the image, and specify the alignment.
Note: The ability to upload images is only available to admin users on the back end of the site. Partners are not able to upload images.
Anchors
Anchors are used for long web pages where you may want to link to a specific spot on the page:
Place your cursor on the spot where you wish to place the anchor and click on the anchor icon.
Give you anchor a name.
The anchor will be placed in the spot you indicated.
You can then link to the anchor by clicking on the text you wish to link, and selecting Anchor as the link type.
If the anchor appears on the same page - you'll be able to see any anchors you've created on the page in the anchor name picklist:
If you wish to link to an anchor on another page you'll need to name to manually code the URL for the anchor. The format is /pagename#name_of_anchor
Working with HandsOn Connect Styles
The .css in HandsOn Connect has a number of defined styles. We recommend using these styles to get a consistent, clean look to your web pages.
Here's what the different styles in the styles picklist look like when used on the site.
Text Styles
Styles
Various styles can be applied to text to produce headers of various levels. The exact look that each style will produce on your public size may vary from what is seen in the WYSIWYG editor itself, as each site template uses different .css to produce the looks of the various headers.
Its best to find a few styles you like, see how they look when the content is published on the site, and then rely on those styles.
Blockquotes and other styles
Working with styles if you create your project description in the new Volunteer Opportunity Wizard
The updated Volunteer Opportunity Wizard ("Create Volunteer Opportunities") allows you to create a text-based description as part of the volunteer opportunity creation process. It places special code that will allow paragraph breaks to appear on the web.
If however, you wish to edit the description, and apply styles to it, you'll find that the style seems to get applied to ALL the text, rather than just the paragraph or headline you want it to appear to.
Here's what happens if you apply Header 2 to just one line of the description
The entire description takes on the style :-(
How to add styles to descriptions created via the new Wizard.
To prevent this problem from happening. Do the following before editing styles in the WYSIWYG Editor.
- Select all the text and format it as 'paragraph" from the style dropdown.
2. After doing so, you'll be able to select a single paragraph and apply a style to it, without the other content being affected. Example: Now I'll pick the first paragraph and choose header 2
Voila: It works!
0 Comments
Add your comment