Index
MAIN MENU

Style Manager

页面风格管理器

The Style Manager allows you to alter the "look and feel" of the order process. Generally this is used to brand the order forms and receipt emails with the graphics and design of your company's website.

页面风格管理可以让您改变订购过程的“外观和体验”，一般可用于以您公司网站的图像和设计来客制化您的订购单。

Style Areas

The Style Manager is broken up into multiple sections called "areas", each pertaining to specific a specific component of the order process. These areas are broken up into tabs at the top of the page. Click on these tabs to navigate between the areas. The first area, Order Form, allows you to configure the look and feel of the order process. The second area, Receipt Email, allows you to configure the look and feel of the HTML email receipt that is sent to customers after a purchase. Click on one of the areas below to learn more:

  1. Order Form

  2. Receipt Email


Order Form

The order form area of the Style Manager helps you configure the look of your online e-commerce presence. While Style IDs are assigned to both Receipt Email and Order Form styles, they are most useful to understand in the context of the Order Form.

Style IDs 页面风格ID
If you're not familiar with the use of style ID's, now would be a great time to read about and learn how to use them. Style ID's help to create a seamless transition from your own web site to the RegNow hosted product detail and order pages - this includes the new custom product pages as well. To learn more, read on! 如果您对页面风格ID的使用不熟悉，现在便是您阅读和了解如何使用的大好时机。页面风格ID帮助您从自己的网站天衣无缝地转向RegNow提供的产品详情页面和订购页面—这还包括新的自行定义的产品页面。要了解更多，请继续阅读！

Step #1: Set Up Your Style ID
第一步：建立您的页面风格ID

If you don't already have a style ID configured for your account, you should do this now. Note that you do not have to use a style ID, but if you want your pages to look like your own web site, then you'll need to complete this step. If you already have a style ID configured, you can continue to Step 2. 如果您还没有为您的账户设定的页面风格ID，您现在就该进行了。您并不是必须使用页面风格ID，但是如果您希望您的页面看起来跟您自己的网站一样，那么您将需要完成这一操作。如果您已有设定的页面风格ID，您可继续进入第二步。

Create a New Style ID 建立新的页面风格ID
We'll assume that your style ID will match your web site for the following instructions: 以下说明我们假设您将建立的页面风格ID是与您的网站相配合的：

1. Log in to the RegNow affiliate control panel if you haven't already.
  如果您还没登录RegNow代销商control panel，请登录。 2. Click the Style Manager link in the left-hand toolbar menu.
  点击左边工具栏选单的Style Manager链接。 3. Click the Add button to create a new style ID. A message will appear showing that a new style was created.
  点击Add按钮以建立新的页面风格ID后，信息将提示新的页面风格已创立。 4. Select the new style from the dropdown list if it hasn't been selected already.
  如果下拉列表的新页面风格未被选中，请选取。 5. Click the Edit button.
  点击Edit按钮。 6. Provide a meaningful name for your new style in the entry field provided.   在输入框内为您的新页面风格填入一个有意义的名称。

Understanding & Preparing Your HTML 了解并准备您的HTML
At this point, you're ready to transfer the HTML from your web site pages to your style ID. A style ID contains two chunks of HTML code: 现在，您可以把HTML从您的网页转到您的页面风格ID里。页面风格ID包含两大块HTML代码：

  • The HTML that creates everything BEFORE the content (like a header and left gutter), and
    内容前的所有HTML（如页首和页左栏），以及
  • The HTML that creates everything AFTER the content (like a right gutter and footer)
    内容后的所有HTML（如页右栏和页尾）

You can see that the Style Manager provides two text areas for these two chunks of HTML code. 您可以看到Style Manager为这两块HTML代码提供两个文本输入框。

1. Select the HTML (from your personal pages) that contains the header and left gutter (if you use one).
  从您的个人页面选择包含页首和页左栏（如果您使用的话）的HTML。 2. Copy and paste this chunk of code to the first entry field for the style ID. A very rough example of this might be:   复制并把这块代码粘贴到页面风格ID的第一个输入框里。粗略示例如下：

<html>
<head><title>My Pages</title></head>
<body>
<table width="700">
  <tr>
   <td colspan="2">My Heading</td>
  </tr>
  <tr>
    <td width="150">My Left Gutter</td>
    <td><!-- Beginning of RegNow Data -->
