OBI Answers: Use Custom CSS Style

The initial setup for this tutorial is explained in the post Custom CSS Style Options (HTML Only).

Step 1

Let’s change the default style used for the Product Name. We shall indent the the product name, change it to uppercase, add some space beneath each product and make the text pink. To do this we need to know which CSS styles to use.

We need to use the following:

  • padding-left (for indentation)
  • text-transform (for uppercase)
  • padding-bottom (for space beneath product name)
  • color (to change the font colour)

When completed they will look like this:

  1. padding-left: 20px;
  2. text-transform: uppercase;
  3. padding-bottom: 2em;
  4. color: #ff00ff;

Step 2

Put all the styles on one line and enter them into the ‘Use Custom CSS Style’ text field.

padding-left: 20px; text-transform: uppercase; padding-bottom: 2em; color: #ff00ff;

custom_css_style

You will need to click in the checkbox before you can enter the styles.

Step 3

The report should now look like this.

product_price_results_with_css_style

Leave a Reply

 

Spam Protection by WP-SpamFree