Scroll

Help Center

Follow

EDIT HTML FOR GIVING CENTER CUSTOM PAGES Print Article

HOW TO...

OneCause Giving Centers have customizable pages, including the Welcome page, About Us page, and any additional pages you choose to add. Setup for these panels can be found in Planner under Setup > Giving Center > Custom Pages.

Each page has the easy-to-style capability using a What-You-See-Is-What-You-Get (WYSIWYG) editor, as well as offering full HTML access for advanced users.
 

setup_fundraiser1.PNG

setup_fundraiser3.PNG

 

Please click on links below to jump to sections:

      What-You-See-Is-What-You-Get Editor (WYSIWYG)
            Hyperlinks
            Storing and Calling Images
      Advanced HTML Coding


What-You-See-Is-What-You-Get Editor (WYSIWYG)

The WYSIWYG Editor Toolbar options are:

  • Font Family: Choose from 17 existing fonts. Want to get more creative? Design an image that includes words and use that instead.
  • Font Sizes: Make important text and headers large and easy to find.
  • Bold (B), Italicize (I) & Underline (U): Use these to highlight important information.
  • Font Color (A): Find a complementary color to match your theme.
  • Bullet Points & Numbered List: This helps break up blocks of text and make them more readable.
  • Align/Indent: Center, left- or right-justify and indent or un-indent.

Tip! Less is more. Don't overwhelm guests with too much text, too many colors, or too many images. The best Giving Center sites are focused on making it easy for guests to buy tickets, make donations, and shop; don't distract with unnecessary additional information!

  • Links: Create a hyperlink to another website (for example: "http://www.[ourorg].org") or another Giving Center page (for example "https://portal11.bidpal.net/Portal/bpe280541/main/home.html") (see Hyperlinks for more details)
  • Images: Reference images you host on another site (see Storing Images for more details) and adjust their size.
  • Tables: Add a table to your Giving Center with rows and cells to stack information and images. 
  • Toggle to HTML view (<>): The WYSIWYG editor creates HTML code for you, but you can toggle to the classic HTML editor to add additional HTML code such as unique colors, unusual features, and videos (see HTML coding for more details).
 

HYPERLINKS

When creating a link using the WYSIWYG hyperlink button, you have the following options:

  • URL: This is the full address of the page you are linking to. This usually begins with an "http://" or an "https://"
  • Text To Display: This is the text you want users to see as an underlined, clickable link. You can see in this example which two words will be the hyperlink: "To learn more click here." 

  • Title: If you would like a small popup instruction to appear when someone mouses over your link, type in that text here. For example: "Click this link for more information about our important mission."
  • Target: Choose whether the link will open in a new tab (so your Giving Center page also stays open) or in the user's current tab (replacing your Giving Center page).
 

STORING AND CALLING IMAGES

The Images you use in your Giving Center HTML panels will need to be hosted on another site. You may choose to use a photo sharing site such as Picasa, Flickr or Dropbox to host the images and then 'call' them by using the Image button on your WYSIWYG toolbar.

  • Source: This is the full URL of the image (for example "http://www.[ourorg].org/images/OurLogo.jpg").

         image_edit.png

  • Image Description: If you would like a small popup instruction to appear when someone mouses over an image, type in that text here. For example: "Photo courtesy of Bader Photography"
  • Tip! While shrinking an image usually maintains its resolution, stretching an image to a larger size than the original usually distorts and pixelizes it.

While some of the aforementioned photo sharing sites make it very clear how to 'call' your image in your Giving Center pages, others have specific parameters on how to 'call' the image, which might take some investigation on your part.

For example, your Dropbox image may say that it is at www.dropbox.com/a/ourimage.jpg, but that URL is actually a Dropbox page, not the image itself, which will result in an error if referenced in your HTML. 

Tip! DropBox tends to be the site that is most difficult to navigate when trying to reference the source code of a public image.  If you are running into issues, try the following steps:

  • Upload your picture to the Files page of your Dropbox account
  • Once it's completed, hover over that line item and click the Share button
  • In the popup for Share, click the blue 'Create A Link' hyperlink on the right side
  • Click the 'Copy Link' hyperlink that appears. This will copy the URL to your clipboard so you can paste it into OneCause
  • In  Planner, click the Insert/Edit Image button in the Home Page HTML tab of Giving Center settings
  • In the pop up, right click in the Source field and Paste.
  • IMPORTANT!! You need to make a small change to this link you just pasted for it to be viewable by the public. Go to the front of the link and replace only the www with dl (lowercase DL)
  • Save your settings changes
 

