Chapter 16

Making Your Site Look Great

In This Chapter

Creating a color theme

Laying out your site

Using the Advanced Site Customization feature

No one can deny that it’s important to have a well-organized, visually appealing Web site. For customers who haven’t seen you in person, the look and feel of your Web site represents your entire company’s image. Luckily, if you create your site in NetSuite, you don’t get a canned site with a limited set of options; you have a basic site structure with a myriad of options. This gives you all the glory of a professionally designed site without the sweat, tears, and empty pockets.

In this chapter, we show you how to use color themes and layout tweaks to customize your site’s look. We also show you how to use advanced features to customize nearly every aspect of your Web site.

Only those with the role of Administrator can follow the steps in this chapter.

Looking Good

When managing a site with NetSuite-generated pages, you can use several options to customize your site’s look and feel. The chart in Figure 16-1 shows you the overall workflow for changing a Web site’s look with and without the Advanced Site Customization feature.

If you use the Advanced Site Customization feature, you may want to look over the “Using Advanced Site Customization Options” section of this chapter before applying themes or creating layouts.

None of the appearance settings is required. However, it’s a good idea to review the various appearance settings in case you run into trouble with your site appearance.

Figure 16-1: Set up a site using Advanced Site Cus-tomization and basic customization options.

Styling your site with themes

NetSuite includes a few built-in themes that you can apply to your site for a fast setup. Themes are like templates in that they set the layout.

Themes also include the following:

Templates for the item page

Color theme

Text size and font

Look of the portlets, tabs, and buttons

To choose a theme for your site:

1. From the Setup tab menu choose Web Site⇒Set Up Web Site.

The Web Site Setup page appears.

2. Click the Appearance tab.

The Appearance tab has all the preferences you need to control the look and feel of a site created with NetSuite.

3. Choose from the Web Site Theme drop-down list.

A theme is a design style that is applied to the various elements of your site. You can try the various templates on for size by clicking the Preview link to the right of the Web Site Theme drop-down list.

The Web Site Theme drop-down list offers a number of different themes to choose from (courtesy of NetSuite), as well as any custom themes that you’ve created. Choose one of the built-in themes (as shown in Figure 16-2) or select None to have a plain site (as shown in Figure 16-3). Click the Preview link to the right of the Web Site Theme drop-down list to see how your site will look with that particular theme applied.

If you have set up custom themes, they also appear in the Web Site Theme drop-down list. For more information on custom themes, see the later section, “Marching to the beat of your own theme.”

Figure 16-2: This site uses the Round Edges theme.

Figure 16-3: This is the same site without a theme applied.

4. Use the other fields, check boxes, and drop-down lists to change theme settings.

For example, you can choose from the Web Site Color Theme drop-down list and the Web Site Font drop-down list while keeping the rest of the theme’s aspects at their defaults.

To have the full effect of a theme, all appearance settings in the Colors, Web Site Templates, and Page/Fonts sections must be set to From Theme. Keep in mind that if you change one of these options and then change the theme, you still must set the drop-down list back to From Theme; choosing a theme doesn’t override other changes you made (such as choosing Comic Sans as your font). If you want the theme in all its design glory, set all the options you’ve fiddled with back to From Theme.

5. Choose Save.

Showing your colors

Color themes can solidify your site with your products or branding. If you sell designer linens, for example, you may want to have a neutral color theme to showcase the coloring of your items. If your company logo contains signature colors, you may want to echo those colors to coordinate your site with your logo.

In NetSuite, you can choose from a variety of built-in color themes for use with your site, including any of the color themes used with the site themes and college school colors. You can also choose to create a color theme that is an exact match with your logo and other coloring.

Color themes were originally designed to personalize your NetSuite account. Therefore, the same color theme may not place color in the same places in your site that it will in your account. Make sure you preview your site after applying a theme to make sure everything is how you want it. Also, be sure that the text color contrasts enough from the background color on all pages in your site, including checkout. Otherwise, customers may not be able to read the text in your site.

You can apply color themes at Setup⇒Web Site⇒Set Up Web Site.

You can either apply an existing color theme or modify one from the Setup menu by choosing Web Site⇒Color Themes.

If you’re ambitious (or picky) you can create your own custom color theme:

1. From the Setup tab menu choose Web Site⇒Color Themes⇒New.

The New Color Theme page appears.

2. Type a name in the Name field.

For example, you may enter Logo Color Theme.

3. For each set of background and text colors, enter the hexadecimal code in the field that contains #FFFFFF.

The painting icon to the right of the fields lets you select a color instead (choices are rather limited).

4. For these additional options, select the Advanced Editing check box.

If you’re using a color match from a graphics program, you can enter the RGB or HSL codes. Entering an RGB or HSL code automatically sets the other codes for that field.

More fields appear so that you can enter RGB or HSL values to match a color precisely.

