Adobe Community : Document List - Documents

Customizing Shopping cart is empty. Continue Shopping message

forums_noreply@adobe.com — Mon, 21 May 2012 06:14:26 GMT

In this solution you'll have to suppress the alerts and display the messages from within them inside the body. Then you'll make a call to a web page using Ajax and render that page inside the cart.

So, first you need to download the following 2 files and upload them to your site:

http://mgnewsyd.worldsecuresystems.com/emptycart.js

http://mgnewsyd.worldsecuresystems.com/jquery-1.4.2.min.js

Then, go to your site-wide template and add the following line inside the <head>. This should be a template that wraps around your shopping cart:

Note that you can use the same method to replace all of the annoying alerts with in-body messages.

Note that there will be two classes rendered in the paragraph that contains the message, alertMessageHolder_success and alertMessageHolder_error. You should style these from within your stylesheet.

e.g.

.alertMessageHolder_success{
--all the proberties that will make this message look nice and positive
}

Fianlly, you need to create a web page with the URL /empty_cart_page.htm. That page will be called and displayed instead of empty shopping cart message. You can place anything you want in there. Make sure to disable the template on that page.

http://mgnewsyd.clubcardwebsites.com/books/business/the-fairtax-book

New Content Editor for Business Catalyst users

forums_noreply@adobe.com — Wed, 13 Mar 2013 14:26:39 GMT

Overview

InContext Editing will be replaced with a newly designed experience that is focused on preserving the design integrity of the site and is compatible with additional browsers and devices.

How to use the new editing experience

Enabling the feature

Enabling this feature under Site Settings > Beta Features > Content management > Upgraded Content Editor will replace the 'Content' tab from the main navigation ribbon (which links to the existing InContext Editing feature) with an 'Edit' tab that links to the new Editor.

Defining editable content

In the Edit Page in Admin, or using the File Manager, you can mark elements from the page's content to be Editable Regions by using a custom attribute on those elements:

<div ice:editable="editable region type">
     SBO editable content here
</div>

List of ice:editable values:

line

single line text; all formatting and break lines are ignored
can applied only to: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div

multiline

multi line text; break lines are allowed, all formatting is ignored
can applied only to: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div

image

change and resize image; image is server side resized using dimensions defined on the img tag
can be applied only to: img tag
Default folder for uploading new images can be defined in a tag of the page. For example adding this meta tag below to your page or template will pre-select the "/images" folder whenever you select "From My Computer".
```
<meta name="upload-root-folder" content="/images" />
```

link

change link; can insert internal (site) or external links
can be applied only to: "a" tag

html

html text; some formatting is allowed;
partners can specify the formatting elements made available to business owners by adding the ice:options attribute on that tag. You can list the Editor options in the ice:options attribute, comma separated. Separators (for option groups) can be specified using the pipe character "|".
- Options allowed: bold, italic, deleted, separator (|), fontcolor, link, image, unorderedlist, orderedlist, outdent, indent, alignment, alignleft, alignright, aligncenter, justify
- Example:
```
<div ice:editable="html" ice:options="bold,italic,deleted,|,link">
```
can be applied only to: div, td and th tags
images inside html Editable Regions can be edited by clicking on them, which will bring up the image Editor.

section

allows duplication and deletion of an html element
can be applied only to the following HTML tags: tr
other Editable Region types cannot be applied to the same HTML element.
can contain any other Editable Regions types, except other sections
the "Duplicate" action inserts a copy of the section element, right after the section element
the "Delete" action removes the section element and its contents from the document.

content

applied to Content Holder modules, it allows for transparent, in-page editing of Content Holders
the content of the Content Holder itself must be marked with ice:editable attributes from above, to define what is editable within the Content Holder
the Content Holder must be referenced by its name, not by its id. If you reference it by its id, saving will not work
The Content Holder cannot contain another Content Holder

Example:

{module_contentholder,name="Name of Content Holder" ice:editable="content"}

Restrictions on Editable Regions

To assist partners provide a seamless editing experience and prevent users from breaking layouts, we restrict the html tags an Editable Regions can be applied as well as what HTML mark-up is allowed inside an Editable Region.

Editable Regions (of any kind) cannot be applied to any of the following self-closing tags:

<link />
<meta />
<area />
<br />
<col />
<hr />
<input />
<param />

Also, Editable Regions cannot be applied to any of the following inline level tags:

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

Additionally, Editable Regions cannot be applied to any FORM related elements:

<form>
<fieldset>
<legend>
<textarea>
<select>

Other restrictions

Editable Regions cannot be nested
Editable Regions cannot be applied to elements containing Liquid mark-up. Liquid mark-up will be overwritten by its generated HTML if the mark-up is inside an Editable Region.

The following tags are not allowed inside an Editable Region:

iframe, script, map, area, object, embed, video, audio

Using the in-context Editor

Once the Partner has defined the Editable Regions, the SBO can access the Editor to edit the content, by clicking the Edit Tab.

Clicking on the Edit button will open the Editor, displaying the Start Page of the default domain of the site.

To reach other pages, SBOs can click on the various links from a page.
If the link is outside of any Editable Region, simply clicking on the link will navigate to the corresponding page.
If the link is inside an Editable Region, hovering over the link will display a green arrow that indicates clicking on the link is active.

If the link is marked as editable itself, hovering over it will display a context-menu which can be clicked to follow the link.

Only Pages will be loaded in the Editor, other type of content, which is dynamic (blogs, web apps) cannot be open in the Editor.
Only the content of the Page is loaded in the Editor. If the page has a Template set, this will not show up in the Editor. Styles and Javascript defined within the page will be loaded; styles and Javascript defined in the Template will not load.

If the Page does not have any Editable Regions defined, an error message will be displayed: "This page does not contain any content marked as editable."

