How To Customize Product Pages This section explains how to customize every aspect of HART On Web NSP product pages. Overview HART On Web allows you to customize every detail of NSP product pages using a simple Cascading Style Sheet (CSS). This is the most powerful way to give you complete control over the look of the NSP product pages that you embed in your website. This method enables you to seamlessly integrate NSP product pages into your website just the way you want. You have complete control. Getting Started Quickly For those who understand how to use Cascading Style Sheets, we thought the fastest way to get you started is to let you download a blank style sheet -- fully commented -- with all of the element defintions framed and ready for customization. All you need to do is: (1) Upload this sample style sheet to your webserver, (2) Add a reference to this style sheet to the <HEAD> section of any page(s) that contains embedded NSP product pages that you want to customize, and then (3) Update the style definitions in the style sheet to create the look you want. To download the sample style sheet, click here. If you have any questions about this process, feel free to contact us. For Those Not Familiar with Cascading Style Sheets If you're not familiar with CSS, there will be a little learning curve to get you started, however, it's really quite easy, and if you have any problems, you can contact us. Step 1: Download the Style Sheet The first thing you'll need to do is to download our sample style sheet to your computer. Make sure you remember where on your hard drive you saved it. To download the sample style sheet, click here. Step 2: Upload the Style Sheet to Your Website Now, you simply need to send ("upload") the style sheet to your website. It's easiest to put it in the root directory of your website, but you can put it wherever you like. Step 3: Reference the Style Sheet from Your Webpage Let's begin by working with a single webpage that already contains a HART On Web NSP product page. You need to tell your webpage that it is going to be "styled" by the style sheet that you just uploaded to your website. You do this by inserting a single line into the "head" part of the webpage. Open up the webpage in your favorite editing software and view the HTML source code of the page. Any decent web page editing software will contain a button that allows you to do this. You can even open the page in a text editor such a notepage if you prefer. Now, since we're inserting a line into the "head" section of the webpage, we need to identify where the "head" section is. The head section is the area of the webpage contained between these two words (called "tags" in web design jargon):
...and...
Once you've located this part of the webpage (the "head"), you simply need to insert a single line of text. Again, this text will tell the webpage that it will be "styled" by the style sheet that you just uploaded. So, anywhere within the head section (between "<head>" and "</head>"), clear a blank line and insert this text: <link href="how.css" rel="stylesheet" type="text/css"> The most important part of this statement is "how.css". This needs to be the same name as the style sheet that you uploaded earlier. So, if you uploaded the sample style sheet and did not change its name, then you should be all set. However, if you changed the name of the style sheet, then make sure to change "how.css" to the name you gave the style sheet. Again, if you have any problems, just give us a call. At this point, you can close and save the changes to your webpage. If you're editing your webpage on your home computer, don't forget to upload the edited page to your website. Step 4: Style Your Webpage Now comes the fun part. You get to actually change the look of the NSP product page that is embedded in your web page. To do this, you simply add style commands into the section of the style sheet ("how.css") that pertains to the part of the NSP product page that you want to change. For example, in the style sheet there is a "style" called:
This "style" is used to style the title of the product. You will notice two curly braces after the style name:
You will insert your style commands between these two curly brackets. I'm sure you're wondering what these commands look like. Well, here is an example that tells the webpage to display the title of the product in a font that is 24 pixels high (really big):
You simply put each style command on it's own line. Make sure your don't forget the colon (:) or the ending semicolon (;). These are vital to making style sheets work. Now, take a look at your webpage in a browser. You should see that the product title is huge; 24 pixels to be exact. Let's do one more example. Let's say you want the product name to be blue in color. Just add a new style command to the previous example so it looks like this:
Now view your webpage. You should see that the product title is now blue. Isn't that easy! The Power of Style Sheets Style sheets are an open internet standard that are used by all modern internet browsers, so whatever you see in your browser will be the same thing that your visitors see. Now for the fun part. Now you will discover the real power of style sheets:
You may be wondering just what other style commands can be entered between the curly braces. Well, there are so many that books have been written on the subject, but we'll refer you to an excellent website that describes them for you. Just visit the following page to see lists of style commands that are available for you to use for styling the NSP product pages that are embedded in your webpages: Getting Help Style sheets are a powerful and flexible way to design your webpages. We are happy to help you if you run into trouble styling your pages, but if you don't know about style sheets, please take the time to learn by visiting the w3schools website. Knowing how to use style sheet will revolutionize the way you design your website. |