Design Standards

INTRODUCTION - What do you care about the most? Do you want ..... Capped at 300 Characters (has to be centered text).

When adding News or Publications items, if you want the default banner select the category in the new News item (either news or publication) to have the default banner on the article/publication.

If you receive this error when trying to upload an image: says - Upload failed. The error message was: Not enough memory available to perform this image operation

There may be something wrong with the image file - troubleshoot by uploading another image. If a different image uploads without an error -

Headline here if this ever happens again: Try resaving it, or even try compressing it with free online tools like this JPG compressor tool.


Email sent from Nick RE: not using Vimeo and why (sent to us 3/23/2021)

we prefer native HTML video versus a 3rd-party embed (like Vimeo) for a few reasons:

• We have more CSS control over how the video is positioned as it resizes from desktop to mobile.
• We like the ability to turn off the default player controls, and ability to build in our own custom controls to match the site design
• And specifically on your site, it makes it very simple for you to switch out the video via the dropdown control (as seen in the image below).

Long story short, if we move to a Vimeo embed workflow, we would have to refactor the code and we’d lose all the functionality listed above.

From: Nick Merrill <>

Date: Monday, October 26, 2020 at 4:28 PM Be sure to perform a hard page refresh to see the proper video:

I ran through a few tests on my end. The cause of the “glitchy-ness” presumably occurred during the conversion from MP4 to WebM. I’ll spare you of the technical details, but I have gone ahead and standardized our internal process with the latest “video-export” tooling to ensure a smooth conversion so we avoid this back-and-forth in the future.

I’ve taken the liberty of re-converting the files and fixing your current video. If you refresh the page, you should see a cleaner video.

What this means going forward:

  1. You can continue to send us a Dropbox link to the raw video NO LONGER THAN 20 SECOND FOR THE ENTIRE LENGTH (just as you were before) to Jim and our support team via the websupport email address… you can cc me if you’d like.
  2. On our end, we’ll use our updated processes and do a more thorough review and test before going live with your new videos.
  3. There is nothing Angelo needs to do differently, other than supply us with the original video format and be mindful of the file size and video length NO MORE THAN 20 SECONDS TOTAL.

Once the video is uploaded, toggle between any of the hero videos in the library without support, picking the video we want to be shown on the home page. Editing the Hero Video is accessible at the top of the homepage in edit mode/entry. Edit the home page to access the ability to toggle between videos.


Image with Content (image position LEFT)

At The Community Foundation, we work with donors ..... you and your professional advisors (links to pages within our site, to files and to other websites...)....

This is an image caption (optional) you can bold, italic and add links to internal or outside pages.

Image with Content (image position RIGHT) ALSO PROPERTIES OF BUTTON AND HIGHLIGHT (example of highlight below)

More than 1,120 funds....

Below is an example of "highlighting" this technique works well for content in FAQ pages - non number lists. Don't use it a lot.


test text

QUOTE (you can add a photo) All quotes are centered text only, can't change. "...Our motivation is to do what's right - not for us - but for the community...." Capped at 250 characters

— Houch and K.B. Medford, Donors An Attribution photo CAN BE ADDED CROPPED TO 72x72

COLUMN CONTENT 2, 3 OR 4 COLUMNS - Ways to open a fund


This is the simplest, most convenient way to start a fund or add to an existing one. Your gift of #10,000 or more can start a fund. Gifts of any size may be added to an existing fund.

Appreciated Property

Real estate, appreciated securities and closely held stock are all suitable gifts and may be deductible as a charitable contribution. Capital gains taxes can be avoided in most cases, and deductions.

Retirement Accounts

If you hold a qualified retirement plan, you can name the Foundation as a beneficiary.

Life Insurance

Designate The Commuity Foundation as the owner and irrevocable beneficiary of a life insurance policy, and you can enjoy an immediate tax deduction as well as deductions on future premiums.

IRA Accounts

If you'd like to give your IRA assets to specific organizations through The Community Foundation, please contact us.

Private Foundation

When you transfer the assets of a private foundation to create a donor advised fund at The Community Foundation, you free yourself from administrative tasks and have a team of experts to assist you in your strategic philanthropic goals. Your foundation can retain its name, purpose and grantmaking discretion. We take care of the administrative functions, reporting and financial management -- all for lower fees than most private foundations. Learn more about private foundations.


This content can be

a list

linked to a file


linked to a page within the site or a different website.

Contact Us --- created using the Properties "BUTTON"

CALLOUT (can have links to files, websites, etc) text must be centered..... about Haywood County and download our printable brochure..

  • this is an image gallery
  • this is an image gallery
  • this is an image gallery

CALL TO ACTION (CTA) - no links to files ONLY URLS OR INTERNAL PAGES -- Ready to join our community of givers? Connect with us today.


Block - Table