If trying to navigate to a link that is not of Page type (it's a blog, web app etc.), an error message will be displayed: 'That page doesn't exist, or is of a type not supported for editing.".

Publishing the Page will save the live version of the page.

If the site uses device-specific folders (Settings > Mobile Support), the dropdown from the top bar can be used to access the various device-specific verisions of the current page.

Current limitations

Draft versions of the pages are not supported

Backwards compatibility with markup for InContext Editing

The new Editor supports some limited backwards compatibility with the markup used for InContext Editing.

The ice:editable="*" and ice:editable="<options here>" used in InContext Editing are backwards compatible with the new Editor.

The complete list of options for InContext Editing Editable Regions is:

bold, italic, underline, align_justify, align_right, align_center, align_left, font_face, font_size, indent, outdent, ordered_list, unordered_list, paragraph_styles, background_color, font_color, css_styles, media, hyperlink

Note that this usage is now deprecated, if using the new Editor. The following options: paragraph_styles, css_styles, and media do not have a correspondent with the new Editor and will be ignored.

Repeating groups and repeating regions used in InContext Editing are also compatible with the new Editor.

Adding a domain name to your site and taking site live

forums_noreply@adobe.com — Tue, 13 Mar 2012 02:22:31 GMT

This document will help you take your site live, once you have built your site in trial mode, you're happy with it and want to add a domain name to it.

Step 1. Obtain a domain name

If you have an existing domain, move to step 2.

If you don't have a domain name you have to purchase it from a domain name registrar. Business Catalyst does not sell domain names. Some popular registrars are GoDaddy, NetRegistry, list of top 10 in US. Google for more.

Step 2. Upgrading a site

To add a domain name to a site, you will need to upgrade it first. You can read this detailed tutorial or follow the steps listed below.

If you're a partner you can do this through Partner Portal > My Sites tab. Click on the site you wish to upgrade, click Upgrade Site button and go through the upgrade process.

If you're a business owner you will either need to contact your partner to go through the above steps or you'll need to click the green Upgrade button in the top righ corner of your site's admin console and go through the upgrade process.

Step 3. Pointing/redelegating your domain to your trial site on Business Catalyst

Now that you have a domain name and your site is upgraded you need to point that domain to your trial site on Business Catalyst. You have two options in this case:

1. Redelegate domain to BC's DNS servers

If you choose this option, you are basically giving DNS management to BC's DNS servers. You must use this option if you with to use BC's mail hosting.

Redelagation involves changing DNS server addresses at your registrar to BC's DNS server addresses. When you log in to DNS management tool on the registrar's website you will find a section which allows you to specify DNS servers. This is where you need to enter the following DNS server addrress:

ns1.worldsecuresystems.com (54.236.190.129) - primary DNS server
ns2.worldsecuresystems.com (54.246.209.121) - secondary DNS server
ns3.worldsecuresystems.com (54.252.148.151)

The IP addresses are optional. Som registrars require them and some don't. If the registrar doesn't have the fields for them then you don't need to supply them.

Here is an example of where you would change DNS servers in GoDaddy's control panel.

If you're not sure who your registar is you can obtain this information with "whois" utility. http://whois.domaintools.com/ is a free online whois service you can use.

2. Host your domain with external DNS provider and point A-records to your BC site

If you choose this option you will not be able to host mail on Business Catalyst. In this case your DNS will be managed by an external DNS provider and all you'll have to do is to create A-records that point to Business Catalyst IP address and also define an SPF record for the domain. BC has a few IP addresses for each data center. You will have to know which data center your site is hosted on before you can create an A-record.

The following are the IP addresses for all the BC data centers:

United States data center - 54.236.190.114 or 54.236.189.64 or 54.236.189.61
European Union data center - 54.246.209.120 or 54.246.209.119 or 54.246.209.93
Australia data center - 54.252.148.183 or 54.252.148.191 or 54.252.148.134

To determine the datacenter your site is located on, try pinging the system (*.businesscatalyst.com) or secure (*.worldsecuresystems.com) subdomains for your site. To ping a site, follow these instructions:

On Windows
- go to Start->Run(or search)->cmd.exe
On Mac
- search and open Terminal
Then,
- type in the phrase in italic: ping yoursite.businesscatalyst.com
  - replace yoursite with your subdomain
- Look at the IP you see on the screen - and use it or the other 2 IPs for the same datacenter, at your registrar

*NOTE: you might get "Request timed out" when doing the ping command. This is normal, and it doesn't mean that the site is down

Make sure that you don't forget www subdomain. You will usually have to create 2 A-records, one for your domain and for the www version of your domain. You can also create a CNAME between www and non-www URLs.

SPF changes

If the domain has no SPF record defined, you should add one with the following value:

"v=spf1 mx include:worldsecuresystems.com ~all"

If the domain already has an SPF record, you need to include the following value:

"include:worldsecuresystems.com"

For detailed instructions about SPF records, please read this article.

Step 4. Adding a domain to your site

So, now that your site is upgraded, you have obtained the domain name and pointed or redelegated it to Business Catalyst, you will have to add it to your site to tie in the trial site you've built with that domain name.

Log in to admin console of your website by appending /adminconsole to the staging/trial URL
Select Site Settings -> Site Domains and then click New Domain.
The Add New Domain modal will pop-up, enter your domain name in its plain format (e.g mydomain.com).
If you have not redelegated your domain name, expand the Advanced section and select the 'Use and external DNS server' option
Click Save.

See this tutorial for detailed instructions.

Domain name FAQs

See Domain name FAQ

Customizing Web Forms

forums_noreply@adobe.com — Tue, 03 Jul 2012 01:56:19 GMT

Customizing an Auto Responder
Disabling an Auto Responder
Disabling the Secure Zone login details email
Customizing your Web Form after inserting
Collecting anniversary dates using a date picker
Customizing your Web Form using the 'Customize Web Form' option
Combining the first name and last name into a full name
Attaching web forms to Contacts instead of Cases
Adding multiple file attachment fields to the web form
Preventing autocomplete on web form fields
Redirecting the Web Form confirmation page
Pre-populate web form fields
- Editing form fields to insert module tags
Setting up a form to email using Web Forms

Customizing an Auto Responder

You can customize the way that auto-responder emails are sent to people filling in your web forms.

Within the Site Manager options you need to go to Web Forms, click on the relevant Web Form and click on Setup Auto Responder.

Fill in the following fields:

Email From Address - Use the following format: "John Smith" johnsmith@yourdomain.com
Email Subject
Email Format - HTML or Text (Text emails are less likely to be blocked by a spam filter)
Template - You can choose an HTML template. Edit these in Admin -> Manage Site-Wide Templates

To personalise the response, you can use the following tags (click on the "Tag Manager" icon in the editor):

{tag_emailaddress} Email address of the recipient (email address must be present on form)
{tag_recipientname} Full name of the recipient (firstname and lastname must be present on form)
{tag_webformresults} Summary of the form that was filled out (only use if email format is HTML)
{tag_recipientfirstname} First name of the recipient (first name must be present on the form)
{tag_recipientlastname} Last name of the recipient (last name must be present on the form)
{tag_verificationurl} The verification URL for customer to select and opt-in to your newsletter

Disabling an Auto Responder

You can disable the auto responder if desired. To do this, you will need to alter the form action URL by adding &SAR=False

For example:

action="/FormProcessv2.aspx?.....&SAR=False"

Disabling the Secure Zone login details email

Upon creating a webform which collects the username and password fields and subscribes the submitting contact to a Secure Zone an email is sent to the submitter with the login details he can use for that secure zone. If you wish to disable the sending of this email simpy append the following to the action URL of the webform:

action="/FormProcessv2.aspx?.....&SWE=False"

Customizing your Web Form after inserting

Use this method when customizing an individual form, used only in one place. Web forms are customized after they are inserted on a web page and you can then customize it by editing the HTML code, adding CSS classes or replacing buttons with images. You can also re-arrange the fields. Any customizations you make will only affect the copy of the web form on the page.

Note: Its important that you test the web form after making changes to it by making a few submissions through it. This ensures that whilst customizing the web form you have not broken the form.

If you make changes to your web form via Modules -> Web Forms then you must re-insert your web form on any web page where the web form was previously placed.

Collecting anniversary dates using a date picker

For each customer you can store up to 5 anniversary dates. These dates are used for loyalty email campaigns. Refer to an earlier section for more details. To capture this information, include the following your web form:

<input name="Anniversary1" id="Anniversary1" readonly onfocus="displayDatePicker('Anniversary1);return false;">

You can also replicate the above for anniversaries 2 to 5, e.g. Anniversary2, Anniversary3 and so forth

Customizing your Web Form using the 'Customize Web Form' option

Use this method when you have inserted the Web Form as a module. This method allows you to make a change to the form via the 'Customize Web Form' option and have this automatically update throughout the site where you have inserted the web form as a module:

When updating the web form via the 'Customize Web Form' option, this allows you to update all instances of this form from one central place.

Note: You can not insert a web form as a module in your Registration(buy) layout for your ecommerce shop as this must be inserted as HTML.

Combining the first name and last name into a full name

You can combine the First Name and Last Name fields of a web form as a single 'Full Name' field by modifying the Form HTML Code, and changing the First Name input HTML Code to 'Fullname'....

For example, this field:

<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /></td>
</tr>

Can be updated like this:

<tr>
<td><label for="FullName">Full Name <span class="req">*</span></label><br />
<input type="text" name="FullName" id="FullName" class="cat_textbox" maxlength="255" /></td>
</tr>

Then delete the 'Last Name' input field alltogether.

You will need to update the javascript validation at the bottom of the form. You will need to look for the following:

if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");

You need to remove the last name part completly. Delete:

if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");

You will then need to update the FirstName references to FullName as below:

if (theForm.Fullname) why += isEmpty(theForm.Fullname.value, "Full Name");

A quick example of this can be found here: http://jsfiddle.net/yeqgU/2/

Once completed, the system will separate a fullname (i.e. Tom Jones) into a first and last name (i.e. Firstname-Tom, Lastname-Jones) upon form submission.

Attaching web forms to Contacts instead of Cases

Sometimes you want to attach a custom web form field to the customer record rather than the case. You can do this by simply appending a variable to the action URL of the web form

Append ECRM=1 to the action URL of the web form

Example:

action="/FormProcessv2.aspx?WebFormID=11557&OID=248384&OTYPE=1&EID=0&CID=0&ECRM=1

Adding multiple file attachment fields to the web form

To add multiple file attachment fields to your form, you can simply copy the HTML code of the original field and paste it between the <form> tags.

This is the example of the code:

<input name="FileAttachment" class="FileAttachment" class="cat_textbox" type="file">

You can also change the name and id of the new field in the following manner:

<input type="file" name="FileAttachment1" id="FileAttachment1" class="cat_textbox" /><input type="file" name="FileAttachment2" id="FileAttachment2" class="cat_textbox" />

This will then allow you modify the JavaScript validation if you would like to make any of these fields mandatory.For example, where you see:

if (theForm.FileAttachment) why += isEmpty(theForm.FileAttachment.value, "File Attachment");

You can change the (theForm.Fileattachment1) to look like below:

if (theForm.FileAttachment1) why += isEmpty(theForm.FileAttachment1.value, "File Attachment");

duplicate this for fileattachment2.

Please have in mind that the upload cannot exceed 150 MB and only the first file will be included in the workflow notification even though multiple files are uploaded.

Preventing autocomplete on web form fields

A lot of browsers have an 'AutoComplete' function which enables them to 'remember' previously submitted information to that for firld.

If you don't want to the browser to pre-populate the field you need to place autocomplete="off" attribute into that field.

For Example -

<input type="text" maxlength="255" class="cat_textbox" autocomplete="off" id="FirstName" name="FirstName" />

Redirecting the Web Form confirmation page

To redirect a Web Form submission to the another page, you will need to go to the page you have placed the Web Form on and view the HTML of this page. Find the form action URL, this should looks similar to the below:

Change this by appending the below to the action URL:

&PageID=/Results.htm

Where Results.htm is the URL of the page of the next Web Form

For example:

Pre-populate web form fields

You can use the following module tags to pre-populate the form:

{module_fullname}	{module_emailaddress}
{module_firstname}	{module_lastname}
{module_title}	{module_company}
{module_homeaddress}	{module_homecity}
{module_homezip}	{module_homestate}
{module_homecountry}	{module_workaddress}
{module_workcity}	{module_workstate}
{module_workzip}	{module_workcountry}
{module_webaddress}	{module_workphone}
{module_workfax}	{module_homephone}
{module_homefax}	{module_cellphone}
{module_dob}	{module_username}
{module_password}	{module_shippingaddress}
{module_shippingcity}	{module_shippingzip}
{module_shippingstate}	{module_shippingcountry}
{module_billingaddress}	{module_billingcity}
{module_billingzip}	{module_billingstate}
{module_billingcountry}

Note: This only works inside Secure Zones, because the subscriber must be logged into a site in order for the system to recognize them and populate the form with the relevant data.

For security purposes, the billing address of a customer is always stored with the order information (and is never stored with the customer detail records).

When the system displays the billing address using the {module_billingaddress} tag, the system always displays the last billing address that the customer used when placing their most recent order.

You can pre-populate a form's fields using the module tags listed above. Edit the form and place the desired module tags inside the field values.

Editing form fields to insert module tags

Follow these steps to update an existing form's fields to prepopulate the data with the system's data.

Edit the web page that contains the form. Click the HTML tab to view the source code.

Scan the code to locate the field that you want to prepopulate. In the example below, the line of code that creates the text field that contains the subscriber's user name is displayed:

<input class="cat_textbox_small" type="text" name="Username" maxlength="255"/>

To prepopulate this field, add value="{module_username}" to the end of the field code, like this:

<input class="cat_textbox_small" type="text" name="Username" maxlength="255" value="{module_username}" />

Setting up a form to email using Web Forms

You can configure a form to send the data to a user's email address, rather than storing it in the database. This strategy enables you to create simple web form with email functionality that forwards the details of a web form submissions to a pre-designated email address.

To set up a web form to forward the submitted data, follow these steps:

Create and insert a web form on a page.

Update the action URL in the source code of the form to use the format shown below:

action="/Default.aspx?A=Form&Email=You@YourDomain.com&Subject=This+is+email+subject&EmailFrom=yourfromemail@YourDomain.com&PageID=/DesinationPage.html"

In the example above:

&Email=You@YourDomain.com - The email adddress to which the submission is sent. Replace “You@YourDomain.com” with your email address.

    Note: The email address that will be receiving the form submission must exist in either your sites CRM (customer database) or be a admin/email user of the site.

    If the email address being used to receive these form submissions does not exist as a site user or in the CRM, then the email will not be sent. A notification will be sent to the partner of the site advising them of this requirement.
&Subject=This+is+email+subject - The subject of the email. Make sure you separate each word in the subject with the + (plus) sign.
&EmailFrom=yourfromemail@YourDomain.com - The from email address. Replace yourfromemail@YourDomain.com with the email address you want to use for the submission.
&PageID=/DestinationPage.html - The URL of the landing page presented to the visitor after the web form has been submitted.

For more details, see the KB article.

Hiding a retail price for items that are not on sale

forums_noreply@adobe.com — Tue, 27 Mar 2012 00:03:01 GMT

Add the following script to the large or small products layout for an online store:

<script language="javascript"><!--

var onsale_{tag_productid} = "{tag_onsale}";

if (onsale_{tag_productid} == "0") {
     document.getElementById("rrpprice_{tag_productid}").style.display = 'none'; 
}

//--></script>

Then you would assign the following tag ID to a retail price tag

<div id="rrpprice_{tag_productid}">{tag_retailprice}</div>

After adding this script, the retail price will be hidden for every item that is not currently on sale.

Preventing search engines from indexing your in-progress pages

forums_noreply@adobe.com — Thu, 15 Mar 2012 00:30:42 GMT

If you want to avoid search engines (such as Google) indexing your site before it is ready, we recommend the following steps:

1. Create a Content Holder that contains this content:

2. Place the content holder on each template of the site in the 'Head' section of the HTML.

When your site is ready to be seen by the public, you can remove the Content Holder from each template to allow the search engines to index the pages - or simply update the content in the Content Holder to add other metadata that may be useful to improve the ranking of your site, such as search keywords.

Hiding the red X displayed by Internet Explorer when you have empty image fields in a Web App

forums_noreply@adobe.com — Tue, 27 Mar 2012 04:50:58 GMT

In the template or web page, place the following JavaScript in the <head> of the page.

<script language="JavaScript">
     function ImageLoadFailed() {
          window.event.srcElement.style.display = "None";
      }
</script>

Then, in the Web App layout where you the image is displayed, place the following:

<img src="{tag_imagename_value}?Action=thumbnail&Width=80&Height=80" OnError="ImageLoadFailed()" class="right" alt="{tag_name_nolink}" />

Customizing Online Shop Alert Message Strings

forums_noreply@adobe.com — Mon, 19 Mar 2012 04:35:31 GMT

Oshoplang = { 

RemoveError: 'Your custom string goes here (Message displayed when product is removed from the shopping cart)', 

Added: 'Your custom string goes here (Message displayed when product is added to the shopping cart. NOTE: The system will display the number of items added to the cart followed by your message)',

OutOfStock: 'Your custom string goes here (Message displayed when product added is out of stock)',

PreOrder: ' Your custom string goes here (Message displayed when pre-ordered product is added to the shopping cart. NOTE: The system will display the number of items added to the cart followed by your message)',

InvalidQuantity: 'Your custom string goes here (Message displayed when invalid quantity is added the shopping cart)',

CartEmpty: 'Your custom string goes here (Message displayed when the shopping cart is empty)',

CartUpdateSuccess: 'Your custom string goes here (Message displayed when the shopping cart is successfully updated)',

InvalidShip: 'Your custom string goes here (Message displayed when customer tries to check out without selecting a shipping option)',

ChooseState: 'Your custom string goes here (Message displayed when customer tries to check out without selecting a destination state)',

EnterZip: 'Your custom string goes here (Message displayed when customer tries to check out without entering a zip code)',

ChooseShip: 'Your custom string goes here (Message displayed when customer tries to check out without selecting a radio button shipping option)',

IncorrectGForm: 'Your custom string goes here (Message displayed when the gift voucher form in Admin -> More Customization Options -> Online Shop Layouts -> gift Voucher layout is broken)',

EnterGName: 'Your custom string goes here (Message displayed when customer tries to submit the Gift Voucher form without entering the recipients name)',

InvalidGEmail: 'Your custom string goes here (Message displayed when customer tries to submit the Gift Voucher form without entering a proper email address)',

EnterGMessage: 'Your custom string goes here (Message displayed when customer tries to submit the Gift Voucher form without entering a message for the recipient)' 

};

Step 2. Insert Your Customized Alert Messages

Replace the strings within single quotes above (i.e. CartUpdateSuccess: 'Your custom string goes here') with your custom strings, then save the file as "online-shop.js". Note: You must save the file with a .js extension.

Note - make sure the file does not get saved as "online-shop.js.txt"

Step 3. Upload The File

Upload the online-shop.js file using either FTP or the File Manager in your Admin Console.

For this example, we'll upload it to our "/js" directory.

Step 4. Reference The Script In Your Site Wide Template

So that your custom alert messages are rendered on every page of your Online Shop, we'll reference hte JavaScript file in our Site Wide template.

To do this, switch to the HTML mode of the online editor then copy and paste the following code immediately before the </head> tag:

<script type="text/javascript" src="/js/online-shop.js"></script>

Save and Publish the template.

When your online shop is now loaded, the default strings will be overwritten with your custom strings. Your custom messages will be then displayed in the alert window every time one of the actions in the list is performed.

Creating login functionality on eCommerce registration form for return customers

forums_noreply@adobe.com — Mon, 03 Sep 2012 05:16:47 GMT

Introduction

On some occasions you may want to introduce a login form for return customers so that you can get them to log in and pre-populate the registration form with their CRM details from their previous purchase. There are two ways in which you can setup your eCommerce to pre-populate the registration form for the returning customers.

NOTE: additional checkout steps will increase the cart abandonment rate.

Method 1

Go to Site Manager -> Module Templates -> Online Shop Layouts and choose the Shopping Cart layout. Using the Module Manager on the WYSIWYG editor's tool bar simply insert a Generic Secure Zone Login Form into your shopping cart layout. With this form on the shopping cart page customers can either click on the existing 'Checkout' button or choose to fill in the login form and submit it, after which they will be redirected to the checkout registration form.

You also need to add the CRM modules to the registration form fields in order to populate the email address, first and last name, billing and shipping address fields and any other info the modules are available for. To do this you need to use {module_shippingaddress}, {module_shippingcity}, {module_billingaddress} and so forth, inside the value argument of the input field. The full list can be found HERE

Example:

Original field -

<input type="text" name="FirstName" id="FirstName" />

The same field after the above change -

<input type="text" name="FirstName" id="FirstName" value="{module_firstname}" />

Method 2.

In this method you need to add the login form to the registration layout, rather than shopping cart layout as per the method 1 above. Basically, you hide the registration form and reveal the login form, then when the customer logs in you reveal the registration form and hide the login form.

Here's the step by step process:

Go to Site Manager -> Module Templates -> Online Shop Layouts and choose the "Registration (Buy)" layout.
Add the relevant modules to the form so the form is populated if the customer logs in, e.g. value="{module_firstname}". The full list of modules can be obtained HERE.
Wrap the form in a <div> and use css hide it. Make sure you give your div an ID , e.g. <div id="myform" style="display:none;">
Insert a Generic Secure Zone Login box on this page. Make sure that the action URL of this form has ZoneID=-1 in it and apend &PageID={module_pageaddress} to it e.g. action="/ZoneProcess.aspx?ZoneID=-1...&PageID={module_pageaddress}"
Add the following Javascript to your page, which will check if the user is logged in it will display the registration form (add script at the end of the page and remove spaces from the module tag):

            <script type="text/javascript">
                var loggedin = {module_isloggedin}; 
                if (loggedin == 1) 
                    document.getElementById('myform').style.display='inline';
            </script>

If the user is a new user you would simply add some JavaScript to show the form instantly. e.g.

<a href="#" onclick="document.getElementById('myform').style.display='inline';return false;">New User? Click Here to complete purchase</a>

You should also collect usernames and password on the checkout so that the users can use these to log in on the next purchase. To do this, inside the Admin Console, go to Site Manager->Webforms, choose your webform and add the Username and Password fields. Then, re-insert the form in the checkout (registration buy) layout.

Setting up an Amazon CloudFront Content Distribution Network (CDN) for a Business Catalyst Website

forums_noreply@adobe.com — Tue, 21 Jan 2014 14:35:58 GMT

This document will help you setup a CDN for your Business Catalyst Site, through Amazon's CloudFront Service. This will allow browsers to fetch data much faster, as it will be cached on an intermediary server, that is supposed to handle much less requests, hence providing faster delivery times.

Pre-requisites:

- Amazon CloudFront account (http://aws.amazon.com/cloudfront/)

- Live BC Site with at least one domain added

Note: This example will demonstrate the implementation for a site where DNS is hosted with BC. For sites where domains are hosted externally, the same steps apply, just that A and CNAME records are added within the respective DNS hosting provider's console.

Service Description

The way a CloudFront CDN works with BC is this:

CloudFront generates a subdomain on cloudfront.net for your distribution, basically representing a dedicated cache server, which will sync with your BC Site through an A record (a subdomain) and a CNAME, and then start serving content for it. To connect your website with the CloudFront distribution, you'll have to:

- Setup the A record on your site (a sub-domain) and mark it at CloudFront as the origin for the new content distribution.
When there's no cached version for an asset requested by a visitor, CloudFront will fetch that asset from the origin.
It will thus cache it, and any further requests will be resolved from CloudFront, without calling the asset again from the BC server.

- Add a CNAME on your site that points to the domain CloudFront generates for your distribution.

- Finally, reference all assets on your website through the CNAME created.

Step By Step Tutorial

With everything in place, let's assume our website is www.bcwebsite.tk.

The steps to activate your first distribution will be the following:

1. Add an A Record
(create a sub-domain) on your site (pointing to any local page). We've added library.bcwebsite.tk

2. Create a new Distribution on CloudFront

Access https://console.aws.amazon.com/cloudfront/home#distribution and click the "Create Distribution" button. When prompted, select Web as delivery method.

Origin settings

    1. Set your Origin Domain Name. Eg: library.bcwebsite.tk
        Set Origin ID is automatically set to CustomWWW-library.bcwebsite.tk

    2. Set Origin Protocol Policy to HTTP Only (CloudFront will connect to my origin using only HTTP).

Default cache behavior settings

    1. Set Viewer Protocol Policy to HTTP and HTTPS
    2. Set Object Caching to Use Origin Cache Headers
        or choose "Customize" if you want to specify expiry time for objects in the CloudFront cache regardless of Cache-Control headers, through setting Minimum TTL (default 24h).
    3. Set Forward Query Strings to NO
        (unless you want to return different versions of an object based on query strings)

Distribution settings

1. Set Price Class.
If you activate CDN For only Europe and US the cost is smaller. All edge location imply worldwide coverage at higher costs

    2. Set an Alternate Domain Names(CNAMEs) Eg: cache.bcwebsite.tk
    3. You can choose to enable logging. For that you would need to create a Bucket in the S3 Console, required to store web server logs. You'll select that bucket here
    4. Set Distribution State to Enabled

Finally, click on the Create Distribution button. You will see the status as follows:

A domain name has been generated for your CloudFront distribution: d**************q7.cloudfront.net.

The service is now syncing with your site. The Status will change to "Deployed" once it complets, and that usualy takes about 10 minutes.

3. Create a CNAME Record on your site pointing to your new Cloud Front domain name

4. Link assets on your site through the new CNAME

Example:

On any page or template, instead of:

you'll have:

The CNAME you defined earlier links cache.yourwebsite.com to d11********q7.cloudfront.net, so the above reference will be the same with:

Your Setup is ready.

How to protect your website from SPAM submissions

forums_noreply@adobe.com — Thu, 29 Nov 2012 13:38:35 GMT

What is SPAM and why does a website owner encounter SPAM?

Spam is no longer limited to email marketing, but it comes in various forms through websites and blogs that support commenting or forms.

There are several reasons for which a human or an automatic spammer might submit comments and forms with irrelevant information:

Comments
- To bring visitors to the site that the comment or the user is referring
- To link-back (for free) an other website for search engine ranking benefits
Submitted web forms
- Different commercial or scam purposes – I am sending you an offer via the contact form; works just like in the case of email spam

What type of SPAM can you find on your website on your customers’ websites?

SPAM in comments or web forms can be submitted automatically by Spam bots or by humans. Both human spammers and Spam bots get cleverer and cleverer all the time to achieve their goals.

Human spammers improve their text and comments all the time so that they seem as natural as possible; whereas bots improve their ways of bypassing anti Spam mechanisms .

Both types of spammers are equally dangerous, although the content submitted by Spam bots can be more annoying due to the large number of comments or submitted forms.

How can you protect your sites from SPAM

Before listing a series of best practices, I must say that there is no single solution for this, that the process is a continuous one and that the site owner/partner must commit to it on e medium-long time frame.

Human SPAM has to be treated differently from automatic SPAM and vice-versa.

Human Spammers

1. Use Akismet. Make sure that you enable Akismet from the Admin Console > Module Modules>Comments.

Make sure that you train Akismet everyday for at least 2-3 weeks, until Akismet learns what type of content and what users to consider SPAM. BC is sending right to Akismet all the information related to a comment: user IP, username, website, email address, comment text. Based on these details Akismet will learn which user is dangerous and start marking all the comments from that user as SPAM. And if the user changes the IP, username, email address or website, Akismet learns the structure of the comment used by that specific user and mark it as SPAM.

2. Moderate each comment: if Akismet fails at some point, be sure that the company behind the service is doing the best to improve the SPAM detection algorithms. Hence, until they release a new version or until they improve the current one, you need to start moderating comments. This is a shared responsibility, between the technology providers and the website owners.

Observation: Sometimes, Akismet may mark valid comments as SPAM (in this case, they are called false positives). In order to teach Akismet that this specific comment is a valid one, you need to mark it as valid.

So your responsibility as a partner or your customer’s responsibility is to check regularly the Comments tab and mark them as SPAM or to approve them as genuine comments.

Automatic Spammers

The most effective solution for spam bots is a strong CAPTCHA. But most of the times a strong CAPTCHA can annoy blog or forum users. Any commenter wants a very easy way to submit his content and make it accessible to others. And you or your customers must make sure to provide this easiness.

However, n order to avoid irritating automatic spam submitted through forms and blogs, follow the next steps:

For Blogs or forums:

1. Start with Akismet (see the above observations).

2. If you are not satisfied with the level of SPAM that you encounter, you can enable CAPTCHA on your comments. Go to Site Settings > Captcha and choose the type of Image verification that you want to enable. In the case of comments we only offer native Image Verification solutions. For web forms we’ve also enabled reCaptcha.

3. Make sure that you enforce CAPTCHA on “Comments”.

4. As you can see, there are 2 versions for the native CAPTCHA solution. If the level of SPAM is very high, we recommend that you use the second one (“Harder to read, but more secure”).

Observation: If your business has a strong social presence or if you want to build a strong social presence and Facebook is an important channel, you can also use Facebook comments for your blog.

For WebForms (and checkout forms):

1. CAPTCHA – when you create the form make sure that you enable ”Image Verification” in Misc. The version of CAPTCHA (“Easier to read vs. Harder to read, but more secure”) will be the one that you chose from Site Settings>Captcha.

2. reCaptcha If this solution is not what you are looking for, you can try inserting reCaptcha, the Google native image verification system. You can find it also in the Misc section.

3. Anti-bot Fraud Protection module: All new forms come, by default, with “Web form protection module” enabled. You can see it in the form or if you check out the Code View, you’ll be able to see the generated code for this module. Make sure that you don’t delete it. The usage of this type of modules is something that we recommend that you always do. It is in fact a hidden “Input Field” with a random name. Spam bots usually fill this field, and once we detect that this field is being filled, we realize that the corresponding form submission is through a bot. Humans don’t see this field and aren’t able to submit it. For older forms, you will have to add this module to a form if it is not activated yet.

Observation: our research shows that visitors (humans) are not as annoyed by filling in image verification fields (CAPTCHA, reCaptcha) in case of web forms (contact submission, payment forms etc) compared to comments. So, when dealing with web forms, try to enable an image verification form (whether the new Captcha Image Verification version or reCapctcha).

What’s missing and known issues

In case of blog comments, when using Akismet, the associated workflow notification is being sent just before Akismet succeeds to mark a comment as SPAM. This is because Akismet checks for SPAM asynchronous (independent) from the comment engine. We are working on fixing this issue
Our current analytics system displays visits from spam bots as real visits and we make no distinction between human visitors and spam bots yet.

Let us know how your process of stopping SPAM from your sites and blogs works.

Kind Regards,

Dragos Manescu, Product Manager Adobe Business Catalyst

Set up the domains hosted by Business Catalyst to use Microsoft Lync Online from Microsoft Office 365

forums_noreply@adobe.com — Wed, 22 Aug 2012 16:04:24 GMT

With Lync Online, you can stay in touch with colleagues, partners, and customers by using features such as instant messaging, audio and video conferences, and online meetings. For details, see Lync Online – Unified Communications in the Cloud - http://www.microsoft.com/en-us/office365/lync-online.aspx

Now when you set up to use our hosting services you may need to set up two service records in order to be able to use Microsoft Lync Online services

A Service record (SRV record) is a specification of data in the Domain Name System defining the location, i.e. the hostname and port number, of servers for specified services (in our case Microsoft Lync Online services). For more details about SRV records please have a look at this link - http://en.wikipedia.org/wiki/SRV_record

The Service records that needs to be set up in the Business Catalyst DNS tool are as follows:

_sip_tls 3600 in SRV 1 100 443 sipdir.online.lync.com that can be defined as shown in this screenshot - http://screencasteu.worldsecuresystems.com/Andrei/2012-08-22_1849.png.

Note: the Record Data for this SRV record should be: 100 1 443 sipdir.online.lync.com

_sipfederationtls._tcp 3600 in SRV 1 100 5061 sipfed.online.lync.com that can be defined as shown in this screenshot - http://screencasteu.worldsecuresystems.com/Andrei/2012-08-22_1851.png

Note: the Record Data for this SRV record should be: 100 1 5061 sipfed.online.lync.com

In order to see if you have properly configured those service records you can simply use the command prompt and perform a nslookup as shown below:

nslookup -type=srv _sip_tls.mydomain.com and the output should be something as shown in this screenshot - http://screencasteu.worldsecuresystems.com/Andrei/2012-08-22_1915.png

nslookup -type=srv _sipfederationtls._tcp.mydomain.com and the output should be something as shown in this screenshot - http://screencasteu.worldsecuresystems.com/Andrei/2012-08-22_1918.png

Note: the nslookup command will work only for machines that are running under Windows

Andrei

Shorthand CSS

forums_noreply@adobe.com — Sat, 31 Aug 2013 17:54:06 GMT

Lots of people are getting stuck in with CSS but many there are many cases of long CSS methods being used. This guide helps you step forward into improving your CSS by writing cleaner and shorter CSS to help improve the perfomance of your site and produce cleaner more effecient code.

There are a number of principles and steps you should look to consider during and after you write your CSS. Optimisation is something you should look to do with your scripting, html and elements such as your CSS, not only do you have that improved perfmance but a cleaner well organised CSS file is easier to manage and use and come back to. You will find that knowing these skills will help develop your knowledge and thus being familiar with this concepts will allow you write optimized CSS code and make you a better all-around web designer who will want to learn and strive for more.

Colours

As you may be aware a colour in CSS can either be a HEX value or an RGB colour value respresentation.
The hex colour value is made up of 6 numbers and character combination while the RGB value is the true red green blue set of 3 sets of 3 digit numbers to respresent the colour.

As a note using colours - Programing converts down to machine code. Everything goes down to 1's and 0's at the end of the day. Hex is a lower level form of colour and CSS will first step colours into a Hex version if they do not exist. So using Hex Colours is more a more effecient render.

Lots of designers like to use RGB based on their designs but Hex is more effecient.

When to use RGB?

RGB is good to define the right way to do opacity using alpha transparency:

rgba(255,255,255,0.5); Will render the colour at an opacity of 50%.

Shorthand Colours

There are many cases where you have a set of colours that are repeated, either all the same letter or number or a combination series. When a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#ffffff = #fff

#000000 = #000

#333333 = #333

#336699 = #369

This is a far more effecient means of writing your colour and a lot quicker to do as well saving you time.

Backgrounds

There are a lot of background properties, some I wont mention here but background has evolved over the years and extented greatly. With CSS3 for example there are gadients and multiple backgrounds you can set and use. But lets keep to some of the basic concepts for now and as you improve you can explore the combinations.

Here are some examples of Background properties you may be writing as such right now:

background-color: #00000;

background-image: url("images/bg.gif");

background-repeat: no-repeat;

background-position: top right;

There are two improvements we could do right now to make this:

background-color: #000;

background-image: url(images/bg.gif);

background-repeat: no-repeat;

background-position: top right;

You know already how to shorten your colours and you will see no speach marks in the url source method now. Every browser can render your background image without this, technically speach marks are the more valid CSS but I learnt to remove the clutter from my CSS, if it really is not needed and causes no issues, why use it?

You now can take this to the ultimate. You may or may not know you can combine all of this into one background property and you can now form these into one line:

background:#000 url(images/bg.gif) no-repeat top left;

Look how clean that is. You can take it further and use numerical positioning values so top left can become 0 0.

http://jsfiddle.net/MYshr/1/

You can also combine background-size and background-attachement as shorthands as well.

Margin & Padding

Margin and padding is an interesting one. There is some use in doing these aspects seperatly, especially overiding but a lot of people do not combine them together.

You have these elements for both padding and margin

margin-top

margin-left

margin-right

margin-bottom

AND

Padding-top

padding-left

padding-right

padding-bottom

You can combine these elements into the following single line combinations

margin:5px 4px 3px 2px 1px;

padding:5px 4px 3px 2px 1px;

The order of the elements is an easy one to remember...

Margin:TOP RIGHT BOTTOM LEFT;

So what if you have the following?

margin:5px 5px 5px 5px;

Do you right it like that?

No, it can even be shorter:

margin:5px;

If you have equal top and bottom margin and your left and right are equal you can right:

margin:10px 5px;

Where the 10px is top and bottom and the 5px is left and right.

The same syntax is used for padding.

Border

Border is a good one, it can follow the same principles as margin and padding and also has colour and type.

An example of long handed border coded:

border-left-color:#000000;

border-left-width:1px;

border-left-style:solid;

And you could do that for every side. If they are all the same you can combine the elements into one - border.

border-color:#000;

border-width:10xp;

border-style:solid;

That is good, thats shorter but we can again do a single line version of this code to form:

border:1px solid #000;

We just gone from a possible 12 lines of code down to 3 lines of code and then 1. A LOT OF effeciency!

For each element you can also write shortand.

If you follow the same principle as margin and padding where you had the phrase "TOP RIGHT BOTTOM LEFT" you can write the border width's like...

border-width:0 1px 1px 0;

And you can do the same for border-color and border-style.

EM

This is a quick little tip. EM unlike % and px does not need the EM when you use it.

WHAT?

Yeah, thats right, lets look at a font example.

font-size:14px;

font-size:3em;

font-size:20%;

BUT you can write the em like this:

font-size:3;

The system browser knows to use em, how cool is that!

Fonts

Fonts is an interesting one and comes with a bit of a warning. The full shorthand does not work correctly in the older browsers.

Here is an example Font written in css:

font-style:italic;
font-variant:small-caps;
font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

Again though we can combine all this into one line...

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

You should be able to see which element is which, this is quite handy. I know what you are thinking though, I just showed you about EM's, You are right you can write it shorter:

font:italic small-caps bold 1/140% "Lucida Grande",sans-serif;

This effeciency you should be able to start to see you are really starting to create shorthand clean CSS! These concepts are vital for when you start getting into CSS3 with transitions, gradients and keyframes and much much more.

There will be a further guide on an example of way of writing your CSS to offer up CSS files with less lines of code. You can take your stylesheets from two thousand lines of code into the hundreads and still be readable.

Using the Menu Module Version 2

forums_noreply@adobe.com — Thu, 05 Apr 2012 08:53:16 GMT

Menu Module Version 2 is a big improvement on Version 1. It offers some Layout and tag customisations to allow medium to advanced users to develop better menu's then they could before.

To acompany this document please find attached a zip containg an example CSS HTML only menu enhanced with jQuery. This is considered for people who understand HTML, CSS and jQuery quite well and understand how to use that to form their V2 Menu's.:

Tags used in the Menu Module Templates

Tag	Description
{tag_menugroup}	This will render all root level menu items, plus all items which contain childre
{tag_menuchilditem}	This will render a list of all menu items with the same parent
{tag_menuitemlabel}	Item Label (Menu Item Text)
{tag_menuitemdescription}	Item Description (You will mainly use this as your title)
{tag_menuitemurl}	Item URL e.g "/contactus.html"
{tag_menuitemtargetframe}	Target Frame e.g. "_blank" OR use for Rel e.g. "no-follow"
{tag_menuitemimageurl}	Image URL
{tag_menuitemimagerolloverurl}	Image URL for rollover state
{tag_menuitemimageselectedurl}	Image URL for selected state
{tag_menuitemcssclass}	CSS class name
{tag_menuitemcssrolloverclass}	CSS class name for rollover state
{tag_menuitemcssselectedclass}	CSS class name for selected state
{tag_menuitemidname}	Menu Item ID (Useful for as a reference for javascript as an example)
{tag_menuitemcssclass_withclass}	CSS class name, with class attribute e.g. class="itemClass" (Will render class="itemClass" in full)
{tag_menuitemcssrolloverclass_withclass}	CSS class name for rollover state, with class attribute e.g. class="itemClassRollover"
{tag_menuitemcssselectedclass_withclass}	CSS class name for selected state, with class attribute e.g. class="itemClassSelected"

Highlighted Tags indicate functionality that you can achieve through Pure CSS methods if you know how to do and not required to use.

Folder Structure & Location

The Menu Module layouts can be found under: ModuleTemplates -> Menu.

The Default Menu Layout is: ModuleTemplates -> Menu -> Default

You can see the folder contains your 3 layouts.

childitem.html:

This is your <li> and <a> (List item and anchor) element layout. Your actual menu items

container.html:

This is your main container element (The Div wrapper and basic javascript)

group.html:

This is your <ul> Element, this is for both the parent and sub <ul> elements at time of writing.

Tip 1:

Leave this layout as it is, You can make your own and this guide will show you how to use your own. You can copy this folder and rename it relevent to what the menu will be.

Tip 2: Naming Your Folders:

I like to name my menu folders the same as they are in the Admin. This helps you reference which belongs to which very easily.

childitem.html

This file by default looks like this:

<li {tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}><a href="{tag_menuitemurl}">{tag_menuitemlabel}</a>{tag_menugroup}</li>

Both the withid tag and the withClass tag will render id="yourID" and class="yourClass" respectivly if you add these into the menu item in the admin.

We wont be using the Item roleover or Select Class fields as this guide considers you will be doing this in your CSS and selected state is run by the provided BC Javascript.

There is one key missing element out of the box in the HTML though. It is missing the anchor title. So in your menu's you can go and add that in like in the example code below. You will use the item description tag to achieve this.

<li {tag_menuitemidname_withid} {tag_menuitemcssclass_withclass}><a href="{tag_menuitemurl}" title="{tag_menuitemdescription}">{tag_menuitemlabel}</a>{tag_menugroup}</li>

Note: At time of writing if you do not add any item description your HTML will render title="".

This is pretty much it, you can add and change it more but you do not want to break valid HTML structure and you want to try and keep it as simple as possible. You can do heaps just in your CSS!

group.html

This is simply:

<ul>{tag_menuchilditem}</ul>

At time of writing this layout is used for both the primary and secondy UL elements. (The main UL and the UL elements for secondary navigation)
With this in mind there is not much you can modify here to be unique for sub menu items but you can change this to fit your needs. One thing I often add is a "clearfix" class to correct floating elements inside for browsers.

<ul class="clearfix">{tag_menuchilditem}</ul>

container.html

There is a few things going on here and a few traps people fall into as well as some advanced things you can do to update/modify this layout.

Below is the default HTML..

<div id="myMenu1">{tag_menugroup}</div>

<!-- the following script is needed to set the selected state -->
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script>
<script type="text/javascript" >
    // ids need to be unique per page, use different ones if you are including multiple menus in the same page
    // id of the nav tag, used above
    var divTagId = "myMenu1";

    // desired id for 1st <ul> tag 
    var ulTagId = "myMenu1List";

    // desired class for 1st <ul> tag 
    var ulTagClass = "";

    if ((null !== ulTagId) && ("" !== ulTagId)) {
        document.getElementById(divTagId).getElementsByTagName("ul")[0].setAttribute("id",ulTagId);
    }
    if ((null !== ulTagClass) && ("" !== ulTagClass)) {
        document.getElementById(divTagId).getElementsByTagName("ul")[0].className = ulTagClass;
    }

    // this will set the selected state
    if ((null !== ulTagId) && ("" !== ulTagId)) {
        catSetSelectedCSSItem(ulTagId);
    }
</script>

<!-- 
For a sample CSS menu:
1. download the archive from http://lwis.net/free-css-drop-down-menu/ 
2. unpack the css files in your site
3. set the ulTagClass above to
    var ulTagClass = "dropdown dropdown-horizontal";
4. uncomment the following
5. if necessary, correct the path to reflect the files' location in your site
-->
<!--
<link href="/css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />
<style>
ul.dropdown li.selected>a{
    border-bottom: 1px solid #000000;
}
</style>
-->

You should be able to see that in recent viewsions of this layout has a link and information on how to use some custom CSS Menu layouts which you can use with BC Menu Module V2. Why not check these out too.

1. The BC Javascript is there to create the selected state for the menu. This adds class="selected" on the <li> element. You can choose to remove this if you use or build your own active state scripting.

2. To use this layout wih the javascript you must ensure you give the <div> wrapping element a unique ID and ensure you add this to this part of the javascript: var ulTagId = "myMenu1List";

3. If you wish to add a class to the UL you can do it javascript wise by adding it into this varible. This will add the class on the parent (main) UL only. var ulTagClass = "";

Note: This is a javascript method and you may prefer to add it manually in the group.html layout

4. Remove the Comment part as you do not need it, it is just a reference note. If you keep the Default folder that will have that reference for you to refer to.

Inserting the Module:

The module code to insert the V2 Menu Module is the following:

{module_menu, version="2", menuId="MENUID", moduleTemplateGroup="TEMPLATE FOLDER NAME"}

You can obtain your menu ID by going into the menu via the admin, clicking it and viewing the URL. If you look at the URL you will find the ID.

jQuery

forums_noreply@adobe.com — Mon, 12 Mar 2012 07:48:52 GMT

jQuery is often metioned throughout the knowledgebase and used by many partners developing websites on the BC platform and is the prefered javascript framework for many web designers and developers. jQuery is now the prefered framework of the Adobe Business Catalyst development team and all current and new developments of the system use jQuery.

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

How do I obtain it?

You can download jQuery from the official site here : http://docs.jquery.com/Downloading_jQuery#Download_jQuery

<script type="text/javascript" src="/js/jQuery.min.js"></script>

You can link to the latest and most update jQuery through the Google API Libraries.

Using the Google AJAX Libraries content delivery network to serve your jQuery directly from Google’s network of datacenters has a number of advantages over hosting jQuery on your website from: decreased latency, increased parallelism, and better caching.

There are a couple of ways you can load jQuery and other Libraries into your website via the google method.

1. Direct Link:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2. Google Load Request:

https://developers.google.com/loader/

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.7.1");
</script>

The google Load Request Method allows you to load many other Libraries like the jQuery UI or even googles own Map API functionality.

jQuery Compatability Mode

This platform currently implements a number of javascript elements based on the Prototype Framework. This shares the same implementation methods with jQuery.

To ensure jQuery functions correctly you will need to use the jQuery nConflict Method.

Example:

Declare your noConflict

$j = jQuery.noConflict();

This needs to be the start of your scripting be it inline or in your main dom Loading script file.

Any instance of $ you have or use from example code on the web needs to be updated to be $j.

$j(document).ready(function($){

Full Example loading the Dom and running a simple command:

$j = jQuery.noConflict();

// DOM LOAD
$j(function()
{
     // Get Rid of CMS Borders
      $j("img").each(function() {
           if ( $j(this).attr("border").length ) {
                $j(this).removeAttr("border")
           }
      });

});

Start jquery on the DOM

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

$(document).ready(function() {
   // do stuff when DOM is ready
 });

Q. "But you wrote something different in your previous example?"

A. That is correct, for your BC projects you need to ensure you jQuery is in compatabilty mode and the below example is the shorthand version of the Dom Ready Decleration.

$j(function()
{
     // do stuff when DOM is ready
});

Useful Links

http://docs.jquery.com/Main_Page	The jQuery website offers the best source of reference documentation for all the features of jQuery along with some great examples.
http://docs.jquery.com/Tutorials	The jQuery Website offers some great tutorials.
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx	25 Excelenet jQuery Tips
http://marcgrabanski.com/articles/jquery-essentials-slideshow	jQuery Essentials by Marc Grabanski.
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers	jQuery Tutorials for Designers.
http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/	jQuery for Beginners

Important Note

jQuery is always evolving and if you choose to use the latest version of jQuery please keep up to date with the changes made.
As an example in 1.7 .live() has been depreciated for the .on() event handler.

Created by Liam Dilley from Pretty

How Do I output Custom CRM Fields?

forums_noreply@adobe.com — Thu, 24 May 2012 07:23:30 GMT

There is currently no reference or insertion method to obtain these very easily but it can be done.

Note: This topic assumes you have already made your custom fields and have assigned them to contacts.

Step 1:

Create a Test Page or go to a test page you may have.

Step 2:

Launch the module manager

Step 3:

Select the Securezone options and go to insert an Customer update details form.

Step 4:

When you click the link you will see the CRM fields dropdown appear, Choose the custom field set you made.

Step 5:

Insert the form into the page.

Step 6:

If you Click the HTML view and scroll to where it has inserted the custom CRM fields and look at the source you will see that there is the module tag code you need.

<tr>
      <td><label for="CAT_Custom_201289_72865">Secondary Support Manager Email</label><br />
      <input type="text" class="cat_textbox" id="CAT_Custom_201289_72865" name="CAT_Custom_201289_72865" maxlength="1024" value="{module_customerfield,72865,201289}" /></td>
 </tr>

{module_customerfield,72865,201289} is what your after.

Step 7:

Copy the module code and use as you need to in your templates. Please note that these will only work when logged in and only for that person who is logged in.

So, what is this good for?

You may want to show a company Logo in the template when they have logged in for example. This is perfect for this.

Importing data

forums_noreply@adobe.com — Thu, 15 Mar 2012 01:56:19 GMT

Importing product data into an online store
Using the basic import process to import contacts
Contact Import - Advanced
Importing Web App items
Importing web pages and 301 redirects
Importing blog posts from an external blog
Importing CRM Forms
Importing non-English character sets
Troubleshooting import issues

In this article, you'll learn how to import all types of data into the database for your site. You'll see how to update inventory in an online store, update the customer database with new contacts, Web App items, 301 redirects for pages, blog posts, CRM forms and non-English (unicode text) characters. Use the links at the top to jump to the relevant section.

Importing product data into an online store

You have two methods you can use to update inventory in an online store. If you only have a few items to edit or update, you can make the changes manually using the interface in the Admin Console. The first option involves following these steps:

Choose eCommerce > Products.
Select the name of an existing product in the list. Or click the option in the sidebar to Create a new product.
After clicking an individual product, the Product Details page for that product appears. Use the provided fields to make changes to the item's description, URL, image, or other information.
Scroll to the bottom and click Save to update the individual product.

This approach gives you access to the full range of features available in the interface when adding products. However, as the number of products in an online store increases, the manual process can become tedious and labor-intensive.

The second method is useful when you have a significant number of products to add or update in an online store. In this case, you can import a spreadsheet that contains all of the data for all of the products at once. This process is outlined below.

Creating the import file

You can use a Microsoft Excel spreadsheet file to manage an entire product catalog. Using this strategy, you can add thousands of products to a single file and quickly add, update or delete them within the system by importing the edited spreadsheet file. You can import products as often as desired.

Note: The import file allows you to import all of the key information associated with products. However, some information cannot be imported using this method and needs to be entered manually. Please refer to the Product

Import file for full details and instructions. Remember, product names can only contain alphanumeric characters; do not use special characters, such as quotes or & when naming products.

If your store is brand new, the first part involves obtaining the Product Import file that you'll use as the template to add or edit product information. After downloading it, you'll use the Product Import file to enter new products and fill out the store's inventory. Follow these steps:

Choose Admin > Import Data.
Select the Products icon.
Select the option in the sidebar to Download Import Template File.

If the store already contains existing products, follow the steps below to export the list of product data that you can use to update and re-import to the system.

Exporting a file containing the existing products in an online store

Follow these steps to export a store's entire product catalog as an Excel spreadsheet:

Choose Admin > Import Data.
Select the Products icon (as described in the section above).
Click the option in the sidebar to Download entire Product list.
Save the file as an Excel spreadsheet to your local machine.

Note: At this point, Mac users must manually rename the resulting .xls file with the .csv file extension. This ensures that the file can be correctly interpreted by Microsoft Excel when you open it, without specifying the delimiter. (By default, Microsoft Excel looks for TAB delimiters, while the exported file uses comma delimiters). Windows users do not need to perform this step.

Also, when opening the exported file (renamed to .csv) on MAC, some special characters may appear at the beginning of the file next to the Product Code column’s name. This occurs due to a known issue with the Mac version of Microsoft Excel; the program does not correctly read the characters which usually define the UTF-8 encoding signature for a file. Until Microsoft resolves this issue, you can ignore or delete those special characters. Or, if the product data you are importing includes non-English characters, save the Excel file as the Unicode file type to preserve them.

Editing the exported spreadsheet file

Use Microsoft Excel to edit the file to add, edit or remove products. After you are finished, follow these steps:

Save the file as either CSV (comma delimited) file type, TXT (tab delimited) file type or the Unicode file type (if you need to fully support UTF8 character set). For more details about importing non-English characters into the database, see the section in this article below titled Importing non-English character sets.
Return to the Admin Console. Choose Admin > Import Data. Select the Products icon.
The Products Import page appears. Click the browse button and navigate to the edited CSV or TAB delimited file you saved in Step #1.
Select the corresponding File Type (Comma Delimited CSV or Tab Delimited) by checking the radio button. If you saved the file as Unicode format type, choose the Tab Delimited option.

Note: Sometimes during a normal save operation, Microsoft Excel automatically converts the file’s format from CSV to Tab Delimited. If the File Type option you selected is not working, try the other one, especially if you are not sure which file type your import document is using, or if you encounter errors like the Number of columns in the imported file is incorrect or No name found.

5. Scroll to the bottom and click Next.

6. A preview of the import is displayed. Check the data in the preview and then scroll to the bottom and click Import. \

Note: Previously, an error would occur during the import process if the spreadsheet was missing any of the product code information. The system has recently been updated to automatically generate product codes if none exist during an import operation. Each product should contain a unique product code. This is not currently enforced at import time, but you should assign unique codes to products in order to avoid the possibility of data being overwritten. You can use the eCommerce > Products section of the Admin Console interface to locate the existing duplicate product codes. Once you've identified the duplicates, you can either manually edit them or choose to have the system automatically assign unique product codes.

To learn more about working with products, see Adding products to catalogs in an online store.

Using the basic import process to import contacts

An online business relies on the database to store and track all customer information. In this section, you'll learn how to import your existing customer database into the system. There are two options: you can perform a basic or advanced import. Before importing, be sure to familiarize yourself with the differences between the basic and advanced import to choose the import process best for your situation.

Using the basic import option, you can import data for the following fields:

Email Address (the system's unique identifier)
Title (such as Mr, Mrs, or Ms)
Firstname
Surname
Company Name

A single field for Full Name does not work within this system. The Full Name must be modified.

Using the advanced option, you can import and populate more than 30 fields in the site's customer database. To review the complete list, choose Admin > Import Data > Contacts (Advanced).

To import your existing customer database into this system, follow these steps:

Choose Admin > Import Data.
Select the Basic or Advanced (Detailed) import option.
Download the Import Template File. This file contains the columns of data in the order in which they must be arranged for import.
Export your existing customer database into Excel, CSV or TAB delimited format. If you use an application such as ACT, Goldmine or other popular CRM packages, choose the option to export your existing customer database into one of these file formats.
Ensure your columns match those found in the Import Template file. Please keep in mind, even if you don't want to populate a column, it must still exist in your import file in order to successfully import the file. However, you can leave the column empty.
Save the file as either CSV or Tab Delimited (preferred) format.
Import the CSV or TXT file by browsing to select it from your local machine.

Import rules you should be aware of when importing contacts

An email address may only ever belong to one contact. That is no two people can share the same email address regardless of import option you choose. Please note that company records however can share email addresses with contacts.
In the basic import contact records are identified and matched using the email address. If no email address is provided then the contact is imported but not matched to any existing contacts. Subsequent imports of the same file will create new records for any contact without an email address.
If you use the detailed import and chose to use the Your ID field, then contacts are matched using this field. When this column is utilized then any contact without an email address can still be matched. Please note that even if you use this column, no two contacts can share the same email address under any circumstances.

Contact Import - Advanced

Advanced contact import is done in the same fashion as the basic import except the import template it is using contains more columns.

To download the import template go to Admin ->Import Data -> Contacts (Detailed) and click Download Import template file from the sidebar.

When using the Advanced Contact Import method, the following rules apply:

Mandatory Fields that must be imported to avoid wiping out an existing value:

Title
First name
Last name
DOB
Username
Email
Customer Type
Lead Source Type
Industry Type
Rating Type

Fields that will not get overwritten if the values are empty in your import file:

Company name
Password
Addresses
Phone Numbers or Web URL

Alternatively you can use the Basic Contact Import which allows you to update:

Title
First name
Last name
Email
Company (can be left empty without affecting an existing record)

Importing Web App items

Using this import option you can manage your entire web app catalog using a single Microsoft Excel document. The import feature can be used to add new items or update existing ones.

You can download the entire list of items for any of your web apps. Select Modules >Web Apps and choose Download entire Web App item list from the sidebar.

To import items, choose Admin > Import Data. Select the Web Apps option. Then, select the Web App from the list that you'll be importing items. Download the import template file (using the option in the sidebar). The import template file includes the instructions on how to setup and edit the import file. The first column in the import file is titled "External ID". The value you enter in this column will uniquely identify each Web App item; this means that during subsequent imports, existing Web App items can be updated.

Linking Web App items to customers during Import

We App items can be linked to customers in your database, which is useful when you are porting a site with a lot of existing items submitted by existing clients to the system.

Follow these steps:

Import all contacts first, with their allocated Username and Password, as well as their secure zone subscriptions. This is done using the Contacts Import (Advanced) option, as discussed above.
Once all contacts are in the CRM Database, perform a Report > Customer Report > Contacts only, which includes the CRM ID field. This will give you the database Entity ID for each Contact.
Locate the Entity ID and enter it in the Web App import template... this links the Web App to the CRM Record.

Troubleshooting Web App imports

If you import is failing here are some tips you need to know when troubleshooting the file:

Look at the custom field types and compare them with your data. If you have used Number as a type for one of the fields, you can not place a string into it. Even if the field contains a phone number, you should use string. It is quite rare that you'll ever need to use the Number type field. The same is true when importing the date. The format has to match the system format or you will not be able to import data into it.
If you do use the Number type, the field must have to have at least one numeric digit in it. You can enter 0 as a placeholder if desired.
You must enter a date in the mandatory fields. These fields include the name, description and any field you have selected as mandatory by selecting the Mandatory option when you created it.

Importing web pages and 301 redirects

Web page import feature was created for SEO purposes and it allows you to create 301 redirects from old URLs to your new URLs and that way keep the existing search engine rating. So, if you have moved a site from another host to us this is the feature for you. For example if your old site was in ASP, and a particular web page url was index.asp, you can now redirect any user accessing that page to index.htm.

It allows you to import a URL with any extension except .aspx, which is reserved for the system.

This is what the file should look like:

Important considerations:

Old URL extensions can uses any file extension, with the exception of .aspx. Extensions such as .php, .asp, .cfm, .pl, .cgi, .htm, .html and others are supported.
If the destination URL is a relative path, it can have an extension of .htm, .html or no extension, such as: home.htm, home.html or home. No other extension is allowed.
If the destination URL is on an external server (if it starts with http:// or https://) any extension is allowed.

Note: To update or modify your current redirect set-up, you'll need to re-import the data to provide the old and new URLs.

Importing blog posts from an external blog

Follow these steps to import the blog posts from an existing TypePad and Word Press into the blog on your site:

Export all of the existing posts from TypePad or WordPress.
Log into the Admin Console and create a blog. Choose Website > Blog > Create a New Blog. Remember to enable the trackback option, if you have a trackback feature enabled in your existing blog software.
Choose Admin > Import Data. Select the Blog Import option. From the menu that appears, select the blog you created in step #2.
After selecting the blog, another menu appears. It contains the list of external blog engines that are supported by the blog import feature. Choose the Typepad / WordPress option.
Next, you'll upload the data. Select the exported TypePad or WordPress file and click Next. Remember, the preview feature is not available when importing blog posts.

Warning: Double-check that you are importing the correct file before clicking Import. You must only import a blog once. If you import it again, it will result in a duplicate set of the posts, comments and trackbacks being added to the system.
After you import the blog, visit the live site in a new browser window. Navigate to the blog and check that the blog posts have imported correctly. If not, delete the blog and repeat the entire process again, begining with step #2.

Importing CRM Forms

You can import Customer Relationship Management data into the system. Follow these steps:

You can import a CRM Forms attached to a contact; this is accomplished by choosing the advanced contact import option.
If you need the template, select the CRM form from the menu that appears at the bottom of the advance contact import field list. Click the option to download the template file.
Only include the contacts that the CRM form needs to be attached. If the contact doesn’t have the CRM form attached, then it will attach the form and import the values.
You can only select one CRM form at a time.

Importing non-English character sets

If your site uses a non-English character set such as Chinese, Japanese, Arabic, and others, be sure to save your Excel import file as a Unicode Text file, as shown below:

Next, after choosing Admin > Data Import, select the Tab Delimited file type. After the file imports, the non-English text is not affected or changed as it is imported.

Undoing an import

If you make a mistake during your import you can use the Undo Previous Import option to undo the previous operation. When you undo the import any contact created or updated during the import will be deleted permanently. This option should only be used when you are first populating your customer database as you would only be deleting new contacts.

To use this feature, choose Admin > Import Data > Contacts > and click the option in the sidebar to Undo Previous Import

Troubleshooting import issues

There are two main reasons why imports fail.

1. Your choice of file type can affect your import. For example when in Microsoft Excel you choose to save your file in CSV format the output file will have all your columns separated by a comma (,).

Original File

CSV File Output

john@mail.com,Mr,John,Citizen

sally@yahoo.com,Ms,Sally,McDermott

When you use a CSV file you can no longer use commas (,) inside any of your columns. Otherwise the extra commas will appear as extra columns and will affect your import. If wish to use your own commas in your columns then you should save your file as a TAB delimited file. In fact TAB delimited files are the preferred format for the import feature.

2. Your columns must not include any line breaks otherwise your import will fail. When you create your CSV or TAB delimited file each customer record will appear on one line (as shown above). If for example you were to use the Detailed import and the address column included a line break the output would appear as:

CSV File Output

john@mail.com,Mr,John,Citizen,233

Pacific Highway,North Sydney,

sally@yahoo.com,Ms,Sally,McDermott

The Line Break directly after 233 has pushed the remainder of the columns to a new line. The import feature will treat the new line as a new customer which is incorrect. Its likely that your import will not fail but the data imported will be incorrect.

After you create your CSV or TAB delimited file its important to reload it into any text editor such as Notepad and quickly view its content to ensure nothing out of the ordinary stands out. Doing this ensures your imports are error-free and painless.

Troubleshooting issues sending and receiving email

forums_noreply@adobe.com — Mon, 19 Mar 2012 03:35:22 GMT

Verifying that the settings are correct in the User Details page
Checking the domain name settings in the DNS tools
Checking the MX record settings for the site
Verifying that you can log into webmail
Confirming the settings in your email client
Resolving issues when messages are received, but outgoing messages cannot be sent
Resolving issues when the email account's mailbox has exceeded its limit (quota)
Resolving issues with the security certificate when configuring an email client.

In this article, you'll learn troubleshooting tips to help you resolve issues when attempts to send email or receive mail messages are unsuccessful.

The first step involves ensuring you are using the correct account settings when you configure your email client.

If you are using a third-party email service for email, please contact the company that manages your email to verify the correct settings to use.

If you are using this system's integrated email services, use the following details when setting up an email account:

POP3 or receiving server: mail.my_domain_name.com (replacing my_domain_name.com with the site's domain name)
SMTP or sending server: Your Internet Service Provider's (ISP) sending (SMTP) server. Contact your Internet Service Provider to get this information.

Alternatively, you can try using mail.my_domain_name.com (replacing my_domain_name.com with the site's domain name) but it may not work because communication to third-party SMTP servers is often blocked by your ISP in order to cut the amount of SPAM being sent through their network.
Email address: your_account@my_domain_name.com
Username: your_account@my_domain_name.com
Password: The password you used when the account was created.

Verifying that the settings are correct in the User Details page

Double-check that the email address you are entering in the email client interface matches the email address that exists in the User Details page when the email was created.

To verify this, choose SiteSettings - Site Users. Select the name of the user to view the User Details page.

Compare the email address in the field with the one you entered in the email client new account fields.

It is especially important to ensure that the option Enable Email is checked, as shown below.

Checking the domain name settings in the DNS tools

After verifying that the email address created in the Admin Console matches the email address entered in the email client account information, the next step involves verifying that the domain name settings are accurate.

Follow these steps:

Choose Site Settings - Site Domains.
Expand the MX section and ensure the correct domain is set up for mail.

In addition to verifying the DNS settings in the Manage Domain Name area of the Admin Console, also ensure that you have redelegated your domain name to point to this system's hosting servers.

Note: You must use this service to host the domain if you want to use this system's integrated email service.

If you prefer to use an external email provider, please read hosting mail externally for more information.

Checking the MX record settings for the site

You can use a third-party DNS service to check the MX record. The following list includes examples of DNS services you can use:

You can also search and find other resources available online to check the MX record for your site.

In this example, the catfishdesigns.com.au site is using DNSStuff.com to look up the MX record.

Enter the domain name in the provided field and select MX from the type menu, as shown below:

After the lookup is complete, the results look similar to the screenshot below:

In the results, you can see that mail. has correctly been appended to the domain name A type prefix.

This is the same result you'll be looking for when you test the MX record for your domain name. Also, notice that the MX record points to the IP address: 203.134.157.115. That means it is correctly configured.

If you see different values when you test your site's domain name, double-check that you've added a domain name to the site using the DNS tools in the Admin Console.

The DNS tools are accessed by choosing Admin > Manage Domain Name.

Additionally, log into the website of the registrar you used to register your domain name, and verify that you've redelegated your domain name to point to this system's nameservers.

To learn more about using DNSStuff to look up the settings of a specific domain name, watch the video.

Verifying that you can log into webmail

Webmail is included with the integrated email service for this system. If the email account is set up correctly, you should be able to log in and see messages in the webmail interface without any further configuration.

Webmail enables you to send and receive email using any browser with an Internet connection.

There are two methods you can use to log into webmail:

Enter the following URL in the browser: http://mail.my_domain_name.com (Replace my_domain_name.com with your site's domain name)
Log into the Admin Console and highlight your username in the upper right hand corner - select Webmail.

To access webmail, you'll use the same username (email address) and password you use to log into the Admin Console.

Click the Login to Webmail button.

If you have double-checked all of the information previously provided in this article and you are still unable to see the webmail interface after logging in, contact the support team and include your login details to enable them to investigate the issue further.

If you can see the webmail interface as shown below, then please continue with the next section of this article.

Confirming the settings in your email client

After following along with the previous suggestions in this article, you have verified that:

You have entered the same settings found when selecting Site Settings > Site Domains
The option to Enable Email is selected in the User Details page.
The domain name for the site has been correctly redelegated on your registrar's website
The site's MX record exists and is pointing to the correct IP address
You can login into the webmail interface using the same email account details.

If you have not verified that the above statements are true, confirm them before continuing.

Next, double-check that your email client has the proper configuration for the new email account.

Read the set up instructions specific to your email client from our configuration guide

Resolving issues when messages are received, but outgoing messages cannot be sent

If you can receive POP email but are unable to send messages, the issue may be related to a known issue.

In some cases, your Internet Service Provider (ISP) may block access to this system's SMTP (outgoing) email server. This behavior varies and depends on the ISP you use to connect to the Internet. ISPs sometimes do this to prevent spam email from being sent using their networks.

The best way to overcome this is to set up an alternative 'port' to send your mail through.

By Default, email software will set the SMTP 'port to '25', which is the standard port for the SMTP protocol. However our mail service has two alternative ports available that you can send through.

These are:

8025

587

You can usually adjust the SMTP port that your software uses under the 'More Options' or 'Advanced' area of the account setup.

If this does not work for you (as possibly these tow additional ports are also blocked by your ISP for some reason), another alternative is to use your ISP's SMTP outgoing server information rather than using the outgoing server provided by this system.

If you are not sure what your ISP's SMTP server information is, try looking at the settings for one of your other existing email accounts.

If that information is not available from within your email client, contact your ISP to find out your SMTP server's address. Alternatively, visit their website and search for the terms: setting up email.

Your ISP's SMTP server information will likely follow one of the following formats:

smtp.isp_name.com

mail.isp_name.com

Once you have their outgoing server information, update the outgoing mail server fields in the email client account settings to use their outgoing server.

Resolving issues when the email account's mailbox has exceeded its limit (quota)

Occasionally, you may experience issues that have the following symptoms:

Contacts mention that they are attempting to send mail to you, but are unsuccessful.
You are receiving email notifications that state: Delivery to your mailbox was refused because it has exceeded its quota.

Each mailbox in this system has a 5GB size limit.

If you often receive e-mail messages with large file attachments, the size limit may be exceeded unless you are diligent about deleting the messages on the server.

The following tips can help manage your mailbox's size:

If you are using Microsoft Outlook, enable the autoarchive function. Experiment with the time settings to find the setting that works best for you.
If using Outlook Express or Thunderbird email clients, create local folders on your hard drive. Regularly copy the messages saved in your mail server's Inbox into these local folders to "archive" them. This process will remove the files from the server, while keeping their contents available on your local machine.
Configure your email client to delete messages from the email server after downloading them.

Resolving issues with the security certificate when configuring an email client.

When you set up the email client such as Outlook, MAC Mail or other email application you may receive an error regarding the security certificate defined on your mail server.

The reason of this is the fact that you have set up the incoming/outgoing mail server as mail.yourdomain, where yourdomain is your custom domain (e.g. example.com), however you are using secure encryption (SSL) on your POP/IMAP/SMTP protocols.

What you need to do here is to :

remove the encryption from your email client
install the secure certificate on your domain

In order to remove the encryption all you have to do is to go to the Advanced settings, remove the SSL encryption and chose the regular ports (POP - 110, IMAP - 143 and SMTP - 25).

For instance in Outlook the Advanced options should look as below:

In Mac Mail the Advanced options for SMTP should look as below:

or for POP/IMAP:

If you want to use secure encryption (SSL) on your POP/IMAP/SMTP protocols please have a look at this article.

Troubleshooting FTP connectivity issues

forums_noreply@adobe.com — Mon, 19 Mar 2012 05:03:23 GMT

The easiest way to upload files to your site is to use the File Manager from within the Admin Console to upload site files, because when you are logged in to the Admin Console, you are automatically connected via FTP to your site. To learn more about how to use the File Manager, read the section titled Using the File Manager to upload files in the article Uploading files with the File Manager and Dreamweaver.

Common factors that lead to connectivity issues

There are several reasons why you may be encountering issues when connecting via FTP:

You are using a network (WiFi or LAN) that is behind a firewall
Your machine has security or anti-virus software installed which is prohibiting the connection
You have entered a user name and password that are not recognized by the system

If you are on a network with a firewall, (which is likely when working in a corporate office, an educational facility, a library, or a goverment agency) you may not be able to connect via FTP because the firewall prohibits file transfers (even though you've entered the correct credentials to log in). If you suspect this is the reason, try using a computer at home, or use a laptop in a different location with a network that is not restricted, to see if that resolves the issue. Also, if you are behind a firewall, verify that you have enabled the PASSIVE (PASV) mode option in the FTP client or Dreamweaver, because this can help (and is always recommended).

If you've installed security software or have anti-virus utilities running on your machine, it may be blocking the connection as your computer attempts to contact the remote server, because it sees the connection as a security risk. Check your Applications folder (Mac) or your Programs folder (Windows) to see if you have security software installed. If so, temporarily disable it and try connecting via FTP again, to see if that is the culprit.

Finally, it may be that you are using a different host, user name or password when you attempt to log in via FTP. If the credentials that you enter do not match the login information in the system for your site, the FTP connection will fail.

Also, double-check that you are not entering http:// in front of the domain name in the field when entering the host address.

The screenshots below illustrate the correct settings to use:

If you are using the Files panel in Dreamweaver to connect to your site, (which has a built-in FTP client), check the login information. Follow these steps:

Select Site > Manage Sites.
Click the Edit button in the Manage Sites dialog box.
Click the Servers button and then select the Remote Server to view the connection details.
Verify that your settings look similar to those shown below:

Note: The Quick Site Setup wizard should have set these credentials automatically (using your own site URL and your own email address). However, you may have changed the settings after defining your site, so double-check that the syntax is correct.

No matter which FTP client you use, take care not to enter the http:// prefix in the FTP Addresss (Host URL) field, and verify that you've selected the Use Passive FTP mode (in the More Options section of Dreamweaver, and in the Advanced tab of many FTP clients).

Issues attempting to upload templates

Unlike other site files, templates are a specific file type (.DWT) that correspond to the templates created in Dreamweaver. The templates for a site always reside in the Templates folder, which is located at the root level of the site. Since these files are specific to Dreamweaver, they are handled differently by the system. To create and upload new templates, choose one of the following methods:

Log into the Admin Console. Choose Admin > Manage Templates. In the sidebar, click the option to Create a new template. Use the Design tab to type content and insert images using the WYSIWYG interface of the online editor. Alternatively, click the HTML tab and hand code the template contents. When you are finished, click Save and Publish. If desired, you can set the template as the default template for the site, which means it will be set as the template automatically when you choose Website > Web Pages > Create a new web page.
Use an HTML editor, a text editor or Dreamweaver to design the template. Copy the HTML code. Log into the Admin Console. Choose Admin > Manage Templates. In the sidebar, click the option to Create a new template. Click the HTML tab and paste the code into the Template Content window. Scroll to the bottom and click Save and Publish.
Launch Dreamweaver. Use the panel to log into your site. Choose File > New > Blank Template > HTML Template (and choose a CSS layout, if desired). Click Create. Choose File > Save to save the DWT file in the Templates folder at the root level of your site. Choose Insert > Template Objects > BC Editable Region to define the editable region on the template where the unique page content will appear. After you are finished designing the template, select the DWT file in the Files panel and click the Put button to upload the DWT file (and any dependent files, including CSS and image files) to the remote server. Then, log into the Admin Console and choose Admin > Manage Templates to edit the template (and if desired, set the template as the default template for the site).

Note: You cannot set a template as the default template for the site within the Dreamweaver authoring environment.

Attempts to upload a file are unsuccessful

There are also some situations when you can connect to the remote site (using Dreamweaver or a third-party FTP client) but you are unable to upload files. In these cases, there are several reasons why a file cannot be uploaded:

If the file uses a non-standard file extension, the system may not support the file type. See Supported file types for more details.

If the file is extremely large, it may exceed the size limitation of 150 MB per file. Try optimizing the file to reduce its size.

The third-party FTP client you are using may have a character limit that prevents you from entering your entire user name. Since the formula for the user name looks like this: my_domain_name.com/email@my_domain_name.com, the character limit may be exceeded for the user name field, and the FTP client is truncating the user name. There may also be other issues (such as the @ symbol occuring the the user name field) which cause some FTP clients to reject the user name. If this is the case, try using a different FTP client.

Try using FireFTP or (if you are on Windows) you can also try using Core FTP. Both FTP clients are free and have been proven to work well with this system.

Permissions errors when attempting to connect to a site via FTP

If you are not the primary site administrator for your site, it may be that you do not have the permissions (privledges) set up for your user account that enable you to use the FTP feature, even though you've entered the correct user name, password and host information in the FTP connection fields.

Verify that you have the permission enabled for the option: Can use FTP & File Manager for the site. Either contact your site administrator, or if you can access it, choose Admin > Manage Roles to see if you've been granted these permissions.
Confirm that the site has not recently expired. If the trial site has expired, contact your site administrator for help.

Note: If you are the primary site administrator, you automatically have all of the permissions to perform administrative actions on the site, so this will not be an issue. However, it is up to you to control who does have these permissions, and they should only be granted to users that are trained in working with FTP and understand the responsibility and power of FTP (to protect the contents of the site from accidentally being deleted).

How to register a Name Server

forums_noreply@adobe.com — Thu, 15 Mar 2012 00:35:43 GMT

Registering a nameserver with GoDaddy
Registering a nameserver with Namecheap
Registering a nameserver with Fabulous.com
Registering a nameserver with Enom.com
Registering a nameserver with Bulkregister.com
Registering a nameserver with Network solutions
Registering a nameserver with OpenSRS
Registering a nameserver with Melbourne IT

When using a nameserver for the first time, you may need to register it with your registrar (the company that you used to register your site's domain name). Check with your domain name's registrar to see you can make these changes on the phone, if you do not feel comfortable updating the nameserver information on their website.

Note: Many Partners will not need to do this. If you aren't sure, contact support for more information.

Once your DNS servers have been registered, any new trial sites created in your Partner Portal will use your registered domain name, rather than the default system domain names. You can also modify your existing domain name records and change the DNS servers to your own domain name, if you have previously created sites that use the default domain names.

In this article, you'll find instructions for registering nameservers on some of the more popular registar websites.

Registering a nameserver with GoDaddy

Log in to the GoDaddy site.
Select My Account > Domain List. Select the domain name you want to update.
Next to the Host Summary header, click Add.
Enter "ns01" in the host name field and 54.236.190.129 in the IP address 1 field. Click OK.
Repeat this process for the second set of fields, entering "ns02" in the host name field and 54.246.209.121 in the IP address 2 field.

Registering a nameserver with Namecheap

Log into the Namecheap website.
Select My Account > Manage Domains. Select the domain name you want to update.
In the Advanced Options section, select Nameserver Registration.
Enter the following two nameservers and IP addresses and then click Add nameservers:

      ns01.your_domain_name.com (54.236.190.129)
      ns02.your_domain_name.com (54.246.209.121)

Please Note: In the examples above, replace your_domain_name.com with your registered domain name.

Also, this will not automatically point your domain name to the registered nameservers. If you need to switch your domain to this DNS please use Transfer DNS to Webhost (or Domain Name Server Setup) from the left-side menu afterwards.

Registering a nameserver with Fabulous.com

Log into the Fabulous.com website.
Select Manage > Nameservers. Scroll to the bottom and select Nameserver Edit > Create Nameserver.
FQDN is ns01, followed by the domain name you've registered at Fabulous. Then, enter its IP address: 54.236.190.129
Click Continue. In the next section, enter ns02, followed by your domain name. Then, enter its IP address: 54.246.209.121

Registering a nameserver with Enom.com

Log into the Enom.com website.
In the menu on the left, select Domain Names.
Also in the left menu, select Register DNS.
If you are registering the nameservers for the first time, use the section titled Register a NameServer Name.
If you have previously registered nameservers for your domain, use the section titled Update a NameServer IP.
Enter the information provided in the e-mail you received when you first set up your account with Enom.com.
In the Nameservers section, enter the following information:

ns01.your_domain_name.com - IP address (54.236.190.129)
ns02.your_domain_name.com - IP address (54.246.209.121)

Note: In the examples above, replace your_domain_name.com with your registered domain name.

Registering a nameserver with Bulkregister.com

Log in to your account on the Bulkregister.com site.
Select the option: List Domains.
In the list of domain names that appears, select the domain name you want to edit.
Click Manage Name Servers.
Click the option: To create child name servers of this domain, click here.
In the left field, enter ns01 (the prefix of the primary nameserver).

Note: There's no need to enter the suffix for the domain name (such as .com or .org) because it is already listed.
In the right field, enter the following IP address for the primary nameserver: 54.236.190.129
Click Create Name Servers.

Note: If a second set of fields are displayed, enter the secondary prefix in the left field: ns02 and enter the following IP address in the right field: 54.246.209.121
Click Confirm.

Registering a nameserver with Network solutions

Log into your account on the Network Solutions website.
Click the Host Registration Form link.

Note: In order to register your nameservers, you'll need to fill out the form twice (once for the primary and again for the secondary nameserver).
In the General Information section, enter your email address. Select the New option.
In the Host Information section, enter the following information:

Host NIC Handle: (leave this field blank)
Host Name: Enter the nameserver NS01.your_domain_name.com (replacing your_domain_name.com with the site's domain name).
IP Address: Enter the IP address for the primary nameserver: 54.236.190.129
In the Contact Information section, enter your NIC handle. If you don't know your NIC handle, you can obtain this by doing a WHOIS lookup of your main domain name.

Alternatively, you can create a new contact record by leaving the NIC Handle field blank and submitting the form.
In the Host Form Authorization Information section, select the preferred Authentication Method.
Scroll to the bottom of the page and click Generate Host Form.

A completed Host Template is displayed. Scroll to the bottom of the page and click Mail this Host Form to me. The site will send you a copy of the Host Template.
Check your email to receive the form. Click reply to send the form back to Network Solutions. This is an important step, because if you do not reply to the email with the form, Network Solutions will not process your registration.
Repeat steps 2-8 to register the secondary nameserver. When you repeat step #4, enter the following information:

Host NIC Handle: (leave this field blank)
Host Name: Enter the nameserver NS02.your_domain_name.com (replacing your_domain_name.com with the site's domain name).
IP Address: Enter the IP address for the primary nameserver: 54.246.209.121

Registering a nameserver with OpenSRS

Log into your account on the OpenSRS website.
In the Manage Name Servers section, click the option:

If you want to create or modify a name server which is based on {your domain} click here.
Enter the prefix for the primary nameserver: ns01 and its corresponding IP address: 54.236.190.129
Click Create Name Server.

Note: Do not enter the www prefix before the domain name, because this may cause a problem with your web server lookups.

The most common error when setting up a new nameserver is:

Unable to create nameserver: Registry error, nameserver creation failed [Attribute value not unique]

If this error is displayed, it means that the IP address you entered is already registered.

If the system requests a secondary nameserver, enter ns02 and its corresponding IP address: 54.246.209.121

Registering a nameserver with Melbourne IT

Log into your account on the Melbourne IT website.
In the right corner, click the Domains tab.
Select the Make Changes menu option. The Domain Management page is displayed.
Enter your domain name and Registry Key (if requested).

Note: If you have lost the Registry Key, click Lost Registry Key recovery. In the field that appears, enter your domain name and click Resend Key.
Click Enter Management. The list of domain name management links appears.
Click Name Server Functions.
Enter the Host Name (ns01.your_domain_name.com) and the corresponding IP address: 54.236.190.129

Note: In the example above, replace your_domain_name.com with the domain name for the site.
Click Add. The system confirms your submission by displaying the message: Added.

The new name server is added to the Current Name Servers list.
If the system requests a secondary nameserver, repeat steps 6-8. When repeating step #7, enter the Host Name (ns02.your_domain_name.com) and the corresponding IP address: 54.246.209.121

Note: In the example above, replace your_domain_name.com with the domain name for the site.
Click Logout.

To learn more about managing domain names, see Understanding DNS and Troubleshooting DNS issues.

Troubleshooting DNS issues

forums_noreply@adobe.com — Mon, 19 Mar 2012 03:01:20 GMT

Accessing DNS tools

In the Admin Console, select Site Settings > Site Domains to access the DNS management tools.

Using the interface provided on this page, you can add the domain name you've registered (with a third-party registrar) to your site and set up your domain name (or set up A-Records on the external DNS server to point to a remote server IP address), based on your site's location and the data center you've selected. These changes can only be made after first performing the following task:

Upgrading your trial site

Double-check that you have completed this step first, and then follow the instructions provided in Setting up DNS and redelegating domain names to redelegate your domain name, (using the website of the registrar company who registered your domain name). Finally, you'll use the DNS management tools in the Admin Console (as shown above) to set up your site's domain name.

Allowing time for propogation

Be aware that you may need to wait for the changes to propagate before updates made to a domain name become effective. Once the domain name has been redelegated to new name servers, it can take up to a maximum of 7 days for this new domain information to update on all relevant DNS servers throughout the world. Usually, this process happens much faster; often, a visitor that enters your domain name into a browser will be able to successfully access your hosted site within 24-48 hours. If you wait for two days and find that the changes are still not active, use the suggestions provided in this article to resolve any outstanding issues.

Verifying your domain name settings in the Admin Console

As mentioned above, log into the Admin Console for your site and select Site Settings > Site Domains to access this system's DNS tools. The list of host names that are set up for your site are displayed on this page, as shown below:

Note: The screenshot above has been edited for space; the Admin Console interface for host names also displays the Country (data center location) and Culture (system language) settings.

Click the Edit button to the right of the item you want to update. Make sure that you have added the correct domain name to the site (and verify that the domain name does not contain any misspellings).

Also confirm that you selected the option "I will re-delegate my domain and use this service to host it" if you are redelegating your domain to this service, which is required in order to use the internal email service. If you choose to host your site with an external host provider, you cannot use the internal email service. However, it is possible to add multiple domain names to a single site, and set one of the secondary (the non-default hosting domain) as an email domain and use an external email provider for that secondary domain name.

Use the WWW record options menu to forward the domain name to the WWW domain record (the default option). This will ensure that a visitor entering the address http://www.my_domain_name.com will access the same site as if the visitor entered http://my_domain_name.com in their browser's address field.

The Default URL option sets the www.my_domain_name.com (with your domain name replacing my_domain_name) as the default setting; If you enable this option, you are setting the primary domain address that will be used in your site (such as the links in the Sitemap.xml, system emails, and RSS feeds).

The Default Email Domain option sets the current domain name that you are setting up as the default domain name for your email service. This means that the internal email service will generate email addresses like this: my_email@my_domain_name.com.

Using different domain names for the hosting and email services

This system enables you to set up multiple domain names for the same site, so you can optionally choose to set a secondary domain name (which differs from the site's default domain URL) as the default domain for email services. If you want to set this up, do not enable this option for the site's primary (default) domain name, but do enable it when you set up the secondary domain name, so that it will be set as the primary (default) domain for email accounts.

For example, it is possible to set up the default site hosting domain to be http://www.my_domain_name.com and set up the default email domain as my_email@another_domain_name.com. To learn more about this, see Setting up your site's domain name using DNS tools.

Looking up your domain name with online tools

First, confirm that you have performed the steps outlined below:

Upgrade your site.
Purchase and register a domain name with a third-party registrar.
Use their site to assign the DNS information.
Use the Admin Console (Site Settings > Site Domains) to add the domain to your site.
Wait 24-48 hours for the changes to propagate to the remote servers.

Next, use an online DNS lookup resource, such as DNSWatch, to use their reporting tools to lookup the information about your domain name. Follow these steps:

Visit the DNSWatch site and enter your domain name into the Hostname field. (Do not enter www before typing your domain name, as shown below.) Click Resolve.
If you see different DNS server URLs, (other than ns1.worldsecuresystems.com, ns2.worldsecuresystems.com, and ns3.worldsecuresystems.com) it means that your domain name has not been redelegated properly to this system's servers, or that you have selected the option to use an external DNS service.

Note: To learn more about using a third-party system to manage your site's DNS, see Using an external DNS service for domain names.
Next, check the report to verify the MX record information. If you have selected to use this service for your email services, your MX record will look like this:

mail.domain.com (in this example, your domain name replaces domain.com)
Select Site Settings > Site Domains to access the interface where you can set up your domain name and add a Mail Exchanger (MX Record). If you are using the internal service for your site's email service, be sure you've selected the option "I will re-delegate my domain and use this service to host it" as shown below:
Next, check the report to verify the A-Records. If things are set up correctly, you'll see two A-Records.

One will be a www record and one will be a non-www record, as shown below:

If the MX record is not listed in the report, return to the Admin Console to enter the correct settings. Follow these steps:

Both A-Records should be pointing to the internal DNS information, shown below:

ns1.worldsecuresystems.com (54.236.190.129) - primary DNS server
ns2.worldsecuresystems.com (54.246.209.121) - secondary DNS server
ns3.worldsecuresystems.com (54.252.148.151)

This information will be same if you have redelegated your domain name or if you are using an external DNS service. In either case, you should see that the two records are pointed to the correct set of IP addresses shown above.

If these A-records do not exist when you check your domain name using a third-party DNS lookup tool, log into your Admin Console and select Site Settings > Site Domains to set up your site's domain name. If only one A-Record exists, or if one or both A-Records are pointing to an address different from those listed above, it means you've selected the option to use an external DNS service and that you still need to setup one or both of the A-Records manually, using the DNS management tools.

Looking up your domain name with www.easywhois.com

In addition to DNSStuff.com, you can also use the easywhois.com service to lookup your domain name and ensure it is set up correctly. Follow these steps:

Visit easywhois.com and enter your domain name into the Enter domain field:
Press Next to generate the results. On the results page, scroll down and verify the name servers. You should see either two (or possibly three) name servers as shown below if you have redelegated your domain name to the Business Catalyst DNS service:

   Name Server................ns1.worldsecuresystems.com
   Name Server................ns2.worldsecuresystems.com
   Name Server................ns3.worldsecuresystems.com

If you are using an external DNS service, you will see different DNS URLs when the record is displayed.

How to setup Netregistry domain name with your BC site

forums_noreply@adobe.com — Thu, 10 May 2012 07:21:55 GMT

This tutorial explains how to point a domain name purchased with Netregistry to your Business Catalyst site. In order for a domain name to work with your Business Catalyst site, you will need to update the Name Servers in the Netregistry console.

Login to the Netregistry console using the account reference and password provided when you purchased your domain name.
Select your domain name from the menu and click Administer
Click Domain Name
At the bottom of this page you will see the name server section as below:
One by one, click the Delete name server link next to each name server.

There should now be no name servers showing in the above section.
In the Enter Host Name of name server section, enter the below BC name server and click Add Name Server:

ns1.worldsecuresystems.com
In the same field, enter ns2.worldsecuresystems.com and click Add Name Server.
Enter the final name server of ns3.worldsecuresystems.com and click Add Name Server

You should now see the 3 Business Catalyst name servers as below:

Note: It takes time for a change to work its way through the Internet. It can take two or more days before you can access your website using your domain name.

Domain name FAQ

forums_noreply@adobe.com — Fri, 23 Mar 2012 03:24:08 GMT

Q. I have a domain name and need to redelegate it, but I'm not sure who my registrar is.

A. Yo can use whois service to find that information. A good tool can be found at http://whois.domaintools.com/

Simply enter your domain name in the box provided and click "lookup". You should see some domain related information, including the registrar name. If you can't see the registar there you will need dig through your old emails.

Q. When I go to my site i get "This webpage is not available" message

A. You need to make sure that your domain hasn't expired. Go to http://whois.domaintools.com/ and lookup you domain. You should see the expiry date in the information that tool returns. Make sure that the expiry dateis some date in future.

Q. How can I check if my domain has expired?

A. See the answer above

Q. How can I verify that my domain has been properly redelegated?

A. There are lots of ways to do this. You can use utilities that come on your computer (nslookup for Windows and dig for Mac and Unix based systems) or you can use an online tools such as http://www.dnswatch.info/ and http://whois.domaintools.com/

If you're using http://www.dnswatch.info/ simply enter the domain name inside Hostname or IP box and click on Resolve. You should see something like this:

Sender Policy Framework (SPF) - Document addressed only for customers that are NOT using Business Catalyst as hosting provider

forums_noreply@adobe.com — Wed, 03 Apr 2013 17:04:28 GMT

SPF General Overview:

SPF also known as Sender Policy Framework is a protocol that help you controlling forged e-mail. SPF is not directly about stopping spam, junk email. It is about giving domain owners a way to say which mail sources are legitimate for their domain and which ones aren't. While not all spam is forged, virtually all forgeries are spam. SPF is not anti-spam in the same way that flour is not food: it is part of the solution.

If a domain publishes an SPF record, spammers and phishers are less likely to forge e-mails pretending to be from that domain, since the forged e-mails are more likely to be caught in spam filters which check the SPF record. Therefore, an SPF-protected domain is less attractive to spammers and phishers. Since an SPF-protected domain is less attractive as a spoofed address, it is less likely to be blacklisted by spam filters and so ultimately the legitimate e-mail from the domain is more likely to get through.

How it works:

Let's say a spammer forges a yahoo.com address and tries to spam you. They connect from somewhere other than Yahoo.

When his message is sent, you see MAIL FROM: <forged_address@yahoo.com>, but you don't have to take his word for it. You can ask Yahoo if the IP address comes from their network.

(In this example) Yahoo publishes an SPF record. That record tells you (your computer) how to find out if the sending machine is allowed to send mail from Yahoo.

If Yahoo says they recognize the sending machine, it passes, and you can assume the sender is who they say they are. If the message fails SPF tests, it's a forgery. That's how you can tell it's probably a spammer.

This is definitely something that I want so what should I do next to have this in place?

Since you are not using Business Catalyst's hosting service you need to go to your hosting provider and create the following record:

Record name should be something like @(or enter the non-WWW domain) to map the record directly to your domain name

Record type should be TXT

Record value should be v=spf1 mx include:worldsecuresystems.com ~all

Record TTL should be 1 day (86400 seconds) - TTL represents how long the server should cache the information.

You have below links on how to add TXT records from some of the biggest hosting providers:

GoDaddy - http://support.godaddy.com/help/article/7925/adding-or-editing-txt-records

HOSTGATOR - https://support.hostgator.com/articles/specialized-help/email/problems-with-spoof-spf

BLUEHOST - https://my.bluehost.com/cgi/help/559

JUST HOST - https://my.justhost.com/cgi/help/559

Having trouble receiving emails sent from Business Catalyst? Learn about SPF (Sender Policy Framework) - Updated on 26.03.2013 after Business Catalyst March’s release.

forums_noreply@adobe.com — Wed, 18 Apr 2012 04:43:58 GMT

What is SPF and how I can benefit from setting a proper SPF record?

What does SPF actually DO?

Let's say a spammer forges a yahoo.com address and tries to spam you.

They connect from somewhere other than Yahoo.

When his message is sent, you see MAIL FROM: <forged_address@yahoo.com>, but you don't have to take his word for it. You can ask Yahoo if the IP address comes from their network.

(In this example) Yahoo publishes an SPF record. That record tells you (your computer) how to find out if the sending machine is allowed to send mail from Yahoo.

I’m not a programmer, I don’t understand this, I just want my email delivered!

Believe us, we feel your pain and we are here to help you!

If you are choosing to host your domain with us there is no need to do anything here. Based on our system architecture we are generating that SPF record so that all the emails sent from this domain will have include all the IPs from where emails are being sent and make sure that you will pass the SPF check.

Note, the from address should be set up to using the domain hosted with us.

If you are choosing to host the domain with an external provider you may need to define it at their end.

Keep in mind that you need to define the SPF record for the domain that you are using as as from address - http://screencasteu.worldsecuresystems.com/Andrei/2012-04-18_0755.png for emails sent from Business Catalyst (e.g. workflow notifications, invoice emails etc.).

Now let's see how the SPF record is being defined by Business Catalyst.

We are defining the SPF record as follows:

"v=spf1 mx include:worldsecuresystems.com ~all"

What this means? The “mx” means to include the MX records as being legitimate IPs for sending emails. So if you are using external mail services as long as emails are being sent through the MX IPs then the record cover this. Next we are including the domain worldsecuresystems.com. When including a domain, the SPF record will take all data defined in the SPF record for the domain included (this is by design).

If you check the SPF record of worldsecuresystems.com you will see listed all the IPs from where we are sending emails using ours or OpenSRS’ (our mail service provider) mail servers.

The last part ~all is an operator stating that if the email is received from an IP that is not listed in the SPF record then the email should be discarded. This is interpreted by the mail servers as possible spammer and act accordingly.

If you want to include other IPs or subnets all you have to do is to include the following syntax:

Ip4:XXX.XXX.XXX.XXX/YY where XXX.XXX.XXX.XXX is the IP from where you are sending emails and YY is the subnet. Also you can include domains by using include:domain.com if you want to use the hostname of the mail servers instead of IPs in case if IPs of the mail servers are changed periodically.

Here is how you need to define this record in BC if you want to add more IPs/domain - http://screencasteu.worldsecuresystems.com/Andrei/2013-03-26_1723.png

Note: The comments added prior to 26.03.2013 might contain obsolete information.

Recurring campaigns (beta)

forums_noreply@adobe.com — Wed, 13 Mar 2013 14:29:02 GMT

Overview

In the upcoming March release, we're introducing recurrent email marketing campaigns which will allow site owners to automate the interaction with their customers and save time while managing their site.

Recurrent campaigns is a natural addition to the already launched dynamic modules in email marketing, enabling new workflows like sending weekly emails with latest news, blog posts or web app items submissions.

How to create and use recurrent campaigns

Enabling recurrent campaigns

Enabling this feature under Site Settings > Beta Features > Email Marketing will add an additional email campaign type to the email marketing wizard. One enabled, you will be able to select between daily and weekly recurrent email campaigns.

Creating recurrent campaigns

To create a recurrent campaign, just create a new campaign and select recurrent for the campaign type. You will be able to choose between creating a daily or weekly recurrent campaign and be able to pick a variety of recurrence patterns in order to match your business needs.

Note: To fully take advantage of this feature, we recommend using recurrent campaigns with dynamic modules (e.g. sending weekly updates including latest news, or blog posts)

Viewing reports

In the email campaigns, recurrent campaigns are represented as follow-up campaigns, with the master campaign at the top level, and each recurrence as child campaign.

Each campaign recurrence will have individual campaign reports that can be viewed by viewing the campaign details.

Stopping a recurrent campaigns

To stop a recurrent campaign, you can just save it in the draft mode (same as for other campaigns) - click on Pause and Save and Draft.

What's missing and known issues

No support for monthly or yearly recurrent campaigns

Where to report issues

Please use this thread to post your feedback or requests about this feature. We would like to have it as open discussion about what's currently in the release, and what is absolutely required to make it work for you.

Note: Beta features are not officially supported and we do not offer a guaranteed response time. We usually respond within the next 48 to 72 hours, but this might vary depending on the team load and issue urgency.

Captcha Refresh

forums_noreply@adobe.com — Thu, 24 Jan 2013 22:52:54 GMT

What is captcha?
Captcha is the image and text field you add to forms to prevent spam bots filling out your forms. It is the image you see and have to type out the letters from that image.

Why you can not do this?

Currently In Business Catalyst there is no native way to have the captcha image refresh. Support will advise that this is not possible as well.

Why do you need it?
With the original version users of a site sometimes could run into issues guessing the current image they see and the only way to get a new image is to refresh the page.
With the addition of the harder captcha image these issues can increase further.

So is it possible?

Most people will tell you - No, BC needs to do this but there is a sollution!

Solution

Basics

What you need is to refresh the image to get a new one. But not only that you need to refresh all aspects of the captcha on a BC form to ensure the input field and all other aspects are also refreshed.
You can achieve this with javascript and partial refreshing of a page.

Traps
Out of the box ajax refreshing part of a page will not work correctly in IE. The reason for this is that IE “Cheats” Its performance by heavily caching content and images and will refuse to release or update that cache when implementing ajax features.

The Solution

Here is the code to make it all work and we will break it down below;

note: This demo has $j which is used in regards to the jquery compatability mode.

Javascript:

//Actual Function
function captchaRefresh(){

if ( $j("#CaptchaV2").length ){

$j("#reload-captcha").click( function(){
$j("#captchaReload").load(location.href+"?cps="+Math.random()+" #captchaReload>*","");
return false;
});

}

// To run the function

captchaRefresh();

HTML:

<div class="clearfix captcha-region">

<div id="captcha-reload" class="clearfix">{module_captchav2}</div>

</div>

I have gone with making a content holder for this which you can call CaptchaV3. This makes it very easy to replace and update the captcha module on any form.

/_System/ContentHolders/captchav3.html

So your Content holder would look like this:

<div class="clearfix captcha-region">

<div id="captcha-reload" class="clearfix">{module_captchav2}</div>

</div>

And you can call it this:

{module_contentholder,name="captchav3"}

Simply replace your captcha module with this and update your layout if you need to for your form.

Here is how it will look:
(Image for the button can be whatever you want it to be)

What's Going on?

It looks really simple hey? It actually is but the thinking behind it and the few little aspects of it are key to its success.

This is a function you can place in your script files and then you can call the function.

So what is going on?

if ( $j("#CaptchaV2").length ){

This is basically a simple check to see if the element exists

$j("#reloadCaptcha").click( function(){

This is the trigger, when you click the refresh button you added something will happen.

$j("#captchaReload").load(location.href+"?cps="+Math.random()+" #captchaReload>*","");

Many will know jQuery’s really nice .load but what you may not realise is you can actually self load an element. This is what is happening here.
We are updated the current pages Captcha area element with itself thus refreshing the captcha image and all its workings too!

But what abou tthe Math.random bit, what is all that about you may think?

Well, if you remember I mentioned IE and its caching pain. IF we did not have this the method would not work. No matter how many times you would press the button in IE the content including the image would not refresh itself, IE has cached it and won't let it go.

SO, what you do is trick IE to thinking your loading new content. You do that by passing a variable with current URL used to trick IE to thinking this is totally new content and thus will work in iE.

DEMO

Via: http://bcevangelist.businesscatalyst.com/

Add or remove credit card types from the checkout form

forums_noreply@adobe.com — Thu, 10 May 2012 09:37:19 GMT

If you need to remove some of the Credit Card types from the online shop checkout form, you need to do the following:

Go to Admin > More Customization Options > Online Shop Layouts. Click <> for HTML view and find the code that look something like this:

<option value="2"> Master Card </option>
<option value="3"> Bank Card </option>
<option value="4"> American Express </option>
<option value="5"> Diners Club </option>
<option value="6"> JCB </option>

You simply then have to remove the the options that are not required.

Supported credit card types

A list of the available card types is as follows -

Visa = 1
Master Card = 2
Bank Card = 3
Amex = 4
Diners Club = 5
JCB = 6
Discover = 7
Maestro = 8 (Note - See below re UK Cards)
Visa Delta/Electron = 10 (Note - See below re UK Cards)

Editing United Kingdom Debit Cards

Adding support for UK debit cards to your checkout form

You will need to update the following aspects of your Online Shop - Registration (Buy) layout in order to gather all the data needed to accept Maestro, Delta, and Electron cards:

modify the CardType field - add the following options:
- <option value="8">Maestro</option>
- <option value="10">Visa Delta/Electron</option>
add a CardIssueNumber textbox
copy the CardExpiryMonth and CardExpiryYear fields and create two new fields, CardIssueMonth and CardIssueYear.

Note for PayPal users with UK Cards

If you use PayPal and want to use Maestro you need to modify the CardType field differently. Please use the fillowing options -

<option value="11">Maestro</option>

Email Lists Filtering with Business Catalyst (beta)

forums_noreply@adobe.com — Mon, 22 Oct 2012 10:31:41 GMT

What is email filtering?

A while ago while talking to various online marketers and BC partners, we realized that the current email marketing solution inside Business Catalyst lacks a simple functionality that can empower everybody to better use email marketing. We call this feature "Filtering" and it will enable partners or business owners to better target subscribers of their mailing lists based on concrete business criteria.

This way you can make sure that you send relevant content, discounts, offers to your recipients. Today we are launching the beta version of this feature.

On a broader level, you can generally filter mailing lists based on categories such:

demographics
geography
activity on the website
economics - product purchases
subscriber validity in the mailing list

And when it comes to filtering, the possibilities are endless, as you can always get more and more granular with your filtering criteria. Research shows that filtering lists prior sending increases email deliverability, open rates, click rates inside a newsletter and even campaign purchases.

Example - business case

You or your customer may want to send a 50% discount for a romantic trip in Caribbean Islands this Christmas only to young couples with high spending behavior.

This way you will make sure that you don't send this offer to low spenders, who never travel anywhere during Christmas. Therefore you will have more accurate conversion rates and the messaging can

be more appealing for your target audience.

So, how can you do this with Business Catalyst? See the video below -

For a higher quality of the video, access this link. You will need to have the Windows Media Player plugin for the browser enabled.

Which are the current released filters?

In order to enable this feature, go to Site Settings>Beta Features and check the "Enable" box.

This feature is in Beta because it doesn't have all the filters that we planned for it. Right now you can apply the following criteria to your mailing lists:

Demographics: City, Country or Zip Code
Date of birth
Purchased value (with period of time) based on the currency of the site
Age of the subscriber (when the subscriber was added to the list)
The relationship between the filters can be OR ('Any') or AND ('All'). this relationship is applied to all filters; you can't have different relationships between different filters - (e.g. - between Filter 1 and Filter 2 you will have "AND" and between Filter 2 and Filter 3 you will have "OR".

What next?

We plan to add the following filters:

Added to cart but did not purchase (with period of time)
Sex of the subscriber (female, male)
Received a certain campaign in the past - usually used for follow-up campaigns
Opened a certain campaign in the past- usually used for follow-up campaigns
Clicked a link inside a previous campaign - usually used for follow-up campaigns

Other improvements

Refresh for the calculation of the number of subscribers after applying the filter will be automatic (right now you need to press the "refresh" button).
You will be able to launch a follow-up campaign after a current campaign is sent.

Known issues

Filtering can't be applied to loyalty campaigns yet.
You can't save a filtered list.
You can't save a set of filters to apply it to a different campaign.
For the filter "Purchased more than", the amount is considered automatically in the default currency of the domain. We will make it more obvious and add the possibility for the user to choose different currencies at next release of this feature.

So, in order to successfully improve this feature and launch it officially, I would like to invite you to test it, play with it, apply it to new campaigns and give us feedback here, in this thread.

UPDATE: we're taking this feature out of "Beta". Hence it will be available for all sites without activation. We've fixed some of the visual glitches and added product specific filters ("Purchased product", "Did not purchase product", "Added to cart but did not buy"). Further we'll be implementing some more filters.

Thanks,

Dragos MANESCU

CSS Styles are Missing in WYSIWYG Editor

forums_noreply@adobe.com — Tue, 11 Dec 2012 23:07:11 GMT

How the Apply CSS Class dropdown works by default

Below you can see two screenshots showing the reference in the <head>…</head> to a CSS file, and on the right side the output of this in the Apply CSS Class dropdown.

This dropdown takes the CSS styles defined inside the <head>…</head> tags of a page or template and defined

Controlling which styles appear in the Apply CSS Class (or limiting the CSS Classes)

This tutorial is covering the steps required to add CSS Styles to the WYSIWYG editor as well as in the Site Editor so you will enable your admin users to easily manage what content will have what CSS rules applied.

This tutorial requires some general understanding of CSS and HTML and more details can be found on http://www.w3schools.com/

To enable the styles in the dropdown menu involves the following actions:

Create your CSS file that will hold the rules, you must decide where will be accessed from and what name this file will have. For this example we will use a file named “default.css” and will place this under the folder named “stylesheets”

You can create this file either by using your preferred text editor and upload it via SFTP or you can just add a new file through Alpha File Manager

How to SFTP: http://kb.worldsecuresystems.com/kb/connecting-your-site-using-ftp.html

File Manager:

Refer the CSS file in your template, so all files that will have the template applied will have the options available in the class dropdown. As any other CSS file refer this between the <head>…</head> tags of your template.

Using the above details our example will look similar to this:

<head>

…

</head>

How to add ID’s and Classes into Online Editor

Lastly, after you have the CSS file created and referred in your template you can add the ID’s and classes under your Partner Portal. You can add them here: Partner Portal > Tools > Online Editor Settings > select your site from the dropdown > Editor Apply CSS

Visiting your page or template should now display the ID’s or classes added to your editor.

*NOTE: It works only for classes, and they have to be specified by .class, and id – which have to be entered as #id

** NOTE: after making changes to the PP setting, clear your browser cache to make sure that the dropdown list of CSS classes is updated properly.

Known Limitations:

- It does not work for stylesheets imported with @import

Using jQuery with BC - A good approach.

forums_noreply@adobe.com — Wed, 09 Jan 2013 09:17:04 GMT

What is jQuery?

jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development.

Business Catalyst is a hosted solution, also known as a Software as a Service (SAAS) system, which means that you cannot develop with the server-side code. However, you can implement JavaScript and utilise the Business Catalyst API and work with Business Catalyst.

In this article, you'll learn how to use the jQuery JavaScript Library to enhance the functionality of your Business Catalyst sites. You'll also find strategies to speed productivity and reduce development time. And you'll get tips and best practices to implement jQuery efficiently when building features in Business Catalyst projects.

Working with jQuery

To get started, you'll need to obtain jQuery. You can download the latest version from the Official jQuery site.

There are a few methods of calling jQuery on your websites. Here are two options:

1. Download the JavaScript file and then add the following line of code to launch it:

<script type="text/javascript" src="/js/jQuery.min.js"></script>

2. Link to the most recent version of jQuery via Google Hosted Libraries.

Note: Using the Google Hosted Libraries content delivery network to serve your jQuery directly from Google's network of data centers has a number of advantages compared to hosting jQuery on your website. Benefits include decreased latency, increased parallelism, and better caching.

If you choose the Google Hosted Libraries option, there are two ways you can load jQuery and other Google Hosted Libraries into your website.

1. Directly link to the hosted JavaScript file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

2. Create a load request:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript>
     google.load("jquery","1.8");
</script>

The Google load request method is helpful because you can load many other Google Libraries at the same time, such as the jQuery UI or Google Map API functionality. To learn more about the Google load request method, read the Google Loader Developers Guide.

Avoid code conflicts with jQuery compatibility mode

When implementing jQuery on a Business Catalyst website, it's important to use jQuery compatibility mode to avoid potential code issues. Business Catalyst uses a JavaScript library known as Prototype to run site features, such as the lightbox in the Photo Galleries module. Prototype has a coding structure similar to jQuery. To avoid conflicts between Prototype and jQuery you should look to implement the compatibility mode as standard in all your projects.

You can use the jQuery n0Conflict method to ensure jQuery functions correctly. You can declare the noConflict method like this:

$j = jQuery.noConflict();

Add this line of code at the beginning of your script files, either inline or in your main DOM Loading script file. You must also update any instances of $ in the code to $j .

Use external scripting files instead of inline scripts

There are many ways to implement jQuery. Online tutorials will often provide instructions on how to copy and paste code inline into your templates and layouts. While inline coding is easy to do, it creates several problems. Adding inline code is not an optimal implementation of jQuery and it is difficult to manage. An external script has many advantages such as:

Create one file of JavaScript code to affect multiple pages, rather than having to paste the code into each separate file repeatedly.
Inline jQuery calls often initiate the DOM multiple times and will hinder performance.
Modern programming techniques require a method of code implementation that separates structure and content from presentation and functionality. HTML files should contain structure and unique page content, CSS files contain the style information, JavaScript files contain the code for client-side functionality, and system code contains the server-side functionality. Projects constructed in this way are easier to update and maintain and perform better.

Writing functions to compartmentalize site features

Creating functions when developing your code enables a "use once" or "use many" methodology which helps bolster performance and improve manageability. Additionally, projects that utilize functions are easier to upgrade. Functions are chunks of code you can call that together achieve a more complex task, and are not executed until they are called. Unlike regular lines of code, the execution of functions is deferred until you want to use them. The following is an example of a function:

function copyAddress(){ 
      if ($j(“#shippingAddress”).val() == ""){                            
             $j(“#shippingAddress”).val($j(“#billingAddress”).val()); 
      }
 }

This function is only a snippet of a larger function you could develop to set the visitor's shipping address to the same value as their billing address. For example, you can call this copyAddress function on any jQuery event, such as a click event or in another function. This will execute the code shown in this example in another function, to trigger the functionality shown above. Creating these functions in a single “functions” JavaScript file allows for good maintainability and speedier development. In more advanced implementations, you can explore JavaScript as objects and classes or build your own jQuery plugins.

Only call the DOM once

The Document Object Model (DOM) is the ideal location to place JavaScript to extend the functionality of your website. While there are many Business Catalyst websites out there using jQuery, these often use inline code to call the jQuery scripting and the DOM is called multiple times. This is not recommended. Inline code creates a number of issues. One of the more obvious problems is performance degradation. Instead of inline code, create a single call script (dom.js for example) coupled with your functions file to implement jQuery into your site and avoid potential issues with performance.

Using a DOM file

With this method all your code execution can be done in one DOM in a single file. The following code is an example of the DOM file structure:

$j = jQuery.noConflict(); 

// DOM LOAD
$j(function(){
     // Code Execution   
     copyAddress(); 
});

The first line of code declares the noConflict method. Next, the DOM is launched only once, and then one of the site's functions is run. Now this function will always run, which is not optimal. In this example, it's likely that copyAddress function is only needed when receiving a payment from the Business Catalyst eCommerce system.

However, there is clever solution to run code when you need it to. This strategy involves using a bit of JavaScript called .length. You can write an if statement around the function and use .length to detect if an element exists. This enables you to only call the function when it is needed. After making these changes, the

DOM file looks like this:

$j = jQuery.noConflict();

 // DOM LOAD
$j(function()
{
       if ( $j(“#myform”).length  ) {
                copyAddress(); 
             }
});

The if statement ensures that the function will only run if that element exists. This practice helps avoid JavaScript errors that may occur, such as returning a Null value. Null value means that the JavaScript could not find the element in the function to perform the action or if a value is not found and thus considered Null (nothing). This helps avoid certain errors from occurring and scripts running when not needed which bolsters performance.

To call these JavaScript files, place the following script tags at the bottom of template code, immediately before the closing body tag.

Note: Implement jQuery itself in either the local method or Google implementation outlined at the start.

Adding the script tags in the HTML body element instead of the head is another strategy you can use to improve the performance of your website.

Use jQuery plugins

You can also add jQuery plugin calls inside your functions, as shown in the example below:

function profilePage() { 
$j("#profileFeed").fadeIn("slow"); 
$j("#playVideo").prettyPhoto({ show_title: false, deeplinking: false });
 }

As you can see, you can perform an action such as the jQuery fadeIn before a plugin call, and then you can run code after it as well—all within one function. For this example, the prettyPhoto jQuery plugin is called afterwards. Notice that the code is running the compatibility mode mentioned previously. To learn more about working with jQuery plugins, visit the jQuery plugins archive.

Where to go from here

This article only scratches the surface of the possibilities when implementing JavaScript in your Business Catalyst projects. To expand on these concepts, look into using an object-based approach when authoring code and functions, or writing JavaScript classes for better object-oriented development can be explored.

The goal is to strive for a clean and simple implementation. Set up functions to only execute when you need them. This strategy allows you to recall your functions and create code that has a specific purpose, which can be repurposed later for other site features. To learn more about using jQuery, visit the jQuery website.

To research further, check out the following online resources:

Taking your sites to the next level with Business Catalyst with jQuery: Adobe TV
Getting started with jQuery: Six Revisions site
Thirty jQuery tutorials for beginners: Webitect site
JavaScript code examples: Business Catalyst Knowledgebase

Setting up UPS Shipping

forums_noreply@adobe.com — Thu, 27 Dec 2012 01:20:46 GMT

Hi All,

This is the latest info we have on setting up a UPS account. If you find any of the steps are different, feel free to add a comment below with the updated procedure. Thanks!

To get XML access key, these are the steps provided by UPS support:

Browse to http://www.ups.com/onlinetools.
Click on the Register button, located to the right of the screen.
In the Complete Information for My UPS Registration box, enter your name, e-mail, user ID and password. Click on Next.
Complete the "UPS Registration" window, then click on the Next button.
Once registered for My UPS, click on the Business Solutions tab and a new page will appear.
Under the Most Popular Solutions section, click on UPS OnLine Tools.
On the UPS OnLine Tools page, click on Get OnLine Tools.
In the gray box for Standard Tools, select the desired tool.
Enter and verify your information and then click on the Submit button. You must enter your UPS account number where indicated or the Developers Key will not be issued.
In the gray box on the next web page, you will be given your registration confirmation. Your Developer’s Key will be e-mailed to you in just a few moments, so leave this screen open and monitor your e-mail until you receive the Developer’s Key.
Once you receive the Developer’s Key via e-mail, copy it, go back to the UPS OnLine Tools web site, and click on the tool that most applies to you.
On the next web page, click on the Download link next to the version of the tool (XML or HTML) you want. After you have downloaded the documentation, you can click on Get Access Key on the right side of the screen.
Select the type of Access Key you desire, XML or HTML.
Enter your Developer’s Key and click on Submit.
Verify that all the information in the bold type fields is accurate and complete on the Provide Additional Information page and click on Submit.
Your Access Key will appear on the screen. It will also be sent to the default e-mail address in your UPS.com profile.

Information to enter into the BC admin of the Shipping options screen is as follows:

Account Number = XML Access Key (16 digit alphanumeric). Get this by going through the 16 step process above.

User ID = Your UPS.com ID

Password = Your UPS.com Password

UPS 2nd day Air service

Please note that the service area for this service is only within the US and is not available to Canada.

Why is my FTP not working? [12th Dec 2012]

forums_noreply@adobe.com — Tue, 11 Dec 2012 07:44:58 GMT

Please see the following link:

http://www.businesscatalyst.com/_blog/BC_Blog/post/Reminder_Please_switch_to_SFTP_by_Decem ber_12/

Business Catalyst has switched to a more secure connection option called SFTP. FTP has been depreciated as of the 12th of December 2012.

How to connect using SFTP can be found here: http://helpx.adobe.com/business-catalyst/partner/connecting-site-using-ftp-client.html

Dynamically generate thumbnail images

forums_noreply@adobe.com — Thu, 10 May 2012 13:05:35 GMT

BC is designed with the functionality to automatically scale and display thumbnail images (smaller versions) of existing image files in your site. In this article, you'll learn how to add code to your pages and leverage this capability, so that you don't have to manually create smaller versions of the image files and upload them to the live site.

Adding code to generate a thumbnail image from an existing image

Begin by accessing the source code for the page. Select Site Manager > Pages and select the page from the tree view.
Click HTML below the content editor to see the source code.
Place your cursor at the location on the page where you want to insert a thumbnail image. Type the following code:

<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80" />

In the example above, replace this part of the code:

/folder_name/image_file_name.jpg

With the actual path to your full size image file, like this example:

/images/logo.png

Also, update the two numeric values in the following part with the width and height of the thumbnail you want to display (in pixels):

Width=80&Height=80

For example, if you'd like the thumbnail image to be 70 pixels wide by 50 pixels high, update the values like this:

Width=70&Height=50

Note: You do not need to specify both width and height. You can specify one of these dimensions and Business Catalyst will proportionally resize the image based on this dimension.

Setting the aspect ratio of the source image that is resized

If you want to preserve the aspect ratio for the larger image size (to prevent a squashed or squished looking thumbnail image), you can add an additional parameter, thumbnail, to the <img> tag, as shown in the example below:

<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80&algorithm=fill_proportional" />

The algorithm parameter accepts the following three values:

proportional
fill
fill_proportional

The default setting for the thumbnail generator is proportional; if you want this setting, you don't need to add the parameter. Here's a description of the results of each value:

proportional: The thumbnail maintains the aspect ratio of the source image and uses the specified width or height of whichever side of the image file is proportionately bigger.

fill: The dimensions of the thumbnail are resized to fill the specified Width and Height settings as defined in the parameters; the aspect ratio of the original source image is not maintained.

fill_proportional: The dimensions of the thumbnail are resized to fill the specified Width and Height settings as defined in the parameters; the extra pixels from the top/bottom or left/right are cropped on whichever side of the image is proportionally larger, if needed, to maintain the aspect ratio of the original source image and ensure that the thumbnail does not look squashed or squished. If the desired thumbnail dimensions are larger than the source image dimensions then the image is not resized and transparent pixels are added around the image.

Setting the output format of the generated thumbnail image

You can set the output format of the generated image by appending the &Format= parameter.

For instance, to generate the thumbnail in .png format, this would be the thumbnail URL:

<img src="/folder_name/image_file_name.jpg?Action=thumbnail&Width=80&Height=80&Format=png" />

Accepted output parameters include png, jpg and gif.

Generating thumbnail images for Web Apps

Similar to the process of displaying thumbnail images on web pages and photo galleries, you can also generate thumbnail images programmatically for Web App image content. Simply add parameters to the image source tag as shown in the following example:

<img src="{tag_myimage_value}?Action=thumbnail&Width=80&Height=80" />

In the example above, the part {tag_myimage_value} is replaced with the path to the full sized image when the Web App is dynamically rendered by the browser.

The system uses the data of the full size image to automatically scale it to the height and width values (in pixels) that you specify in the parameters of the <img> tag.

Generating thumbnail images for products in an online store

Programmatically generated thumbnail images are also very useful when displaying product images in a catalog.

Here's an example of an image tag used to generate a thumbnail image of a larger product image:

<img src="{tag_largeimage_path}?Action=thumbnail&Width=50&Height=50" />

In the example above, {tag_largeimage} was originally our dynamic image tag. However, we appended _path to the tag. Doing so will output the path to the full sized image. The same method will work for {tag_smallimage}.

Options for placing site(s) on hold

forums_noreply@adobe.com — Wed, 28 Nov 2012 21:28:14 GMT

Business Catalyst cannot pause a paid site for a period of time and then resume its activity at a later date. Both paid and Trial sites take up resources and for this reason we cannot keep sites on hold for resumption at a future date. If you want to pause a site due to unpaid fees to you by your client, as the Partner you have a number of options available to you.

You can remove the user/s of a site and add them once more when you have received their payment. However, please note that if the user is using our POP email removing a user will delete their email account. Before you proceed with this we recommend that you back up their email account.

You can change the start page that their domain is pointing to. You can do this under Start Page > Website > Web Pages > Uncheck the Enabled check box > Save & Publish

Finally, you could change the permission of the user/s so that they do not have access to the Webpages.
Since pausing a site is not possible and it's likely that you will require your site again in the future you might consider downgrading it to lower cost plan in order to avoid permanent deletion of the site (please keep in mind that data and functionality from a site on a plan higher is lost once the plan is downgraded to a lower plan). For more information on our plans please visit our Business Catalyst website. And finally if you no longer require the paid site you will need to cancel the site via your Partner Portal. Once a site is canceled, it is not retrievable at a later date.

To cancel a site, this is handled by you directly from within your Partner Portal > Clients - choose site & select to 'Delete' this site. Please ensure you action this prior to their next hosting renewal invoice date to ensure no further hosting invoices are processed: http://screencast.com/t/ZjViZTNjZ

Getting Started FAQ for Creative Cloud, Muse, and Dreamweaver users

forums_noreply@adobe.com — Mon, 26 Mar 2012 01:54:00 GMT

What is Business Catalyst?

Business Catalyst is a web application for building and managing websites and online businesses. All you need is a browser. You don't need to install any software.

Basic features include:

web hosting
page creation and design
site management
web analytics

More advanced Business Catalyst plans include:

email marketing
eCommerce
an integrated customer database

For more information, see the BC FAQ.

What's included in my subscription?

A Creative Cloud subscription includes hosting for five Business Catalyst sites.
A Muse subscription includes hosting for one Business Catalyst site.
A Dreamweaver subscription includes hosting for one Business Catalyst site.

Where are my files?

Click Site Manager > Pages. To work with your files, see Working with Pages.

I created my pages in Muse. Can I update them in Business Catalyst?

Yes, but your changes won't be reflected in Muse. If you created the page in Muse and you want to keep using Muse, Adobe recommends that you edit the page in Muse instead of Business Catalyst, and then upload it to Business Catalyst again. If you modify the page in Business Catalyst, your changes may be overwritten the next time you update the page in Muse and upload it to Business Catalyst.

Where can I get help?

Deploying your site across Mobile and Tablet devices

forums_noreply@adobe.com — Tue, 27 Mar 2012 06:15:23 GMT

The mapping is done based on user agent strings and some internal rules. If the device cannot be determined by its user agent or it does not fall in any of the existing device classes, the default desktop device class will be used. The module {system_visitorDeviceClass} renders the device class value (e.g. phone) corresponding to the device used to browse the site. This module won't be counted against the 75 modules limit per page.

Device-specific styling

You may want to provide specific styling for certain devices, there are two options:

1. Including device-specific stylesheets as below:

<link rel="stylesheet" type="text/css" href="/css/{system_visitorDeviceClass}.css" />

This will include desktop.css, tablet.css or phone.css.

2. Include the tag as a class on your body tag

<body class="{system_visitorDeviceClass}">

Redirect visitors to a mobile site version

Using javascript, you could test for specific device class values and performs custom actions. For example, a site homepage could redirect phone visitors to a focused mobile website:

<head>
<script type="text/javascript">           
if ('{system_visitorDeviceClass}' == 'phone') {
        window.location = 'http://mysite.com/m/';           }        
</script>
</head>

Device-specific content

If you'd like to serve device-specific content as part of a template or page, you could achieve this by using the device classs as part of a content holder name as below:

<!-- {system_visitorDeviceClass} -->
{module_contentholder, name="home_{system_visitorDeviceClass}"}

The above snippet will include one of these content holders: home_desktop, home_tablet, home_phone

Technical details

Choosing what device class is used is done by the following criteria, in priority order:

URL query string parameter, if set (e.g. ?visitorDeviceClass=phone). This will also set a cookie with the specified value. ?visitorDeviceClass=auto will clear the cookie and enable again auto-detection.
device class cookie, if set
user agent string auto-detection and defined device classes capabilities
default content

Best practices

Here are some articles outlining best practices when building multiscreen sites:

Cannot "Get started" or publish a site from Dreamweaver CS6 because the account is not associated with Business Catalyst account - technote

forums_noreply@adobe.com — Wed, 23 May 2012 11:51:20 GMT

This technote will show how you can solve the issue you have just encountered when trying "Get started" the Business Catalyst extension from Dreamweaver CS6

Problem

I cannot "Get Started" the Business Catalyst extension from Dreamweaver CS6. This is the error message I receive: "An account with the same email already exists in Business Catalyst. To associate the Business Catalyst account with your AdobeID, please log in to the Business Catalyst web administration console."

Setup (or impacted users or workflow)

This is the workflow I’m doing:

- I have previously login to Dreamweaver CS5.5 or an older version with an old BC account

- I have installed Dreamweaver CS6 and kept the same account

- I have/haven't an AdobeID, but I didn't sign in with it in Dreamweaver CS6.

- I try to "Get started" the Business Catalyst extension and I receive the following error message:

Solution

This issue happens only when an old Business Catalyst account is associated with the login credentials of Dreamweaver CS6.

You will need to follow these steps in order to solve it:

1. Go to Help -> Deactivate...

2. Deactivate successfully the Adobe Dreamweaver CS6 and close the application

3. Re-open Adobe Dreamweaver CS6 and when the "Sign In Required" screen appears, choose your correct Adobe ID

If you run into any other issues, please contact the Business Catalyst support team by clicking the Help & Support button on your site.

Cannot login from Muse to Business Catalyst site because of an infinite loop - technote

forums_noreply@adobe.com — Mon, 21 May 2012 11:29:27 GMT

This technote will show how you can solve the issue you have just encountered when trying to login to a site from Muse

Problem

I cannot login to my partner site from Muse because I am asked to enter the credentials then redirected back to the preivous menu -

Setup (or impacted users or workflow)

This is the workflow I’m doing:

- I have a new AdobeID from Creative Cloud Membership (CCM)

- I have installed Muse and I am asked to enter the credentials

- After inserting them I am redirected back to the first screen: "Further account information is required to use Adobe Muse"

- This loop becomes infinite

Steps of the problem: http://screencasteu.worldsecuresystems.com/Alex/2012-05-16_1546.swf

Solution

This issue happens only when inserting the new credentials that you have just setup for CCM.

The workaround in to enter the old credentials that you used in order to login to Muse. Then go to to Deactivate Adobe Muse as per the following screenshots:

After this, you need to re-open Muse and login with the new credentials.

If you run into any other issues, please contact the Business Catalyst support team by clicking the Help & Support button on your site.

I'm asked to Login to Business Catalyst - what credentials do i use?

forums_noreply@adobe.com — Thu, 10 May 2012 17:39:06 GMT

Problem

In the Creative Cloud dashboard, when I click on the "Manage" link for one of my sites in the bottom right panel, I'm asked to login again. Which credentials do I use?

Setup

1. I am logged into Adobe Creative Cloud, and I'm clicking on the "Manage" link from the Websites section, in the bottom right corner.

2. At this point, I'm asked to login to Adobe Business Catalyst:

3. What credentials do I login with?

Solution

Use your Adobe ID credentials (username and password) to login. If you don't remember your Adobe ID password, click on the "Lost your password" link, enter your Adobe ID email address and a reset password email will be sent to your address.

Error when trying to create a new site from Creative Cloud - technote

forums_noreply@adobe.com — Fri, 04 May 2012 10:01:15 GMT

This technote will show how you can solve the issue you have just encountered when creating a new site.

Problem:

There was an error with your Adobe ID account and we are not able to start the Business Catalyst site builder. Please read the following article from our knowledgebase on how to resolve this situation

Setup:

This is happening if you already have an Admin account (not a Partner account) with Business Catalyst and you try to launch the Creative Cloud site builder.

Solution:

To solve this, please try and create a site and an account from the standalone version of Business Catalyst, here: https://syd.worldsecuresystems.com/PartnerPortal/FreeTrialSignup.aspx#splash
Go through all the steps and create a new site and enter the same account details that you have used before
After the site and account are created successfully, you shouldn't have any other problems creating sites from either Creative Cloud, Dreamweaver or Muse

You can also go back to the workflow that you were using before and create that site - it should be created properly.

If you run into any other issues, please contact the Business Catalyst support team by clicking the Help & Support button on your site.

Cannot login to my partner site after signing the new Terms of Use - technote

forums_noreply@adobe.com — Tue, 08 May 2012 20:36:39 GMT

This technote will show how you can solve the issue you have just encountered when trying to login to a site and asked to sign the new Terms of Use (TOU)

Problem

I cannot login to my partner site (or any other site from the list) after signing the latest TOU and choosing the site from the presented list of sites.

Setup (or impacted users or workflow)

This is the workflow I’m doing:

- I’m trying to login to my site

- I’m logging in and I’m asked to sign the latest TOU

- I sign it and then I’m asked to select my site

- I select the site and click Login, but I’m not logged in

Solution

This issue happens only when you’re asked to select the site from the list.

The workaround in this case is to go to the secure URL of your partner site, and login through there. For example, if your partner site system URL is mysite.businesscatalyst.com, login to mysite.worldsecuresystems.com/admin

If you run into any other issues, please contact the Business Catalyst support team by clicking the Help & Support button on your site.

Business Catalyst error messages explained

forums_noreply@adobe.com — Tue, 03 Apr 2012 03:58:51 GMT

This document is a place for BC errors and their explanations. We will be adding errors to it as we come across them on this forum.

Error Type	Explanation
Payment Gateway Errors
When i try to process a payment I receive this error: An error occurred while processing credit card Token was null or empty. E00044	This error is usually thrown by a recurring gateway, Authorize.net or PayPal Website Payments Pro and for some reason the token is missing against the initial (master order). The usual cause for the token missing is because, in case of Authorize.net, the CIM is not enabled. The CIM stands for Customer Information Manager and it must be enabled on Authorize.net accounts in order to process recurring payments. It's an additional service from this gateway which is not enabled by default.
When i try to process payments using Moneris gateway , i receive this error message : Gateway Response: Wrong access. 099	This error is returned by Moreis gateway. You need to contact Moneris for more information related to this. Moneris list this error code as: 099 DECLINED RE-TRY INVALID CARD NO Try testing this using a different credit card or contact Moneris for more information
I receive this error when I try to process payments using Authorize.net: The merchant login ID or password is invalid or the account is inactive. 13	Please note the error “The merchant login ID or password is invalid or the account is inactive” is being returned from Authorize.net and it seems to have to do with the account being active. It may be worthwhile to check that your username and password are correct with authorize.net, and that your authorize.net account is indeed active.
I receive this error when I try to process payments using Authorize.net: "This transaction cannot be accepted. 103"	"The error message is "This transaction cannot be accepted 103" - and this is passed to BC by the gateway (Authorize.net). Looking further at the reasons for the error, it seems there is some form of error with the Authorize.net credentials - Link "A valid fingerprint Transaction Key, or password is required for this transaction." You should contact Authorize.net to ascertain why the payment gateway account credentials are throwing the error.
I receive this error when I try to process payments using Authorize.net (TESTMODE) Transactions of this market type cannot be processed on this system. 87	The error is coming from the gateway and indicates that there is something wrong with your account. You can resolve it by contacting Authorize.net.
I receive this error when I try to process payments using Eway: Gateway Response: 30,Format Error	From eWay's docs: Gateway Response: 30,Format Error The transaction --- The transaction message was formatted incorrectly. Contact Bank Helpdesk You need to contact eWay for further clarification.
I receive this error when I try to process payments using Authorize.net: "This transaction has been declined 205"	From the authorize.net site and according to their documentation, the error you are getting "This transactionhas been declined 205" is actually related to in incorrect merchant number. "The value submitted in the merchant number field is invalid." Please refer to the below link and search for "205" http://www.authorize.net/support/merchant/Transaction_Response/Response_Reason_Codes_and_R esponse_Reason_Text.htm
I receive a error when i try to process payments using Moneris Payment Gateway: Transaction not allowed. No permission for:'cvd_info'	The message “Transaction not allowed. No permission for:'cvd_info'.” is being passed by the payment gateway. Moneris should be contacted to conform your account details are correct, and confirm that the account is ready to accept payments. It may also need to have ‘fraud management’ disabled.
Admin Login Errors
ERROR: Either your username, password or both are incorrect [ERROR: 1].	If you are trying to log into Admin and you receive this error, it means that your username belongs to this site and has admin enabled, but your password is incorrect. You need to use Lost your password? link on the login page to retrieve the password. If you're a partner and the site you are trying to access is under your partner portal you can go to Clients tab, find the site you are trying to access and reset the password for that user there. Once you log in with the new password you can update it under Home > My Details page.
FTP Errors
I'm receiving the following error message when I try to create an item on my site using an FTP client "ERROR: URL must be unique within the site. Please edit the URL to enter an unique value."	he reason why you are getting that error message is because you are forcing the creation of an element on your site, by using FTP, using an existing name. All the elements (web pages, products, literature items, folders etc.) on a site should have different names no matter the fact that the URL will built by the system in some cases will not be the same as the one with the other element (the product URL will be built by the system using the catalog name first and then the product name e.g. www.domain.com/catalogname/productname). If you re-name an item and try to use after, the same name of an existing item, you will see that the system will place the "-1" after the name indicating the fact that there is a item on your site that already has this name.
User and Email Errors

I'm receiving the following error message: ERROR: License limit reached. Please contact your system administrator.	You are trying to create more admin users than your plan allows. In this case you have to either go to a higher plan, purchase more licences or disable admin access for another user in order to free up a licence for this user.
I'm receiving the following error message : "ERROR [user@domain.com] already exists as an email address or an alias for a different user. Please remove this before saving again."	Check if the email account you are trying to add doesn't exist already or that it isn't added as an alias to another account on that site.
I'm receiving this error when I try to send an email "User has temporarily exceeded the allowed mail recipient relays per day"	Our email system does not support outbound mass mailing as a standard offering. You need to use Email Marketing feature for this purpose. As standard practice we limit users from sending mail to large numbers recipients per 24 hour period. This limit is quite restrictive on the first day of usage, and becomes more lenient over time. Users who reach this limit will receive this error message. Current daily limit for SMTP relay is 500. This can not be increased.

Web form NUMBER type field - do not use it in web forms

forums_noreply@adobe.com — Wed, 07 Mar 2012 05:27:30 GMT

If you're about to add some custom fields to your form and you want to add a field for something that's a number, do not use the Number type field. Instead, you should use Text (String) type.

the Number type field can only store a positive integer number type, which is not suitable for most things out there. Thing such as phone numbers, memebrship numbers etc, are usually not integers and will not be stored properly if added to this field.

The only time you should use this field type is if you're storing some number for which you will definitely know is an integer and which you may be using in your JavaScript calculations, but even then you can achieve the same thing with Text(String) type field.

Replacing 'shopping cart is empty' page with a custom page

forums_noreply@adobe.com — Wed, 07 Mar 2012 04:51:43 GMT

In this solution you'll have to suppress the alerts and display the messages from within them inside the body. Then you'll make a call to a web page using Ajax and render that page inside the cart.

So, first you need to download the following 2 files and upload them to your site:

http://mgnewsyd.worldsecuresystems.com/emptycart.js

http://mgnewsyd.worldsecuresystems.com/jquery-1.4.2.min.js

Then, go to your site-wide template and add the following line inside the <head>. This should be a template that wraps around your shopping cart:

 <script type="text/javascript" src="/jquery-1.4.2.min.js"></script>

Add the following line to the boottom of your shopping cart:

 <script type="text/javascript" src="/emptycart.js"></script>

Add the following to whever you want to display those alert messages. This could be your shopping cart layout, or even a site-wide template:

<div id="alertMessageHolder" style="display: block;">
<p class="alertMessageHolder_success"></p>
</div>

Note that you can use the same method to replace all of the annoying alerts with in-body messages.

Note that there will be two classes rendered in the paragraph that contains the message, alertMessageHolder_success and alertMessageHolder_error. You should style these from within your stylesheet.

e.g.

.alertMessageHolder_success{
--all the proberties that will make this message look nice and positive
}

Finally, you need to create a web page with the URL /empty_cart_page.htm. That page will be called and displayed instead of empty shopping cart message. You can place anything you want in there. Make sure to disable the template on that page.

http://mgnewsyd.clubcardwebsites.com/books/business/the-fairtax-book

Hiding a site while it is under construction

forums_noreply@adobe.com — Thu, 10 May 2012 10:01:59 GMT

There are times when you are building a site or redesigning an existing site and you do not want the general public to see the pages when the site is not ready.

In this article, you'll learn how to create a temporary home page, to hide the rest of the site from view. Follow these steps:

Create a new web page that will serve as the temporary home page. If desired, you can name it Under Construction.
From the More Actions menu, select Set as Start Page.

After making these changes, whenever a visitor requests the home page of the site (by either clicking a link or entering the site's URL in a browser) the temporary home page will appear.

Since the temporary home page does not contain any links to the other pages in the site, visitors cannot navigate to see the rest of the site.

When you are finished updating the site, reset the real index.html (or index.htm) page as the start page for the site, to publish the changes and make them accessible.

Note: It is recommended that you also customize the 404 Page Not Found system page in case someone tries to view your site by entering an incorrect URL (e.g. http://www.yoursite.com/non-existant-page).

How to edit your Online Business Builder templates

forums_noreply@adobe.com — Thu, 10 May 2012 10:16:10 GMT

Note: This tutorial applies to the legacy Business Catalyst templates. You can follow the below method to modify any template, however the file names may differ.

Follow the steps in this customization guide for the pre-built templates to update your site's appearance. You'll learn how to:

Add your own logo to the template.
Change the hero image of the template.
Change the color of any elements on the template.
Change the layout of the template.

Note: The template used in this guide is Template 1. This guide is written for people with a very basic understanding of CSS.

If you don't know any CSS, see the article on: CSS from the ground up.

Preparation

Tools to use when customizing templates

Firefox - Internet Browser (download)
Colorzilla - Eye-dropper, Color-picker. A Firefox Add-on
Firebug - Web developement tool, A Firefox Add-on (download)

Installation

Install Firefox first.
Open Firefox
Go to the Colorzilla page in Firefox and click the Add to Firefox button
Go to the Firebug page in Firefox and click the Add to Firefox button

Files to edit when implementing customized formatting:

1 - screen.css, which resides in the StyleSheets folder.

Note: 4 CSS stylesheets are linked to the templates. Don't worry about the last 3 stylesheets for now.

screen.css - CSS for the look and feel of the templates
Box.css - CSS for modal windows. Don't worry about this one.
ModuleStylesheets.css - CSS for modules e.g. catalogs, products, announcements etc.
base.css (leave this alone) - CSS for the template layout (based on Blueprint CSS Framework 0.6).

2 - Main template and sub template in Site-Wide Templates.

Using Colorzilla to pick colors

So you want to change the colors of the template, but you'd have to know how to get those color values. The easiest and cheapest way to pick colors is to use Colorzilla, the Firefox add-on. Colorzilla lets you pick colors from anything on the browser or from its built-in palettes. It gives you the color's hexadecimal or RGB value so you can use it for CSS.

Double click on the Colorzilla button.
You can pick your color using the Picker, or Palettes by clicking on the Palettes tab. Each color will produce three types of values. Hexadecimal (Hex) is the most popular type used in CSS.
You can access the Colorzilla menu by right-clicking the Colorzilla button. At the moment our Picker (the image above) only displays a small selection of colors. To increase the amount of colors go to Options > Color Picker and click on 64 x 64 palette.
To activate the Colozilla crosshairs, click on the Colorzilla button once; click on it again to deactivate Colorzilla.
1. The box with red dotted border denotes the hovered element.
2. The Colorzilla button also shows the sampled color of whatever the crosshairs is targeting. To sample a color simply click anywhere within the browser.
3. The status bar displays the RGB value, hexadecimal value, coordinates of the crosshairs and the element targeted by the crosshairs. You can customize the status bar by going to Options > Statusbar Format...

Using Firebug to customize the Online Business Builder templates

Since the CSS stylesheet (screen.css) controls the look and feel of the templates, you'll need to edit screen.css in order to customize the template. The easiest way to locate the relevant CSS selectors on screen.css is to use Firebug, the Firefox add-on.

Click on the Firebug button to open the Firebug panel.
Enable Firebug. Note the other enable link below for offline contents.
This is the Firebug panel. Whatever you edit, add or remove inside this panel will not affect the actual HTML, CSS or Javascript codes etc. It's like your playground.
1. You can increase or decrease the size of the panel by dragging the edge up or down.
2. This is the HTML section since the HTML tab is selected. You can edit the HTML by double clicking on any part of the code and the changes can be seen in real time. Again, this doesn't change the actual code.
3. This is the style panel (note the Style tab is selected). This is where you play with the CSS styles on the page. The style panel will show the styles of whatever HTML element is selected, and where it's located, on the page or in an external file.
Notice the light blue tint on parts of the webpage. The tinted area is the HTML element we have hovered over in the HTML panel. Select an HTML element in the HTML panel and the CSS content of the style panel will change; this is how you find out which HTML element is using which CSS properties.
This time we hover over the div#header-left element. The light purple tint is the padding and the light yellow tint is the margin.
In order to change the front-page image you'll have to edit the Main Template in Site-Wide Templates. If you want to create your own front-page image you'll need to know the correct dimension. All the front-page images of the OBB templates are 600px wide and 216px high. If you can't remember the dimensions you can always use Firebug to figure it out (or you can just right click on the image and the click properties to get the size of the image). To find the dimensions of the front-page image (or any HTML element) click on the Inspect button and hover the cursor over the front-page image (or any HTML element). Press the Esc key to turn off Inspect mode.
To customize the background of your OBB template, select the body

element in the HTML panel. Notice how you can see the body

selector (body { }) in the style panel now, that's what we're going to edit.
When you hover over a CSS property you'll be able to see a round grey icon on its left hand side.
You can disable the CSS property by clicking the grey icon. Notice the change in real time; being able to disable CSS properties like this can help you debug CSS problems using the process of elimination.
Click on the background value to edit it (learn how CSS background works). Again, even though you'll be able to see the changes in real time this won't affect the actual CSS file. You'll have to copy what you've edited and add it to the actual CSS file.
Here are the steps to add your own logo to the OBB template:
1. Make sure your logo isn't larger than div#placeholder-logo. Use the Firebug inspect mode to target <div id="placeholder-logo"> and get the dimensions of the <div> container. Any logo smaller than 300px wide and 126px high should be pretty safe.
2. Upload the logo.
3. Add <img src="url-of-the-logo.jpg" alt="Name of your business" /> within <div id="placeholder-logo"> in Main and Sub Template in Site-Wide Templates.

Explanation of common selectors of screen.css

Note: the CSS below are based on the screen.css of Template 1, so some of the values might be different.

In the order of appearance:

Customizing body text and body background

body { color: #444; background: #193441 url(/images/cssimg/bg-1-9.png) repeat-x;}

color: #444 is the body text color.
background: #193441 is the body background color, url(/images/cssimg/bg-1-9.png) is the URL of the background image, repeat-x means that the background image will repeat horizontally.
To make the background image repeat vertically use repeat-y and to stop the image from repeating use no-repeat. To remove the background image simply remove url(/images/cssimg/bg-1-9.png) repeat-x from the background property.

Customizing the headings

h1, h2, h3, h4, h5, h6 { color: #91AA9D;}

If you want to give each kind of heading a different color simply break them up into: h1 { color: #000 }, h2 { color: #666 } and so on.
You can change the font by adding e.g. font-family: "Lucida Grande", Verdana, Arial, sans-serif;. Note how the quotation mark is used for Lucida Grande due to the spacing in the name.

Customizing the logo text

Note: in some templates, div#placeholder-logo (i.e. <div> with the Id name "placeholder-logo") is used as a selector instead of a#logo (i.e. <a> with the Id name "logo")

a#logo { color: #4a8797; font-size: 36px; font-weight: bold; text-decoration: none;}

font-size: 36px is the size of the text.
font-weight: bold is the weight of the text. For regular weight use normal.
text-decoration: none removes decoration (e.g. underline) from text. This is needed because anchors have underlines by default.

Customizing the navigation menu

td.menu-item { color: #fff;}td.menu-item-hover { color: #FFE76A;}td.menu-item-selected { color: #D1DBBD;}td.submenu-item { background: #f9f9f9; color: #000; font-size: 11px; padding: 6px !important;}td.submenu-item-hover { background: #4A8797; color: #fff; font-size: 11px; padding: 6px !important;}td.submenu-item-selected { background: #000; color: #fff; font-size: 11px; padding: 6px !important;}

td.menu-item i.e. <td> with the class name "menu-item", represents the menu item and gives it white text color: #fff;. To change the background of menu item just add e.g. background-color: #000; (black background).
td.menu-item-hover represents the hover state of the menu item.
td.menu-item-selected represents the selected state of the menu item i.e. the active menu item.
td.submenu-item represents the submenu item.
td.submenu-item-hover represents the hover state of the submenu item.
td.submenu-item-selected represents the selected state of the submenu item.

Customizing Links

a:link, a:visited { color: #35616D; text-decoration: none;}a:hover, a:active { color: #35616D; text-decoration: underline;}

a:link represents the default link state.
a:visited represents the visited link state.
Both a:link and a:visited have #35616D colored text and no text underline (text-decoration: none;). You can break them up if you want them to have different styles e.g. a:link { color: #1969bc; } and a:visited { color: #eeeeee; }.
a:hover represents the hovered link state.
a:active represents the active link state, i.e. when the link is clicked.
Note that link styles must be in this order: link, visited, hover and active. If you want to know why check out Link Specificity by Eric Meyer.

Modifying CSS stylesheets

Now that you've identified the styles you want to change, and experimented with how it will look with firebug, it's time to make permanent changes to your CSS stylesheets.

To do this, use FTP to download your CSS stylesheets (all stylesheets are in the /StyleSheets/ folder) and modify them in a text editor or a program like Dreamweaver or CSSEdit for Mac.

Alternatively, you can modify them in your site by using the file manager. The File Manager is found under the Recent Items tab on the far right, after you hover over any menu tab. You can either download the CSS file, or click "Edit" to edit the stylesheet online.

More Resources

Adding Alphabetical Navigation to Web App Lists using jQuery

forums_noreply@adobe.com — Tue, 13 Mar 2012 04:45:33 GMT

Step 1. Upload the necessary files
Step 2. Configure your Web App list layout
Step 3. Determine the Web App ID
Step 4. Set up the jQuery plugin
Step 5. Check out the results!

Using a simple Web Apps list module, you can easily insert a plain list of your Web App items on any page.

In this how-to article, we'll show you how to quickly implement an alphabetical navigation menu to your Web App lists, transforming the barebones list to include a user-friendly directory-like structure - all using a single jQuery plugin.

You can check out some demos of the plugin in action here.

Step 1. Upload the necessary files

First up, you'll need to download a local copy of the necessary JavaScript / CSS files:

The latest version of jQuery - http://jquery.com/src/jquery-latest.js
A copy of the "listnav" jQuery plugin - http://www.ihwy.com/labs/downloads/jquery-listnav/2.1/jquery.listnav-2.1.js
The sample CSS file - http://www.ihwy.com/labs/downloads/jquery-listnav/2.0/listnav.css

Alternatively, you can download a .zip package of the files here (latest versions at time of article being published)

Once you have them downloaded, upload the files to directories of your choice. For this example, we're going to upload the two .js files to our "/js" directory, and the sample CSS file to our "/css" directory.

Step 2. Configure your Web App list layout

The next step is to set up the list layout of our Web App to render the list items inside plain LI tags.

We'll choose our Web App under Admin > Build Web Apps (for this example, we'll use our "Member Profiles" Web App), click "Customize Web App Layout" and make sure the "List Template" is selected in the layout dropdown menu.

By default, the layout will include a sample table structure, but we'll switch over to HTML mode, select all and delete this.

Insert the following code, then "Save" the layout.

<li>{tag_name}</li>

You can customize this code to include various other tags, just make sure that it's all wrapped inside LI tags. The plugin will use the first letter inside each LI when alphabetizing the list.

Step 3. Determine the Web App ID

Next we need to grab the unique ID of the Web App we're rendering the list for.

We'll create a new page, open up the Module Manager, choose "Web Apps", select "Display list of Web Apps" and choose our "Member Profiles" Web App from the dropdown.

We'll choose "All items" under the "Select Display Criteria" dropdown and click Insert to see the module inserted on our page - it should look something like {module_webapps,8658,a,} - where 8658 will be the unique ID of your Web App.

Take note of this ID, as you'll require it for the next step.

Step 4. Set up the jQuery plugin

The final step is to include the neccesary script files on the page and configure the plugin to target and alphabetize our list.

Switch over to HTML mode, select and delete all the page content, then insert the following code, replacing the Web App ID in the {module_webapps... tag with the ID you noted in the previous step:

<html>
<head>
        <link href="/css/listnav.css" type="text/css" rel="stylesheet" />
        <script src="/js/jquery-latest.js" type="text/javascript"></script>
        <script src="/js/jquery.listnav-2.1.js" type="text/javascript"></script>
</head>
<body>

        <div id="list-nav"></div>

        <ul id="list">
            {module_webapps,8658,a,} 
        </ul>

        <script type="text/javascript">
 $('#list').listnav({
 noMatchText: 'No member profiles found matching your filter, please choose another letter.',
 showCounts: false}
 );
 </script>

    </body>
</html>

Naturally, you'll want to adjust the file paths if you uploaded the JS and CSS files to different directories. It's also important to note that IDs must be assigned to the UL in which your list is rendered and the empty DIV that is used for the navigation bar in order for the plugin to work.

You can read more about the "listnav" jQuery plugin and how it can be further customized at: http://www.ihwy.com/labs/jquery-listnav-plugin.aspx

Save and publish the page.

Step 5. Check out the results!

Switching over to the front-end of the live page, our navigation DIV will be populated with a navigation menu and our list will be filtered based on the first letter of each item name..

As you can see, our Member Profiles can now be easily browsed through, and clicking an item will take us to the detailed layout, as we'd expect.

There you have it - easy alphabetical navigation of Web App items using jQuery. The customization options here are endless, just dive into the sample CSS file and start playing around. This plugin can also be used for various other list layouts such as product lists, catalog lists an announcements.

Replacing a search or submit button with an image

forums_noreply@adobe.com — Fri, 16 Mar 2012 04:48:43 GMT

You need to change a line in your code that looks like this:

<input class="searchbutton" value="Search" type="submit">

To:

<input name="submit" class="cat_button" src="/images/button.gif" type="image">

Where /images/button.gif is the path to your image.

You can also style your button wuth just pure CSS and there are a couple of great links below showcasing and explaining how you can do this.

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/ - A mix of different CSS button styles.

http://webdesignerwall.com/tutorials/css3-gradient-buttons - Using CSS 3 Gradients to create amazing button and hover styles.

Note:

<button></button> Works the same as your input but gives you more options in how you present your button.

Adding A Translate Button To Your SiteWide Template

forums_noreply@adobe.com — Fri, 16 Mar 2012 04:09:58 GMT

<!-- Begin TranslateThis Button -->

<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

<!-- End TranslateThis Button -->

Step 3 - Save and Publish

Click "Save and Publish" to save your changes.

Switching over to the front end of your site, you should now see the "Translate" button rendered on all of your pages that use the template we just edited.

Naturally, you can customize the look and feel of the button using CSS / JavaScript. For more details on advanced customization options, refer to the TranslateThis documentation page at: http://translateth.is/docs

Adobe Community : Document List - Documents

Customizing Shopping cart is empty. Continue Shopping message

New Content Editor for Business Catalyst users

Overview

How to use the new editing experience

Enabling the feature

Defining editable content

List of ice:editable values:

line

multiline

image

link

html

section

content

Restrictions on Editable Regions

Using the in-context Editor

Current limitations

Backwards compatibility with markup for InContext Editing

Adding a domain name to your site and taking site live

Step 1. Obtain a domain name

Step 2. Upgrading a site

Step 3. Pointing/redelegating your domain to your trial site on Business Catalyst

1. Redelegate domain to BC's DNS servers

2. Host your domain with external DNS provider and point A-records to your BC site

Step 4. Adding a domain to your site

Domain name FAQs

Customizing Web Forms

Customizing an Auto Responder

Disabling an Auto Responder

Disabling the Secure Zone login details email

Customizing your Web Form after inserting

Collecting anniversary dates using a date picker

Customizing your Web Form using the 'Customize Web Form' option

Combining the first name and last name into a full name

Attaching web forms to Contacts instead of Cases

Adding multiple file attachment fields to the web form

Preventing autocomplete on web form fields

Redirecting the Web Form confirmation page

Pre-populate web form fields

Editing form fields to insert module tags

Setting up a form to email using Web Forms

Hiding a retail price for items that are not on sale

Preventing search engines from indexing your in-progress pages

Hiding the red X displayed by Internet Explorer when you have empty image fields in a Web App

Customizing Online Shop Alert Message Strings

Skip to

Introduction

Step 1. Create the JavaScript file

Step 2. Insert Your Customized Alert Messages

Step 3. Upload The File

Step 4. Reference The Script In Your Site Wide Template

Creating login functionality on eCommerce registration form for return customers

Setting up an Amazon CloudFront Content Distribution Network (CDN) for a Business Catalyst Website

How to protect your website from SPAM submissions

What is SPAM and why does a website owner encounter SPAM?

What type of SPAM can you find on your website on your customers’ websites?

How can you protect your sites from SPAM

Human Spammers

Automatic Spammers

Set up the domains hosted by Business Catalyst to use Microsoft Lync Online from Microsoft Office 365

Shorthand CSS

Colours

When to use RGB?

Shorthand Colours

Backgrounds

Margin & Padding

Border

EM

Fonts

Using the Menu Module Version 2

Tags used in the Menu Module Templates

Folder Structure & Location

Tip 1:

Tip 2: Naming Your Folders:

childitem.html

group.html

container.html

jQuery

What is jQuery?