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: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
Step #1: Set Up Your Style 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.
Create a New Style ID
建立新的页面风格ID
We'll assume that your style ID will match your web site for the following instructions:
1. Log in to the RegNow vendor control panel if you haven't already.
如果您还没登录RegNow发行商控制面板，请登录。
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
- 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（如页右栏和页尾）
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:
<html>>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.
<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 -->
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 -->Notice that we close the <td> tag for the RegNow content in the second section.
</tr>
<tr>
<td colspan="2">My Footer</td>>
</tr>>
</table>
</body>
</html>
If we were to view the completed page HTML, it would look like this:
<html>>Complete Your Style ID
<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>
完成您的页面风格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.
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.
Step #2: Enable Your Style 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:
1. Log in to the RegNow vendor 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.
Note: You can also use a different style for each product. To do this, visit the Products section of your control panel and click "edit" next to the appropriate product. Then, select the style in the dropdown labeled Product Style.
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 server via a web interface.
Cascading Style Sheet (.css) files may also be uploaded and used.为了保持服务器的安全状态，所有图片和内容必须放在我们的服务器上。您可以通过web interface上传图像和.css文件到我们服务器。 Cascading Style Sheet (.css) files may also be uploaded and used.
层叠式样式表（.css）文件也可以上传使用。You can reference the .css files in this format when creating a style:
在建立页面风格过程中，您的.css文件可参照这种格式：<link href="//regnow.img.digitalriver.com/vendor/XXXXX/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:
这些图像一经上传，便可通过您的页面风格来使用，格式为：/vendor/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/vendor/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）的说明生成新脚本代码：
http://www.verisign.com/seal/v3/install.html
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.
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.