Your SlideShare is downloading. ×

Unbranded partner-site-customization-guide

496

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
496
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Unbranded Partner SiteCustomization Guide
  • 2. Contents 3  Hi There! 4  Customization Checklist 5  Site Tour 15  What You Need 16  How to use Triangle 20  Site Structure 22  CustomizationIf you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 2
  • 3. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 3
  • 4. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 4
  • 5. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 5
  • 6. If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 6
  • 7. 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 TourIf you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 7
  • 8. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 8
  • 9. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 9
  • 10. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 10
  • 11. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 11
  • 12. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 12
  • 13. 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. If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 13
  • 14. If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 14
  • 15. 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 moreIf you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 15
  • 16. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 16
  • 17. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 17
  • 18. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 18
  • 19. 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. If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 19
  • 20. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 20
  • 21. 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.If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 21
  • 22. 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 themIf you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 22
  • 23. 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-If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 23
  • 24. 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 themIf you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 24
  • 25. 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”If you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 25
  • 26. Step 5: Subscribe them to the “Client Portal” Secure Zone then make sure to Save & FinishIf you have any problems customizing your Partner Site, please submit a Technical Support Requestfrom your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offersupport for HTML, CSS or Javascript related queries. 26

×