Table of Contents Website Section Overview MichPA Content Guide Website Section Overview...1 FAQ...2 Content Area Styles...3 Client-side Right Navigation Styles...4 Font Index...5 Color Index...5 Rotating Sponsor Box Instructions...6 Map Instructions...9 1 Global Banner & Navigation Affiniscape editable 1 2 3 Content Area Client editable Client-side Right Navigation Client editable 2 3 4 Footer Client editable PAGE 1 OF 10 4
Style Guide FAQ MichPA Content Guide The Style Guide was created to give you a visual guide for your Affiniscape styles. To apply your custom styles, highlight a portion of text and choose the style you want applied to it. Page Appearance: Editor vs. Live While making adjustments in the editor, based on this guide, you will not see the final appearance while working in the editor. Once the changes have been saved, you can view the correct appearance on the live page. Adding New Content Text from a Word document and other web sites will retain the styles if pasted directly into the editor, and will override your Affiniscape styles. When transferring new content into the editor from an outside source, you should first copy and paste the content into Notepad to strip out any previous formatting and then paste the content into the Affiniscape editor. FredCK Editor Tip: Using the Paste as Plain Text button strips out all the formatting, and eliminates the need for pasting the content through Notepad. Editing Content Any font-face, size or color change made through the Affiniscape editor will automatically overwrite the custom styles created for your website by Affiniscape. If you run into display issues with your content, run code sweeper to remove all Word, font and span tags. If that doesn t correct your issues, copy and paste your content into Notepad to strip out all formatting. Paste the text back into the editor to begin formatting the text from scratch. To create a new paragraph in the editor, place the cursor where you want the paragraph to start and hit the Enter or Return key on your keyboard. Tip: After pasting a large section of text into the editor, you may notice that highlighting a small portion of text and selecting a style will apply the style to the entire section of new content. Try creating a new paragraph after the small portion of text, and then applying the style. You may also try pasting in the text sections at a time. Firefox Tip: Paragraph tags are not automatically created through the editor when text is pasted in, so you may have to highlight your content and select Normal from the drop down menu. To move a sentence down to the line directly below the one above it to create a hard line break hold Shift and type Enter on your keyboard. This same technique applies to Bulleted and Numbered lists. Creating a hard line break, by holding Shift and typing Enter, will move the sentence down to the next line without creating a bullet next to the new line of text, while simply typing Enter will move the sentence down and create a new bullet. PAGE 2 OF 10
2 Content Area MichPA Content Guide EDITOR REFERENCE HTML EXAMPLE APPEARANCE Normal <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy... quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Uscipit lobortis nisl ut aliquip ex ea commodo consequat. Heading 1 <h1>heading 1</h1> Heading 1 Heading 2 <h2>heading 2</h2> Heading 2 Heading 3 <h3>heading 3</h3> Heading 3 Heading 4 <h4>heading 4</h4> Heading 4 Heading 5 <h5>heading 5</h5> Heading 6 <h6>heading 6</h6> Heading 6 Bulleted List <ul> <li>suspendisse id vitae ligula volutpat condimentum.</li> <li>aliquam erat volutpat, sed quis velit nulla facilis nulla.</li> </ul> Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat, sed quis velit nulla facilis nulla. Nam consectetuer sed aliquam, nunc eget euismod ullamcorper. PAGE 3 OF 10
2 Content Area (Cont d) MichPA Content Guide Blockquote <blockquote>morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus.</blockquote> 3 Client-side Right Navigation EDITOR REFERENCE HTML EXAMPLE APPEARANCE When creating a new right navigation the following settings will need to be entered in order to assure the correct layout appearance Navigation Width 210 Wrap Content Around Navigation No Table Properties Rows: Columns: Insert Table Border size: Alignment: 1 1 0 <table width= 180 cellpadding= 0 cellspacing= 0 border= 0 > <tr> <td> </td> </tr> </table> Width: Height: 200 pixels pixels Cell spacing: Cell padding: 0 0 Bulleted List Hyperlink <ul> <li><a href= # > Duis vero quis molestie</a></li> <li><a href= # > Hendrerit in quis minim</a></li> <li><a href= # > Augue consequat praesent</a> </li> </ul> PAGE 4 OF 10
Font Index MichPA Content Guide Arial FONT-FAMILY APPEARANCE Lorem ipsum dolor sit amet Tahoma Lorem ipsum dolor sit amet Color Index APPEARANCE HEX VALUE (HTML/CSS) RGB VALUE #00744F R: 0, G: 116, B: 79 #00497F R: 0, G: 73, B: 127 #cde7f4 R: 205, G: 231, B: 244 #323232 R: 50, G: 50, B: 50 #666666 R: 102, G: 102, B: 102 #FFFFFF R: 255, G: 255, B: 255 PAGE 5 OF 10
MichPA Content Guide Rotating Marketing Banner Instructions Getting Started 1. First, you have to decide whether you are adding or deleting a banner image to your Rotating Marketing Banner. Resizing Images 2. If you are adding an image to the Marketing Banner, you must size your image before adding it to the rotation. 3. Sponsor images will need to be 380 pixels wide by 194 pixels tall. 4. To size your image, you need to use Photoshop, Microsoft Picture Manager or another image editing program. There are also websites that allow you to resize images online for free. For example: http://rsizr.com. Using http://rsizr.com, all you have to do is upload your image to this website and then you can size it. 5. Once you have resized your image, you must save it to your desktop: Uploading a New Sponsor Image 6. Click on Site Admin >> Hover over Content Pages >> Click on Upload Files. 7. Decide what folder that you would like to upload your photos to on the folder list. 8. Upload your images by clicking on the plus icon on the top right side of your screen. PAGE 6 OF 10
MichPA Content Guide Rotating Marketing Banner Instructions (Cont d) Editing your Rotating Marketing Banner 9. Your Rotating Marketing Banner is located in the Common Home page. You can find your Home page by following this path: Click on Site Admin >> Hover over Content Pages >> Click on Common Home 10. Your images will appear in a bulleted list. To add another image, click on the whitespace to the right of the image after which you would like to insert the new image, and hit Enter. 11. Then click on the Image icon in the toolbar. 12. The image box will appear, click on the Browse Server button. 13. Your uploaded images will appear in your list on the left side of the box. 14. Click on the image that you would like to appear. 15. If you want your image hyperlinked to a website click on the Link tab to add the website address and set the target to New Window. 16. Then click on OK. You have added the image to the screen. 17. Click on the save button at the bottom of the page. PAGE 7 OF 10
MichPA Content Guide Rotating Marketing Banner Instructions (Cont d) Creating Image & HTML Text Marketing Banners 18. To create banners that include HTML text, follow the steps above to insert an image. 19. Click the Source button to enter Code-editing Mode. 20. Locate the image you just inserted and paste the following highlighted HTML code immediately after the image: <li> <img src= /associations/13022/files/image-name.jpg width= 380 height= 194 border= 0 alt= /> <h3><em>heading</em>second Item</h3> <p>lorem ipsum dolor sit amet.</p> <p><a href= # >Link</a></p> </li> 21. Click at the Source button again to return to WYSIWYG Mode. 22. Highlight the Heading text and type your banner s heading/title. 23. Highlight the Lorem ipsum... text and type your banner s main content text. H3 P A IMG <div id= banner > <ul> <li><img src= http://placehold.it/380x194 alt= /> <h3><em>communicate</em> Your Message</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut felis id turpis tempus facilisis consequat eu purus.</p> <p><a href= # >Learn A Whole Bunch More</a></p> </li> <li><img src= http://placehold.it/380x194 alt= /> <h3><em>heading Three</em>Third Item</h3> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut felis id turpis tempus facilisis consequat eu purus.</p> <p><a href= # >Learn More</a></p> </li> </ul> </div> PAGE 8 OF 10
MichPA Content Guide Map Instructions Getting Started The Map is organized as a Subpage. You can access it though Site Admin>>Content Pages>>Sub Page>>MAPA Regional Map. Below is how the Map looks to users. 1. MAPA Regional Map. 3 PAGE 9 OF 10
MichPA Content Guide Map Instructions Accessing through 24/7 On the left is how the map looks in the 24/7 editor. Currently, it cannot be edited until you press. Editing Maryland Area Facilities Map Content 1. Decide which location you would like to edit. Areas on the map are labeled by numbers. These numbers are reflected in the code. 2. For example, if you want to edit,, you can look for it in the code by id=. 3. Look for the areas to change. - Contact Name. - Address. - Cell, Telephone, and Fax Numbers. - Email Address Link. - Email address as it will appear on the page. PAGE 10 OF 10