Add "head"to add aheader to the table
Insert a tableenter contentadd or remove rows and columns

The word document that you created your pdf from, it has a Properties section within the "Info" tab. Here the "Title" can be edited, because if the file has been copied that information isn't automatically updated from the original file's Title. The information is used for the tab when opening the PDF file within a web browser.

this is the content block.

Editing Notes for Craft

Uploading a PDF - use the icon with the rectangle with an arrow coming from the top center. Highlight the text you want to be the link, click on the upload icon. The left side of the popup window will have the Assets directory, select what directory you would like the file to be in and then click the Upload Files button in the lower right corner. More about uploading files and images - If you are replacing an image or pdf file or any file that is linked on the website, IF the new file is named exactly the same thing, you only have to drop the new file (and select to replace) into the correct asset folder and the link will show the new file. Works for secure files and regular files. The view of all images or files are in the "assets" folder - select the correct subfolder, here you can remove files
when you Save and continue editing the page refreshes to the top.

no "undo key" -
Undo on windows: “CTRL + Z”
Redo on windows: “SHIFT+CTRL + Z”

Copying Bulleted lists: (hint) copy and pasted bulleted lists INTO the HTML, then recreate the bullets in the edit box.

Redirect: If you want to create a page so a new link shows under a menu but it is for access to a page already created. See: Donors\Investments and Financial Information - the actual Investments and Financial Information entry is located under About, all edits happen there. The entry for Finance and Investments under Donors is a place holding entry with the Redirect tab you see when editing the page - pointing to the About/Financials entry.

Page links - slugs - If a page is linked from another page, the “slug” is used. So if we update slugs on a page we should also update any links to that page. If you "duplicate" a page, remember to update the slug - it defaults to the name of the original page +1.

Disable a block: you can remove a block from the page view without deleting it (if you are waiting on content or an image or a certain date) using the cog wheel in the upper left corner - select disable.

If you are using CTA (call to action) and the page is internal, don't use the "full url" use (example) /affiliates/the-fund-for-haywood-county/advisory-board-members (remove the https://cfwnc...)

a block: the ACTIONS drop down in the upper right corner of any “Block” (block is the same thing as a module in our old system) and pick what you want to add from the drop down menu. Delete the block the same way. If you are looking for other blocks to add use the design standards page for examples (you are on this page now!) . This has examples of all blocks and some limitations (for instance some blocks text can only be centered) which you may find helpful.

the affiliate box titles - use the affiliate page Page Header will change both the page and the box titles.

Stories - News/Events

If you have access to create stories you will need to have these instructions for creating the story and placing it in the correct category so it shows up on the correct page: Instructions here.

Events - Under Entries/Media - select EVENTS.

Click on "+ New Entry"

For events in website

When adding News or Publications items, if you want the default banner select the category in the new News item (either news or publication) to have the default banner on the article/publication.

Google Analytics - reports for page hits, pdf views and downloads including pdf files uploaded to the secure site.

If you don't have a Google Analytics login, request the report from the IT Director. Please include the dates, pages and if applicable pdf file names you would like a report on. For secure files you can request by department/area - Affiliates, Women for Woman, CFWNC Board but also include the dates, each file within that area that has been accessed within that date criteria will show on the report..

If you have a Google Analytics login from the admin dashboard select Events/Overview. Two reports setup - see the right side of the page:

Under Event Category - PDF Download (files outside of the secure pages) and Advisory Board Protected link view.

When the selection is open, select Event Action from the choices above the output.

From the Event Action view, select Secondary Dimension and from the pop-up, under Commonly used select Event Label.

Now the report includes the webpage where the pdf file is linked.

For more information on the Google Analytics reports see this document.

Note: for the non secure pdf files, select (from Commonly used) Page as the Secondary Dimension (to show the page url where the file is linked).


Retour (Craft Plugin) -- Intelligent 404 redirect handling
Log into the cfwnc website as an administrator (currently me, Lindsay and Angela)
Click on ReTour
The dashboard will appear and list the 404's.

These are INCOMING REQUESTS. The links under the file not found URL (404) is where another website or newsletter linked TO on our site. the last referral url is where the link generated...

Retour allows you to have dynamic redirects that have access to the data in your entries when matching URL patterns.

Retour offers true multi-site capability, allowing you to have redirects that affect only certain sites, as well as all sites

