Unbranded Partner Site
Customization Guide
Contents
3 Hi There!
4 Customization Checklist 5 Site Overview
8 What You Need 9 How to use Triangle 13 Site Structure 15 Customization
Hi There!
Congratulations on joining the Business Catalyst Partner Program.
Bundled with what you receive as a BC Partner is a free Unbranded Partner Site. By default, your site includes all the features that our most success-ful Partners use to grow their design businesses, built-in. You’ll most likely want to customize it yourself, so in this guide we’ll run you through how to completely rebrand the site to suit your business.
We’ve included 5 unique themes that you can easily switch between. All you have to do is rename a CSS file. Find out how under the “Customiza-tion” section of this guide.
Customization Checklist
We’ve put together a quick checklist of essential customizations you need make to your Partner Site:
o Upload your Logo
Upload your own logo, so it appears in the header of your Partner Site. See page 14 to find out how.
o Update the “Free Trial” button links (Rebranding Partners Only)
If you’re a Rebranding Partner, it’s important that you redirect the Free Trial buttons on the Home page and Pricing page to your rebranded Online Busi-ness Builder.
o Change the pricing table to suit your design business
You most likely have your own pricing structure that takes into consider-ation the value you add on top of the BC platform. Edit the Pricing page to suit what you charge your clients.
o Change the email address on the “For Designers” Page
By default, the “For Designers” page (your way of signing up Resellers and making commissions) directs enquiries to a faux email address. Replace this with the email address you wish to be contacted at.
o Change the name in Privacy Policy and Terms of Use
You’ll want to “Find & Replace” [Partner] in the included Privacy Policy and Terms of Use.
o Change Address on Contact Us page
Next to the Contact form on your “Contact Us” page, there is a false ad-dress that needs to be either replaced with your office adad-dress or removed.
o Upload your own designs to your Portfolio
Your Portfolio page uses a Web App to store site showcases. Find out how to upload your own designs on page 15.
o Configure Customer Service Ticketing
Your Support request form is already set up to use Customer Service Tick-eting and directs to your support@ email address. In order to take advan-tage of this functionality, you need to configure CST from your Admin Con-sole. Find out how on page 16.
Site Overview
Home
This is the first page your existing and potential clients will see when they visit your site. By default, it includes:
• The Unbranded Online Business Video
• A “Take a Free 30-Day Trial” button as a call to action (only available to Rebranded Partners)
• Headline, Benefits & Main Features
Tip: If you’re a Rebranding Partner, using highly visible and clickable “calls to action” such as Free Trial buttons will help you push more prospects through your sales funnel.
Overview
This page contains a more detailed walkthrough of the features included in the All-In-One solution. By default, it follows this structure:
Main Features Full Features Shipping Providers Payment Gateways Detailed Tour
Portfolio
We’ve already set up a Portfolio page for you to showcases your designs. This page is linked to the Portfolio Web App in the backend of your Partner Site - so adding new designs is easy. Find out how under the “Customiza-tion” section of this guide.
Tip: Showcasing your previous work is a great way to convince clients that you’re worth paying for. Show them the level of customization you provide and list the range of features you’ve implemented.
Pricing
This page contains our standard monthly billing table, including the Mini ($39), Regular ($59), and the Super ($79), each with a Free Trial button be-low. By default, the page also includes a “What you get” section and what we charge for Extras such as extra disk space, newsletters and users.
Tip: Change the pricing on this page to suit your individual pricing structure, taking in to consideration your value-adding design/copywriting/SEO
services.
For Designers
The “For Designers” page provides information for your fellow web design-ers and, by default, directs them to your partndesign-ers@ email address for more information. This is a great way to sign up designers as resellers and earn extra revenue in the form of commission. If you don’t wish to resell the solu-tion, simply disable the page and remove the menu item.
Support
This is the page your clients will navigate to for Support purposes. By de-fault, the first tab they see directs them to helpful unbranded video tutorials and the Online Business Wiki.
If they require email support from you, we’ve also included a ready made Support Request form that is already setup to use Customer Service Ticket-ing. All requests submitted using this form will, out of the box, direct to your support@ email address. Find out more under the “Customization” section of this guide.
Clients are also able to download the unbranded Dreamweaver Extension “Triangle” from the Support section.
Client Portal
Once you’ve provided your clients with a username and password, they will be able to login to this Secure Zone. From here, they can view their Past Invoices and Past Support Cases.
Tip: When you sign up a client, make sure that you assign a username and password to their primary email address. All support cases they submit using that address will then appear as threaded conversations in their Client Portal.
About
We’ve intentionally left this page blank, so you can jump in and fill it with important information about your design business. Talk about your history, experience and areas you specialize in.
Contact
On this page, be sure to change the Address to your own. We’ve built-in a working Contact Us form that will notify you and the users of your Partner Site every time an enquiry is submitted.
Tems of Use & Privacy Policy
We’ve fitted out your site with standard, ready to go, Terms of Use and Pri-vacy Policy pages. All you need to do is replace “[Partner]” (without quota-tion marks) with the name of your business.
Tip: Use the “Find & Replace” option (available in most HTML/Text editors - CTRL + F in Dreamweaver) to quickly go through and replace the name.
What You Need
In order to customize your unbranded partner site with ease, you’ll need the following:
Adobe Dreamweaver (http://www.adobe.com/products/dreamweaver/)
Triangle Extension (http://businesscatalyst.com/triangle)
FTP Client
Login Details
Server: your-site.com
User Name: your-site.com/[email protected] Port: 21
Check: Use passive mode for data transfers
Firebug Add-on for Firefox
Firebug is a web development add-on for Firefox that lets you:
Inspect and edit HTML
Tweak CSS instantly without updating the CSS file on the server Visualize CSS metrics
How to use Triangle
What is Triangle?
Triangle is our Adobe Dreamweaver extension that lets you inject Online Business functionality into your HTML.
Adding Triangle extension to Adobe Dreamweaver
Simply double click on the TriangleExtension.mxp file and the extension will install itself.
Creating a new webpage
Open Dreamweaver, click on Window (next to Help) and you should be able to find Triangle at the bottom of the dropdown menu. Click on Triangle:
Enter your login details, then click “Login”
Choose your Unbranded Partner website from the website list and click
“Load”
Click the “Web Pages” tab Click “New”
In the document window, type “The Page of Awesome”
In the Triangle panel select the folder you want the new webpage to be in
(“/” is the root folder)
Tick “Start Page” if you want this page to be the start page of your website To save the work-in-progress page, without publishing it, click “Save”; the
page will be saved in the database as a Working Copy and you won’t be able to access it via FTP. To publish the page and make it live, click Save and Publish
WARNING: The content of the selected document window will be saved when you click “Save” or “Save and Publish” - so watch out if you have lots of document windows opened. Make sure “Current Webpage” in the Triangle Panel matches the selected document window.
Editing a Webpage
Click on the webpage you’d like to edit
Click the “Load Live” button to load a published webpage / Click “Load
Working” to load an unpublished webpage
Removing a webpage
Load the webpage, check “Deleted” and then click “Save and Publish” or simply delete the webpage via FTP.
Rolling back a webpage
Older versions of a webpage are archived and kept in the database. To roll-back a webpage, simply click on “Archive” and select the version you want to rollback.
Site Structure
Site Map
Template and Pages
All templates must have the {tag_pagecontent} tag; place {tag_ pagecontent} where you want the webpage content to sit in the tem-plate.
Main Features (slider)
Home
Overview Portfolio
(web apps) Pricing For Designers Support (slider) About us Contact us (web form)
Unbranded Partner Site IA
Content Management eCommerce Email Marketing CRM Report and Analytics Website Showcases (lightbox) Client Portal (secure-zone) Free Trial (online business builder) Video Tutorials Wiki (external link) Download Triangle (literature) Support Request (web form) Shipping Providers Full Features Detailed Tour Payment Gateways
Template
Final Page, what customers see.
Web Page
Web Page Content
Site Navigation Menu Header including logo
Footer
Web Page Content
Header including logo
Footer Site Navigation Menu
Customization
You’ll notice that the site look better in Firefox & Safari. This is because we’ve used the “border-radius” property in CSS3 which is not supported by IE8 or below.
CSS Files / Themes
Found in the StyleSheets folder
screen.css - CSS for the look and feel of the templates
ModuleStylesheets.css - CSS for modules e.g. Catalogs, Products,
An-nouncements etc.
ie.css - CSS for IE6 (based on Blueprint CSS Framework 0.8)
theme.css - this style overwrites the color scheme of screen.css, remove
this file to use the default colors
theme-xxxx.css - there are 5 themes provided; to apply a theme, simply
rename the desired theme-xxxx.css to theme.css
Logo
Class fixPNG in <img> exists to make the 24-bit transparent PNG work in
IE6
To change the position of the logo, edit the top property in a#logo
selec-tor in screen.css
Color Scheme
Customize the color scheme of the site easily by editing one of the theme-xxxx.css files and applying it, as shown above.
Navigation - Dynamic Menus
There are two dynamic menus: the “Website Main Menu” (global naviga-tion), and the “Overview Menu” - both menus are present in the footer The menus are running in CSS-Only mode, so you can customize them
using CSS. Look for the #container-nav and .nav-side selectors in screen.css to customize them.
Page Content Layout
Changing the page content layout takes only a few seconds once you understand how the Blueprint CSS framework works. Check out http://your-site.com/grid-tutorial and view the source code.
Slider
“Coda Slider” was used on the Overview page and Support page; to
customize, read the instructions and how-to’s at http://www.ndoherty.com/ blog/2007/10/29/coda-slider-11/
Do not replace the jQuery files with jQuery 1.3, as the Coda Slider may
not work
Free Trial Buttons
(Rebranding Partners only)
By default, the “Free Trial” buttons on your Partner Site need to be linked
manually to your Rebranded Online Business Builder
From your Partner Portal, navigate to the “Resources” page and scroll
down. On the right hand side of the page, under “Integrated Sign-Up and Login on your Website”, you’ll see a link that looks like this: http://yourpart-nersite.com/signup/obb.aspx?SPID=12345 - Copy the URL and direct all new and existing “Free Trial” buttons to this address
Direct clients to http://yourpartnersite.com/admin for logging in to their
Online Business Console
Web Apps
A Web App is used for the Portfolio page so the website showcases can
be managed easily
To add new designs to your Portfolio, navigate to Modules > Web Apps
> Portfolio. Click “Create A New Web App Item” and then fill out the de-sign details, including the path of a large image and a thumbnail image (282x182px) of the site
To edit the HTML layout of each Web App Item, open the Dreamweaver
Triangle extension and go to the “Custmization List” by clicking on the small icon above “Help”. Scroll down and click on Web App Layouts, select
Port-folio > PortPort-folio List then click “Load”. If you’re wondering where the <ul> is, it’s inside the Portfolio page content
Customer Service Ticketing (CST)
The Support Request form uses built-in CST to direct all cases to your
support@ email address
To add new Customer Service Representitives, modify the way cases
are allocated, and set your availability, select “Customer Service Ticketing” under “Admin” in the back-end. Learn more about Customer Service Ticket-ing at: http://www.onlinebusinesswiki.com/index.php?title=Customer_Ser-vice_Ticketing
To change the workflow being triggered (in this case, CST), navigate to
Modules > Web Forms > Support Request and under the “Use Workflow?” drop down menu, select the workflow you wish to be triggered
