Unbranded partner-site-customization-guide

Unbranded Partner Site
Customization Guide

Contents

3 Hi There!
4 Customization Checklist
5 Site Tour
15 What You Need
16 How to use Triangle
20 Site Structure
22 Customization

If you have any problems customizing your Partner Site, please submit a Technical Support Request
from your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offer
support for HTML, CSS or Javascript related queries. 2

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.

Let’s get started.


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 address 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 Tour
First up, let’s go for a quick run through of your brand new Partner Site,
pointing out how we’ve implemented each feature. You’ll notice that we’ve
outlined the module being used, and how you can access or modify it. For
more information on specific modules, please consult the Online Business
Wiki (onlinebusinesswiki.com) and make sure you attend the core live train-
ing.

Home (/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
ƒƒ “Take
A a Free 30-Day Trial” button as a call to action (only available to
Rebranded Partners)
ƒƒHeadline, Benefits & Main Features

From anywhere on your site, your clients are able to a) Login to their Client
Portal to view past orders / support cases and b) Login to the Admin Con-
sole of their actual site. Find out how to give clients access to their Client
Portal in the “Customization” section of this guide.

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 (/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 (/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, or read more about Web Apps here (link: http://
www.onlinebusinesswiki.com/index.php?title=Web_apps)

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 (/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 (/designers)
The “For Designers” page provides information for your fellow web design-
ers and, by default, directs them to your partners@ 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 (/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 will notify you every time a request is submitted.
Find out more about the Web Forms module used on this page here. (link:
http://www.onlinebusinesswiki.com/index.php?title=Web_forms)

Clients are also able to download the unbranded Dreamweaver Extension
“Triangle” from the Support section.


Client Portal (/secure-client-portal)
The “Client Portal” is a Secure Zone we’ve set up for your paid clients, so
they can view a history of any orders you’ve assigned them and a list of
every Support Request they’ve lodged using the Support Form on the “Sup-
port” page.


To give clients access to the Client Portal, you must manually assign each
one a username (use their primary email address) and password (use their
current password), then subscribe them to the Client Portal secure zone.
Find out how to do this under “Client Portal” in the Customization Section of
this guide, or read more about Secure Zones here (http://www.onlinebusi-
nesswiki.com/index.php?title=Secure_zones)

Once you have assigned them a username and password, they will be able
to login by clicking the “Client Portal” menu item on your Partner Site:

About (/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 (/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. To find out more about Web Forms
and how to customize them, read this article (link: http://www.onlinebusi-
nesswiki.com/index.php?title=Web_forms)

Terms & Privacy Policy (/terms-of-use, /privacy-policy)
We’ve fitted out your site with standard, ready to go, Terms of Use and
Privacy 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.

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/you@your-site.com
ƒƒ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
ƒƒGo to http://getfirebug.com to learn more


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

Unbranded Partner Site IA

Home

Free Trial
Portfolio For Support Contact us (online Client Portal
Overview Pricing About us
(web apps) Designers (slider) (web form) business (secure-zone)
builder)

Main Features (slider) Website
Showcases
(lightbox)
Content Wiki
Management (external link)

Video
eCommerce Full Features
Tutorials

Support
Email Shipping Request
Marketing Providers (web form)

Download
Payment Triangle
CRM Gateways (literature)

Report and Detailed Tour
Analytics

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.


Template Web Page

Header including logo

Site Navigation Menu

Web Page Content

Footer

Header including logo

Site Navigation Menu

Web Page Content

Footer

Final Page, what customers see.


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

ƒƒups-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 ups-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 ups-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
upsscreen.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
ƒƒDirectclients to http://yourpartnersite.com/admin for logging in to their
Online Business Console

Web Apps
ƒƒ Web App
A 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 > Portfolio List then click “Load”. If you’re wondering where the <ul>
is, it’s inside the Portfolio page content

Client Portal
Each time you sign up a new client on a monthly paid plan, you must manu-
ally replicate their login details next to their customer record, and then sub-
scribe them to the Client Portal secure zone. Follow these steps:

Step 1: Navigate to the Customers section of the Admin Console of
your Partner Site

Step 2: Either select the existing customer record (if the client already
exists in your CRM database), or create a new contact record for them


Step 3: Manually assign the client a username and password,
mirroring the login details they use to access the Admin Console of
their individual site

Step 4: Select “Manage Customer Subscriptions”, then Click “Edit”


Step 5: Subscribe them to the “Client Portal” Secure Zone then make
sure to Save & Finish


Unbranded partner-site-customization-guide

More Related Content

What's hot

Similar to Unbranded partner-site-customization-guide

More from Jamison K. Bell | OvenPOP 360

Recently uploaded

Unbranded partner-site-customization-guide