Notice that the example code contains a page header and a left gutter. It also specifies the content area by opening the <td> tag but not closing it. 注意，本例子中的代码包含一个页首和页左栏，且以<td>为开始标记符指定了正文区域但无结束标记符。

3. Now select the HTML from your personal page that contains everything AFTER the content area.
  现在从您的个人页面选择包含内容区后的所有HTML。 4. Copy and paste this chunk of code in the second text area for your style ID. To continue with our example:   复制并把这段代码粘贴至您的页面风格ID的第二文本区域里。继续我们上面的示例：

    </td><!-- End of RegNow Data -->
   </tr>
   <tr>
    <td colspan="2">My Footer</td>
   </tr>
</table>
</body>
</html>
Notice that we close the <td> tag for the RegNow content in the second section. 注意，我们在第二部分结束RegNow内容时使用<td>的结束标记符。

If we were to view the completed page HTML, it would look like this: 如果浏览完整的页面HTML，它将如下：

<html>
<head><title>My Pages</title></head>
<body>
<table width="700">
  <tr>
   <td colspan="2">My Heading</td>
  </tr>
  <tr>
    <td width="150">My Left Gutter</td>
    <td>

       RegNow inserts data here.

    </td>
   </tr>
   <tr>
    <td colspan="2">My Footer</td>
   </tr>
</table>
</body>
</html>

Complete Your Style ID 完成您的页面风格ID
The last steps involve specifying styles for headings, labels and the body of your HTML. These are not required, but they can make a standard RegNow order page look much more professional. For instance, specifying <h3> for the Begin Header entry field and </h3> for the End Header entry field will give all the headings on your order page a nice big, bold font. Specifying <b> for Begin Label and </b> for End Label will make all labels on the page bold. 最后一步包括设定HTML的页首、标签和主体的风格。虽然这些不是必须的，但是这些能使标准的RegNow订购页面看起来更加专业。例如，在页首所输入的字段内容之前增加<h3>标记，后面增加</h3>标记，您的订购页面的所有标题将是美观的加粗大字体。在Label前后分别添加<b>和</b>标记符，该页的所有标签将为粗体。

When you've completed all work on this page, click the save button to save your new style ID. You can click the View button to view your work and see the page as it will appear to shoppers. 如果您已完成本页的所有操作，请点击save按钮以保存您的新页面风格ID。您可以点击View按钮来查看你的操作成果，即购买者将看到的样式。

Step #2: Enable Your Style ID 第二步：启用您的页面风格ID

You'll need to enable your new style ID so that shoppers see it when they view RegNow generated product detail or ordering pages. To enable your style, follow these instructions: 为了让购买者在查看RegNow产生的产品详情或订购页面时看到您的新页面风格，您需要启用您的新页面风格ID。请按照以下说明进行启用：

1. Log in to the RegNow affiliate control panel if you haven't already.
  如果您还没登录RegNow代销商control panel，请登录。 2. Click the Account Settings link in the left-hand toolbar menu.
  点击左边工具栏菜单的Account Settings链接。 3. Click the Order Setup tab.
  点击Order Setup标签 4. Select the name of your new style from the dropdown for the very first option entitled Order Form Style.
  从第一个名为Order Form Style选项的下拉框中选择新页面风格的名称。 5. Click the Save button to save your selection.   点击Save按钮以保存您的选择。

Your new style is now active and visible to shoppers who view your RegNow-based pages. 现在您的新页面风格已被启用，购买者在查看您的RegNow页面时可以看见。

Graphics 图像

To maintain secure server status, all graphics and content must be located on our server. You can upload graphics and .css files to our web interface.
Cascading Style Sheet (.css) files may also be uploaded and used. 为了保持服务器的安全状态，所有图片和内容必须放在我们的服务器上，您可以上传图像和.css文件到我们的web interface。 层叠式样式表（.css）文件也可以上传使用。

You can reference the .css files in this format when creating a style: 在建立页面风格过程中，您的.css文件可参照这种格式： 

<link href="//regnow.img.digitalriver.com/affiliate/YYYYY/filename.css" rel="stylesheet" type="text/css" />