Advanced HTML Coding

If you want to edit the HTML of your site directly instead of using the WYSIWYG editor, use the information below. You can find additional information on many websites such as the W3Schools.

Please click on links below to jump to HTML sections:

Font Style (Bold, Italic, Underline, etc.) in HTML
Font Properties (Font Face, Color, Size, Alignment) in HTML
Hyperlinks in HTML
Images in HTML
Bulleted Lists in HTML
Line Breaks in HTML
Tables in HTML
Embedding Video in HTML
Custom Buttons in HTML

 

FONT STYLE (Bold, Italic, Underline, etc.) in HTML

The following are some basic text formatting tags available to you.

Tag Example Result

Bold: <B></B> or <STRONG></STRONG>

Please visit <B>OneCause</B>.  OR

Please visit <STRONG>OneCause </STRONG>.

Please visit OneCause.
Italic: <I></I> or <EM></EM>

Please visit <I>OneCause</I>.  OR

Please visit <EM>OneCause</EM>.

Please visit OneCause.
Underline: <U></U> Please visit <U>OneCause</U>.

Please visit OneCause.

Shrink: <SMALL></SMALL> Please visit <SMALL>OneCause</SMALL>.

Please visit OneCause.

Strikethrough: <STRIKE></STRIKE>

Please <STRIKE>don't</STRIKE> visit OneCause.

Please don't visit OneCause.

Subscript: <SUB></SUB>

Please drink plenty of H<SUB>2</SUB>O! 

Please drink plenty of H2O!

Superscript: <SUP></SUP>

Everybody knows that fact.<SUP>(citation needed)</SUP>

Everybody knows that fact.(citation needed)

 

Combinations: You can easily combine the tags together for one text section. Be sure to nest them correctly.

Example:  <B><U><I>Please visit OneCause.</I></U></B>

Result:  Please visit OneCause.

 

FONT PROPERTIES (Font Face, Color, Size, Alignment) in HTML

Use <p> tags and add the style attribute.  The style attribute can include any number of various properties to define your text.  The properties should be separated by a semi-colon, with the entire string of properties enclosed in quotation marks.

Here are some important style properties you can use:

Property Description
color: [ hexadecimal code or color name ] Changes the font color.
background-color: [ hexadecimal code or color name ] Adds background highlight color.
text-align: [ center, left, right, or justify ] Aligns text on the page.
font-family: [ ’Font Name’ ] Adjusts font; font name should be enclosed in single quotes.

NOTE about Font Families: The HTML code you are adding to your will be placed inside of OneCause HTML pages. It is possible that your code may include unexpected conflicts with the OneCause master page that may prevent your font family from displaying as you planned. It is also possible to choose a font that will not display in certain browsers because of your users' settings. If the font you have selected is very important and is not displaying, we recommend not using HTML to set the font. Instead, consider designing your text in a graphics or word processing program, then taking a screenshot of it so that your HTML Welcome Section is actually showing an image, not HTML fonts.

