Styling Text Strings Without Editing Any ASP Code

The text shown in your storefront comes from three places:

• Your own header.asp or footer.asp files (create a customized graphical interface for your store)
• Your store database (e.g. product and category names and descriptions)
• A few include files such as languages.asp (editing text in your storefront)

Using cascading style sheets, you can control the look of your storefront in a very effective way. But what if you want to change the look of a specific text string that is dynamically fed from a file like languages.asp? What's the best way to do it?

Most of the messages, field labels, etc. in your storefront are retrieved dynamically from a file located in the includes folder and called languages.asp. There is a section of this WIKI about (editing text in your storefront) that talks about editing this file.

Here we are going to focus on a specific issue: what if you want to style one of those strings? Our recommendation is to use cascading style sheets in this case too, in order to limit to a minimum the code changes in languages.asp (and prevent potential syntax issues).

1. Locate the string in languages.asp. For example, let's assume that you want to change the look of the following text, which is shown on the advanced search page (search.asp).

   dictLanguage.Add "english_advSrca_14", "Search on exact phrase."

2. Let's assume you want to change the font size and font color. It's best not to try to add any styling information to languages.asp directly because if you add a double-quote (”) to the file, it breaks the code. What we recommend is that you add a style identifier to the text string, so that you can later “target it” using CSS. It's quite simple. Using the example above, we are going to wrap our text string with a “span” (so we tell the system where our styling changes being and end) and add a “class” called “mySearchClass”, as follows:

   dictLanguage.Add "english_advSrca_14", "<span class=mySearchClass>Search on exact phrase.</span>"

3. The class name can be shared with other text strings. So if you have 5 field labels that you want to style the same way, use the same class name for all 5 text strings. However, don't use a class name that is used for something different, or you will create a conflict (so use a unique name for this new style).
4. Now that we have added a way to identify that specific text string, we can simply add our class to any CSS document loaded in header.asp, such as pcStorefront.css. In this example we want to change the font color to blue and make it bold, so we will add the following:

   .mySearchClass {
    color: #0000FF;
    font-weight: bold;
   }

5. The style definitions between the brackets will change depending on what you wish to do (see using CSS in ProductCart)
6. Save both files and upload them to their respective directories (always remember to back-up the original files so you can quickly restore them if needed).

The are cases in which the instructions provided above do not work. This includes text strings that are dynamically changed on the page using JavaScript (e.g. text strings that are only shown when something is selected on the page, such as inventory messages when specific sub-products are chosen on a store that uses the Apparel Add-on).

In those cases, you will need to review the source code, identify where the text is shown, and target it through CSS using existing information (not a new “span” and “class” as shown above).

For example, in some cases ProductCart uses transparent input fields to change a text value on the page dynamically using JavaScript (e.g. the price of an Apparel product when the product options change). In that case, you could easily target the input field ID using CSS.

For instance, the ID of the transparent input field that shows the inventory message specific to a certain Apparel Sub-Product is “StockMsg” (you would find this by looking at the source code of the page loaded in the browser), so you would add the following code to pcStorefront.css to make the text shown bigger and bolder:

#StockMsg {
 font-weight: bold;
 font-size: 15px;
}