Note: If you upload a file that has the same name as a file that you previously uploaded, it will replace the previous file. 注：如果您上传的文件与您之前所上传的文件名相同，那么新上传的文件将取代旧文件。

Note: We strongly recommend that any images used in your styles are uploaded through RegNow. This will help prevent any security issues customers may come across when ordering if you are hosting any images that are not located on a secure server. 注：我们强烈建议您的页面风格所用到的图像都上传到RegNow，这可避免由于您的图像未放置于安全的服务器上而导致您的客户在订购过程中遇到某些安全问题。

Once your graphics have been uploaded they will be accessible from your style with the following format: 这些图像一经上传便可通过您的页面风格使用，格式为：

/affiliate/XXXXX/mygraphic.gif

Because everything is case sensitive, we recommend uploading your files in all lower case. 由于区分大小写的缘故，所以我们建议您把上传的文件以小写格式命名。

Note: If you are using these graphics on your own website, you will want to use: 注：如果您正在自己网站上使用这些图像，那么您应该使用的格式为：

//regnow.img.digitalriver.com/affiliate/XXXXX/mygraphic.gif

Note: Images may be cached worldwide for up to 4 hours. If updating an existing image, please keep this in mind. Otherwise, use a new file name to bypass the cache. 注：世界各地内的图像缓存时间最长可达4个小时，所以如果需要更新现有图像，请记住这一点。否则请使用新的文件名来绕过缓存的问题。

Header and Footer

页首和页尾

The header and footer are best thought of as a wrapper for the content of the order form. For example, the header and footer will precede and follow the product description and order fields on the order form. 页首和页尾可以想成是订购单内容的外包装。例如页首和页尾分别位于订购单的产品描述与订购字段的之前和之后。

These can be edited to your heart's desire with one exception.  In the header portion you'll notice: 您可以随心所欲地修改这些内容，但有一处例外。在页首部分，您会发现：

<TITLE><SOFTSELL TITLE></TITLE>

Do not remove the tag <SOFTSELL TITLE>. This tag is automatically filled in with custom information during the order process. 不要删除<SOFTSELL TITLE>标记符。该标记符在订购过程中会自动被自定义信息填充。

You may also use the tag <SOFTSELL CERTIFICATE_URL> anywhere in the header and footer to create a URL to Verisign's secure server identification. 您也可以在页首和页尾的任何位置使用<SOFTSELL CERTIFICATE_URL>标记符以创立链向Verisign的安全服务器认证的URL。

Properties

属性

While the header and footer allow you to edit the wrapper of the content, the various tags available allow you to edit the appearance of the content itself. In addition, you should consider using cascading style sheets for even finer control over design elements. 页首和页尾可以让您编辑正文的外包装，而各种可用的标记符让您可以编辑正文本身的外观。此外，您应该考虑使用层叠式样式表对设计元素进行更细腻的管理。

Label Format: Appearance of group labels
标签格式：标签群的外观 Header Format: Appearance of section headings
页首格式：区段标题的外观 Body Format: Appearance of all other text on an order form 正文格式：订购单上的其他所有文本的外观

Tips

提示
  • If you'd like the title or headers not to be displayed, simply wrap them in comments.
    如果您不喜欢显示标题或页首，只需把他们放在注释标签内。
  • Tags don't have to contain simple font information.  You can wrap them with graphics, tables, etc.
    标记符不必包含简单的字体信息，您可以把他们放进图像、表格等等。
  • Consider using cascading style sheets for even finer control over design elements.
    考虑使用层叠式样式表来对设计元素进行更细腻的管理。
  • To link to our secure certificate from your style, use:
    使用以下方式在您的页面风格中加入我们的安全证书：

    <script src=https://seal.verisign.com/getseal?host_name=www.regnow.com&size=M&use_flash=YES&use_transparent=NO></script>
    For a smaller version of the same, use:
    如果需要内容一致但较小的版本，请使用：
    <script src=https://seal.verisign.com/getseal?host_name=www.regnow.com&size=S&use_flash=YES&use_transparent=NO></script>
    To choose from a different logo, follow the instructions on this VeriSign page (common name = www.regnow.com) to generate a new script:
    如需选择一个不同的logo，请按照VeriSign页面上（common name = www.regnow.com）的说明生成新的script：

    http://www.verisign.com/seal/v3/install.html