font-size: [ ##pt ] Adjusts text size.

 

Example: <p style="text-align:left;font-size:12.0pt;color:#3366FF">This is my formatted text!</p>

Result: This is my formatted text! 

Tip! For information about which color names/hexadecimal codes are available, see the following resource: http://www.computerhope.com/htmcolor.htm

 

HYPERLINKS in HTML

You can create hyperlinks to websites/files within your text.  You can also link directly to a file (e.g. .pdf, .doc, .xls) that is hosted on a web server.  There are two important pieces to set in a link tag: <a href="URL">Link text</a>

  • URL:  This is the absolute location of the page/file you are linking to. It should be enclosed in quotation marks.
  • Link text:  This is the text that will appear to the user to click on. There is no character limit on the link text.

 

Example (Link to Webpage): Click here: <a href="http://www.onecause.com">OneCause</a>
Result: Click here:OneCause

 

Example (Link to File): Click here for the <a href="http://www.onecause.com/docs/downloads/integration-setupguide.pdf">PDF document</a> describing our integration setup.
Result: Click here for the PDF document describing our integration.

 

Example (Link to Email Address): Send an email to: <a href="mailto:support@onecause.com">support@onecause.com</a>
Result: Send an email to: support@onecause.com

 

IMAGES in HTML

You can use the <img> tag to insert pictures into your HTML.  The <img> tag supports several common attributes:

Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymous
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels OR percentage Specifies the height of an image; e.g. "500px" for an image that should remain 500 pixels regardless of screen size, or "75%" to responsively resize to be 75% of the height of the screen at any time
src URL Specifies the URL of an image
usemap #mapname Specifies an image as a client-side image-map
width pixels OR percentage Specifies the width of an image; e.g. "750px" for an image that should remain 750 pixels regardless of screen size, or "75%" to responsively resize to be 75% of the width of the screen at any time

 

For images to work properly you'll need to have either:

  1. The images hosted online on a web server, or
  2. The absolute URL (location path) of the page/file you are linking to.

Example: <IMG src="http://www.[ourorg].org/images/onecause-logo.gif"/>

 

Result: OneCause_Letterhead.jpg

  
 

BULLETED LISTS in HTML

Unordered / Bulleted lists:
You can create a bulleted list with the following HTML tags.  The UL tag supports the "list-style-type" attribute so you can use different types of bullet points.


Example:

<UL style="list-style-type: disc; margin-left: 15 px;">
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</UL>

Result:

  • Item one
  • Item two
  • Item three

Available Bullet Points:

  • <UL style="list-style-type: disc;"> - filled circular bullet
  • <UL style="list-style-type: circle;"> - unfilled circular bullet
  • <UL style="list-style-type: square;"> - filled square bullet
  • <UL style="list-style-type: none;"> - no bullet

 

Ordered / Numbered lists:
You can create a numbered list with the following HTML tags.  The OL tag supports the Type attribute so you can use different types of numbers, and the Starts attribute so you can start at a number other than 1.

Example:

<OL>
<LI>Item one</LI>
<LI>Item two</LI>
<LI>Item three</LI>
</OL>

Result:

  1. Item one
  2. Item two
  3. Item three
 

LINE BREAKS in HTML

For simple line breaks, use <br>.

Example: 

Welcome to OneCause. <br> Happy bidding!

Result: 

Welcome to OneCause.
Happy bidding!

 

TABLES in HTML

Tables are a useful way to structure your HTML section.

Example:

<table width="544" border="1" bgcolor="#CCCCCC">
<tr>
<td width="260" valign="top" align="center">First column</td>
<td width="39">Spacer</td>
<td width="260" valign="top" align="center">Second column</td>
</tr>
</table>

Results:

First column Spacer Second column
 

EMBEDDING VIDEO in HTML

Here are steps for embedding videos from YouTube and Vimeo.

To embed a video from YouTube:

Go to the YouTube video and click the Share button below the video

Choose the Embed option

Click the Show More option and choose the Video Size that works best for the rest of your content

NOTE: For equal sized left/right borders on the page, you may want to consider using a custom size of 544x306.

Above the preview, copy all of the text in the box that starts with '<iframe…'

Click the Source Code button in your WYSIWYG editor and paste this text in to your HTML code wherever you would like your video to appear

 

To embed a video from Vimeo:

Go to the page of the Vimeo video

Mouse over the video and click the paper airplane that appears in the upper-right hand corner of the video

Under the Embed option of the window that pops up, click the Show Options button

Choose the size you would like (the default 544x306 will evenly fill the Welcome pane)

Choose any of the other default settings you would like, such as autoplay or looping

Above the video, copy the text that starts with '<iframe…'

Click the Source Code button in your WYSIWYG editor and paste this text in to your HTML code wherever you would like your video to appear


CUSTOM BUTTONS in HTML

The simplest way to create buttons on your Giving Center is to create a list of images, with each image being a button that is hyperlinked to a page on the Giving Center (or elsewhere).

To accomplish this, use the following previously described HTML tags in conjunction:

  • An <a> tag that contains an <href> attribute that points to the button's target page or URL (see Hyperlinks section for more)
  • An <img> tag to contain the image that will be used as the button (see Images section for more on creating & hosting images)

Nest the <img> tag within the <a> tag as shown in the example below. Repeat this process to create as many buttons as desired, each of which can link to a different page.

Example:
<a href="https://portal11.bidpal.net/Portal/bpe270602/catalog/item.html?id=3&categoryId="><img src="https://s3.amazonaws.com/support-resources/BPE270602/Vases.JPG" height="100" width="350"/></a>
<a href="https://portal11.bidpal.net/Portal/bpe270602/catalog/items.html?itemType=5"><img src="https://s3.amazonaws.com/support-resources/BPE270602/donate.JPG" height="100" width="350"/></a>

Result:

 

For more information on using image maps, see the following resources:

W3Schools

HTML 5 Tutorial

Have more questions? Submit a request

Comments

Chat with Us

Please enter your name and someone will be available to assist you.

Name *


Email *


Phone Number *


BPE or Organization *