Some redirects are for favicons or icons (renamed by vendor) and can be delete (select row(s) and use the cog wheel at the top of the list, select delete.

IT director checks and updates monthly (last friday of the month)


Login and platform location for ATOM SEO on the Technology list of administrative logins. Run a broken link report. This report reflects links ON our site out to to other sites.


All Secure files are all located in Assets. Click on >Affiliates (don’t drop it down)

- only users with Affiliate Admin access can remove or add files to this folder. This is the place secure page editors can remove or upload new files by dragging new files into the folder and dropping from a place on their computer or shared drive. Be aware that files are owned by several people and only manage your own files. This access also gives edit security to other assets you may not have edit rights to, please be careful when removing or uploading files to these folders that you are in the correct location.

All files uploaded to this page are securely uploaded, ALL secure pages share the one file folder for secure assets so you may want to name your files with some prefix that helps you find them quickly. The search feature works well. You can select many files and drop them into the folder, if there is a duplicate file in the folder you will be prompted to replace the file or create a copy.

uploading gif files to the secure site (for logos):
Compress all the logos into one zipped file.
Then make sure to use the button “Documents” to ensure the file gets uploaded to the protected folder.

Editing Secure entries (these are “pages”... entries... pages):

Log in

Entry locations for three separate entries:
Advisory Board Login/

About/CFWNC Board Login/

About/Staff Login/

Initiatives/WFW Login

  • Each of these entries have a hard coded landing page. The top level secure page for each (currently there are not any secure sites with more than one page). The landing page is hard coded by envision programmers, if we want to change it ourselves we can use retour to send anyone from the old landing page to the new landing page.

Secure entries are divided into to two sections, the “above” section you can add regular blocks that contain instructional information, images, image galleries, any block available on any page. You can add additional blocks, but blocks can’t be added under or between secure files. Just like editing any entry that isn't secure: Adding a block: the ACTIONS drop down in the upper right corner of any “Block” (block is the same thing as a module in our old system) and pick what you want to add from the drop down menu. Delete the block the same way. If you are looking for other blocks to add use the design standards page for examples (you are on this page now!) . This has examples of all blocks and some limitations (for instance some blocks text can only be centered) which you may find helpful.

Add a new secure file:

At the bottom of the Secure Documents section use the “Add a Secure Document” button, using the “Actions” menu on any Secure document block, add a secure block above or using the “X” on an existing secure file remove that file and then upload a new file.
When you click to Add a New File – it can be uploaded or dropped into the popup menu.
The Title of the block is the text that will display over the secure linked file.
You can move blocks around by grabbing the “reorder” button (for dots in a diamond shape)
use the button “Documents” to ensure the file gets uploaded to the protected folder.

If you remove a secure file from the Affiliate folder but keep the link you will receive this error:

"Could not save Entry"

The entry save error was caused by one document in that matrix no longer existing - the document title is "[Fund Statements] 07/01/2019 - 09/30/2019". The entry would not save because the document (asset field) is required.

What most likely happened is that the document was originally added to that matrix and, at some point, deleted from the assets section of the site, removing the reference in that particular block.

The front-end error was related to that missing document. Craft will complain and throw errors if you try to access a value, like an asset URL, when the asset field is empty. We have put in a check to make sure that field has a value before trying to output the URL. That will prevent front-end errors if something like this should happen the future.

Going forward if you get more "Could not save Entry" errors, you should scroll down the page and look for missing required fields, or secure files within a secure file record.

the location of all secure files

Creating CFWNC Board and CFWNC Affiliate Advisory user accounts

  • Donor Relations Associate (CFWNC Board) and Development Associate (Affiliate Advisory) create new users, remove existing users and manage access to the the secure pages. Program Associate acts as backup to Development Associate. IT Director for Donor Relations Associate.
  • Security for this access is within the Affiliate Secure Group which also gives access to the secure documents folder, note there are users within Affiliate Secure Group that do have access to this feature.

If a user forgets their password, send them to the site login page and they can use the Forgot Password? link. If a user is unable to receive any email from the site (some servers could reject it) the IT Director can create a login account for the user. Directions for the IT director: Using the cog wheel on the users account copy the password reset url and either send it to the person using the cfwnc email or create the password for the user.

Editing the Styles in CSuite so the background and footer of the Public Donation pages and the Online Fund Access pages will look like the website.

Sally, Julie and Lindsay have access:

Log into CSuite. Core/System Data/ Styles

the left menu contains different style sheets for different portals. We use:

  • Donor Portal Style (Online Fund Access style sheets - background header and footer)
  • Donor Portal Affiliate Style (this bucket contains 9 styles, one for each affiliate) - not sure if there will be affiliate donor portal use or not but should be copied from the Donation Portal Affiliate Style if they are ever used)..
  • Donation Portal Style (main donation page with all public and second page funds)
  • Donation Portal Affiliate Style (this bucket contains 9 styles, one for each affiliate)

You can find the envision created styles in each page by this line of commented out coding:

/* –––––––––––––– all styles below are from envision –––––––––––––– */

Within each style sheet editor you can see Banner HTML and Footer HTML

This is where the editing is done by cfwnc staff

Change or add text or images using html coding -- the annual change will be the date after the @ for each style page.