RGB stands for red, blue, and green. You can enter RGB color values to precisely define each color. RGB values range from 0 to 255 and there are three of them (just like the three fields that appear after RGB). Yes, you guessed it: Red goes in the first, green goes in the second, and blue in the third.

HSL stands for hue, saturation, and lightness. Hue is the numerical value of the color on a color wheel (0 to 360 degrees). Saturation is a percentage; 100% means the color at its full strength. Lightness is also a percentage, but 0% is black, 50% is average, and 100% is white.

5. Click the Preview button.

A sample site opens in a new window to show where the colors are used. You can close that window, keep making changes, and click the Preview button again to see the results. See Figure 16-4.

6. When you’re happy with the colors, click the Save button.

Be sure that the text color contrasts enough from the corresponding background color. Otherwise, you may not be able to see the text in your site.

Figure 16-4: Use the corresponding template fields to customize these areas of your site.

Apply a color theme

Whether you choose to create a custom color theme or use one of the included color themes, you need to apply your theme to your site.

To apply a color theme to a site:

1. From the Setup tab menu choose Setup⇒Web Site⇒Set Up Web Site.

The Web Site Setup page appears.

2. Click the Appearance tab.

3. Choose an option from the Web Site Color Theme drop-down list.

The drop-down list is in the Colors section.

4. Click Save.

Your color theme is now applied to your live Web site.

Laying Out Your Space

You can customize layouts for pages that have item, category, and related item lists. Layouts save your settings for these things:

Border style

Column size

Number of columns and rows

Sorting

More

Each site theme has four separate layouts:

Item lists on presentation tabs

Category lists on presentation tabs

Related item lists on presentation tabs

Item lists on Home tabs

You can create a new layout based on one of these layouts or create an entirely new layout.

To create or customize a layout:

1. From the Setup tab menu choose Web Site⇒Layouts.

The Web Site Item/Category Layouts list appears.

2. Click depending on your plan:

• New button (lower left): To create a new layout

• Customize link (next to the layout you want to change): to customize an existing layout

The Item/Category Layout page appears.

3. Type a name in the Name field.

You choose this name when you apply the layout to list pages in your site.

When you customize a layout, you’re changing a copy of the layout. This requires you to enter a different name from the original.

4. Enter settings in the Border Style, Column Width, Number of Columns, Number of Rows fields. You can also specify Row Height, Row Padding, and more.

Click the name of a field if you need an explanation of what the preference does.

5. If you use the Advanced Site Customization feature, select the Use Templates check box.

Using templates allows you to use custom item/category templates to define how the list and each item in the list appear. When you use templates, the Heading and Items tabs disappear because you no longer need them.

For more information on item/category templates, see the later section, “Item/category templates.”

6. If you don’t use templates, clear the Use Templates check box and use the Heading tab to set how images and text align in lists.

7. If you don’t use templates, use the Items tab options to decide how items appear in lists.

8. Click the Save button.

Using Advanced Site Customization Options

If you have experience building Web sites or working with JavaScript and have the Advanced Site Customization feature available (and enabled) in your account, you have several customization options.

Because your advanced customization choices may affect other site appearance preferences, you should check out the set up process in Figure 16-1 of this chapter.

Marching to the beat of your own theme

Using Advanced Site Customization, you can either create a theme based on one of the built-in themes or create your own theme from scratch.

You get a few benefits from creating your own theme:

You can design the shape, placement, and font of your tabs and buttons.

You can set backgrounds or include images on your site’s pages.

You can design the header and footer.

You can include scripts and other information.

You can decide how bulleted lists appear.

You can design the look and placement of portlets and sidebars.

Customizing a theme is a good option if one of these scenarios fits you:

You want to use all of NetSuite’s site features but want a fully customized site.

You like one of the built-in themes but want to change one or two things about it.

Site themes pull information from your account using Web site tags that NetSuite provides. These Web site tags help define areas of the page so that NetSuite can work well with your site. Some of these tags must be used with certain HTML tags, and most of them must be used to have the correct content in your site and to integrate your Web site orders with your account. A list of NetSuite’s Web site tags are available through the NetSuite online Help Center.

When you create a custom theme, you enter template code for the sections of the site that you want to change. Each section or aspect of the site that you can change is represented by each field on the Web Site Theme page.

Applying a style sheet

If you also enabled the Host HTML Files feature, you can apply a style sheet to your theme. Creating your theme then goes a little faster and makes connections between hosted or external pages less noticeable.

1. From the Setup tab menu choose Web Site⇒Web Site Hosting Files.

2. Click the link for Live Hosting Files.

3. Click the link for the site folder.

4. Click the Add File button.

Browse to select your CSS file.

5. When creating your theme (with steps in the following section), add your link to the Addition to <head> field.

You have to add your link to the CSS file using standard HTML codes. But our assumption is that if you’ve created a CSS file, this task will be all in a day’s work for you.