Use Vendor Style

使用发行商页面风格

You may decide you would like to use the vendor's style on your order page. To accomplish this you will simply need to visit the relationships section. If you would like to use all vendor's styles by default, simply use the check all in the header above "Use Vendor Style". If you would like to select just specific vendors you can check the box in the line with that vendor's information. When you are done with your selection you will need to click "save" at the bottom of the page or your changes will not be made. You may also choose to use the vendor style on only specific products within a particular vendor. In order to do this you will need to open the vendor detail view by clicking on the vendor name. You will see the same type of checkboxes available, with the check all in the header. Again, when you are done with your selection you will need to click "save" at the bottom of the page or your changes will not be made. 您可以在您的订购页面上选择使用发行商的页面风格，这只需通过访问relationships部分来完成。如果您喜欢默认使用所有发行商的页面风格，只需选中页首"Use Vendor Style"上方的选框；如果您想仅仅选择某特定发行商的页面风格，您可以选取该发行商信息所在行的选框。选完后，您需要点击页尾的"save"按钮，否则您的改动不会生效。您还可以选择针对某个特定发行商的具体产品使用发行商的页面风格，这个操作将需要点击发行商名称以打开发行商详情查看窗口，您会发现有同类的选框供您选择，而且页首上还有全选选框。同样，在您选完之后您需要点击页尾的"save"，否则您的改动不会生效。

Note: If you select to use a vendor's order page style and they do not have a style set on a product, the order page will default to your affiliate style settings. 注：如果您选择使用某个发行商的订购页面风格，而该发行商没有对其产品设置页面风格，那么订购页面将默认为您代销商所设置的页面风格。



Receipt Email

Instead of using a plain text-based receipt, use HTML email to enhance the customer's shopping experience. The receipt email Style Manager area allows you to further enhance this experience by branding the email receipt with your own banner image and adding your own custom styling to match your company's image.

Banner Image

The recommended width of the custom banner image at the top of the receipt is 720 pixels. This is fairly inflexible as the table width of the email is fixed so as not to distort the receipt's display when viewed at different screen sizes. The height, however, is a bit more flexible, but we suggest somewhere around 90 pixels. To upload and select a new banner image, move your mouse over the "Style Name and Banner Image" section and click the text that says "click to use new image".

Custom CSS

You will notice text boxes for entering Cascading Style Sheets (CSS) language to alter the display of the receipt elements corresponding to the label above a given text box. CSS allows the addition of style to the HTML "structure" of a web page, HTML email, or any HTML document. Best practices and certain email client requirements dictate that the underlying structure of the HTML email be implemented in HTML <table> tags with the style "inlined" directly in the each HTML tag. The text input boxes marked with an "(enter CSS)" label allow you to simply enter CSS for particular elements without having to worry about this underlying implementation. It is in these text boxes that custom CSS can be entered.

Also note that the "selector" in the traditional selector {property:value} CSS syntax has been removed, since the text box acts as the "selector" that chooses which HTML element the style is applied to. Thus, CSS can be entered with a property:value syntax in the receipt email Style Manager area, with the selector removed. This is further illustrated below.

Using the CSS language you can add colored borders, change background colors, and modify font properties for the different HTML components that highlight in the receipt preview pane at the bottom of the screen. When you move your mouse over a text input box, the corresponding HTML element will highlight in the receipt preview pane. Experiment with this feature by adding a bit of CSS and watching the preview pane update as soon as you finish typing your CSS. An example CSS string to test functionality would be setting the background of an element to a light blue color : background-color: lightblue; Applying this CSS style to an element makes that element display a background color of light blue. Additional styles to experiment with are listed below, along with a display of what they look like. Note in the border example how multiple style properties can be listed together successively.

  • color: red; —> This makes text turn red.
  • font-family: helvetica; —> This renders text with the "Helvetica" font.
  • border-width: 3px; border-style: solid; border-color: darkblue; —> This sets a solid border that is 3 pixels wide and of a dark-blue color.
  • margin-left: 50px; —> This puts a space or margin on the left side of the element that is 50 pixels long.

Try modifying these examples to suit your needs, and expand on them as you become more proficient with CSS and the Receipt Email Style Manager. For more information and examples of CSS, check out the W3C School's CSS tutorial here.