Scroll

Ask Buddy

Follow

Edit Home Page HTML & About Us HTML tabs Print Article

HOW TO...

BidPal's Fundraiser has 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 > Fundraiser > 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: These help 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 Fundraiser 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 Fundraiser 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 Fundraiser 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 Fundraiser page also stays open) or in the user's current tab (replacing your Fundraiser page).
 

STORING AND CALLING IMAGES

The Images you use in your Fundraiser HTML panels will need to be hosted on another site. You may choose to use a photo sharing site such as Picassa, 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 Description: If you would like a small popup instruction to appear when someone mouses over your Fundraiser image, type in that text here. For example: "Photo courtesy of Bader Photography"
  • Dimensions: Set the width of the image to make it fit a % width of your site. You can leave height blank, as the constrain proportions checkbox will automatically adjust based on your width.  The maximum width of your Welcome and About Us panels is 544 pixels for Legacy Giving Center customers, and 100% for BidPal One Fundraiser customers. If you'd like images to not span the entire width of the page in BidPal One Fundraiser, try something between 60% and 90%.  Be sure to check how it looks on your mobile device as well!

    Tip! While shrinking an image usually maintains its resolution, stretching an image to a larger size than the original usually distorts and pixelizes it.

  • Constrain Proportions: If you want to keep your image's proportions, leave this checked and change either the width or the height to have the image change proportionally.

While some of the aforementioned photo sharing sites make it very clear how to 'call' your image in your Fundraiser, 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. A Google search on the topic will help you find that by switching that address to dl.dropboxusercontent.com/a/ourimage.jpg, you now have the actual image website URL to call.

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 BidPal
  • In BidPal Planner, click the Insert/Edit Image button in the Home Page HTML tab of Fundraiser 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)
  • Make sure your constrain proportions checkbox is checked, change the first dimension to 544 pixels for Giving Center Legacy customers, or 100% for BidPal One Fundraiser customers, then click OK
  • 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>BidPal</B>.  OR

Please visit <STRONG>BidPal </STRONG>.

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

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

Please visit <EM>BidPal</EM>.

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

Please visit BidPal.

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

Please visit BidPal.

Strikethrough: <STRIKE></STRIKE>

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

Please don't visit BidPal.

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 BidPal.</I></U></B>

Result:  Please visit BidPal.

 

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 with the Fundraiser:

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 Fundraiser will be placed inside of BidPal's own HTML page. It is possible that your code may include unexpected conflicts with BidPal's 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.bidpalnetwork.com">BidPal</a>
Result: Click here: BidPal

 

Example (Link to File): Click here for the <a href="http://www.bidpal.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@bidpal.com">support@bidpalnetwork.com</a>
Result: Send an email to: support@bidpalnetwork.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

Tip! The legacy HTML section is 544 pixels wide, if you want to maintain equal left and right borders.  If you reference an image larger than that, your image will not shrink down, but will distort the page instead.  For BidPal One customers, we recommend using percentages for your image widths/heights in order to resize responsively.

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/bidpal-logo.gif"/>

Result:

  
 

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 BidPal. <br> Happy bidding!

Result: 

Welcome to BidPal.
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 in Fundraiser)

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 the Fundraiser is to create a list of images, with each image being a button that is hyperlinked to a page on the Fundraiser (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 *