Creating a custom site theme

To create a custom site theme:

1. From the Setup tab menu choose Web Site⇒Appearance⇒Color Themes.

The Web Site Color Themes list appears.

2. Click the option that fits your choice:

• Customize appears for themes that are built in and that you can change.

• Edit appears for themes that aren’t built in. Make sure you save them under another name so you don’t overwrite the original theme.

• New creates a completely new theme.

3. Determine which templates and fields you want to edit.

The Color Theme, Drilldown Template, and Layout fields can be overridden on the Web Site Setup page. These preferences allow you to associate your other customizations with a theme so that the appearance settings are all saved in one package.

For more information on color themes, see the earlier section, “Showing your colors.” For more information on layouts, see the “Laying Out Your Space” section, earlier in this chapter. For information on drilldown templates, see the following section.

Item/category templates

Item templates are your ticket to a detailed item-information page with multiple images and custom formatting. You can use category templates to customize how items and categories look in a list, whether it’s a list of items or a list of categories. Additionally, you can use item templates to customize the layout and design of pages for the items you sell and for information items (which lets you publish formatted text with images).

If you need to, you can create several templates for different circumstances and then apply the templates on individual records, layouts, themes, or via the Web Site Setup page.

When you create an item or category template, you use custom tags with attributes to pull information from items, information items, customer records, or color themes. Attributes are ways to tell NetSuite to pull in a particular piece of information or a particular image when it’s displaying your site.

You can also choose from attributes to add to the page:

Add to Cart button

Quantity field

Your company logo

Out of Stock message

To create an item or category template:

1. From the Setup tab menu, choose Web Site⇒Item/Category Templates.

The Web Site Item/Category Templates list appears.

2. Choose one of the following:

• Customize link (next to a template): To create a new template from a built-in template.

• New button: To create a new template from scratch.

Customizing a template saves your changes in a new template and keeps the original copy of the template.

When you see an Edit link next to a template, the template isn’t built in. When you edit one like that, you must click the Save As button to save the edited version as a new template. Click the Save button to save over the current template.

3. Enter a name for the template in the Name field.

Use a recognizable name when you apply it to areas of your site. For example, if you’re creating this template for item lists, you may enter Item List Template.

4. Enter any page scripts, meta information, or other header code in the Addition to <head> field.

The <head> field is part of the HTML in your file. HTML files have a head section and a body section.

Adding code here means adding HTML code for elements you want to insert into the template.

5. Enter the page template in the Template HTML field.

Template HTML is added to the existing HTML for the page. It must begin with <td> and end with </td>.

Include tags to call information from your account. Use the tag formats and attributes that you get when you search for Web Site Tags in NetSuite’s online Help center.

6. Click the Save button.

Your template is now saved, but isn’t used in your Web site until you apply it.

Apply yourself

Like we said: You have to apply your templates and layouts before your Web site can use it.

1. From the Setup tab menu, choose Web Site⇒Set Up Web Site.

The Web Site Setup page appears.

2. Click the Appearance tab.

It includes a drop-down lists where you can select your new template. You can select templates or layouts for the following:

• Default Item Drilldown Template

• Default Item List

You can select layouts for:

• Default Item List Layout

• Default Category List Layout

3. Click the Save button.

Your templates and layouts are applied to your site. Like most Web development tasks, you may need to refresh your browser to see the fruits of your labor.

Customizing text

Another big advantage to using the Advanced Site Customization feature is the ability to customize almost all of the text in the site, including:

E-mail messages, such as order confirmation

Error messages

Headings

Drop-down list options for payment methods

Alerts, such as Full Cart warnings

Button labels

Field labels

Messages, such as items out of stock

Customizing these areas with your own text helps put your touch on your site. It allows you to add branding language or instructions or messages that are specific to your business. For example, if you call customers “clients,” you can customize your messages and e-mail to remove or replace references to “customers.”

To customize Web site text:

1. From the Setup tab menu choose Web Site⇒Customize Text.

The Customize Web Site Text page appears.

2. If you use multiple languages in your site, select the language you want to work with.

Your customizations are saved for each language you use. If you need to edit custom text, selecting the language brings up your saved customizations, which you can change and save over.

3. The default text appears on the left side. Enter your text in the Customization field.

For example, if the default text reads “Selected Option Is Unavailable,” your site can say, “You can’t do that!” (Though seriously, we don’t recommend anything that informal.)

You may want to copy and paste the text from the Default Text field into the Customization field and then edit the text to help make sure any code and tags stay in place. Some fields provide an explanation for where the text is used in the Description field, so be sure to read these.

4. Click Save.

You can also customize order fulfillment e-mail, but that’s done on a different screen so people who don’t use the Web site can still customize it. From the Setup tab menu, choose Accounting⇒Customize Fulfillment Email.