How to change the appearance of an element

The ‘Additional Styles’ option in the ‘Modify Element’ tab of the personalization tools can be used to change the appearance of an element you are personalizing.

Below are just some of the basic style changes that can be easily added when personalizing an element in a campaign.

Using the ‘additional styles’ in the personalization editing tool

To make changes to the appearance of an element, the RightMessage personalization editing tool has an ‘Additional Styles’ settings area.

To locate the settings, select an element to edit. In the personalization editing tool, click the arrow toggle beside ‘Additional Styles’.

In the ‘Additional Styles’ setting rows of two fields are provided.

The first field is where you add the ‘property’ you want to change, and the second is for adding the ‘value’ you want to change the property to.

To make multiple design changes, click in the ‘faded’ row underneath.

Background-color

The ‘background-color’ CSS property allows you to change the color of the background. The different types of values that can be used for the ‘background-color’ property’ are:

  • Color keyword - black, white, pink, yellow

  • RGB Hexidecimal - #000000, #fff, #f5f5f5

  • RGB and RGBA Integer Values -  rgb(250, 250, 250) , rgba(250, 250, 250, 0.6)

Background-image

The 'background-image' property allows you to add or replace the image that shows as the background of an element. The background-image property used the URL() function. Within the URL function specify the path of the image to display.

  • url('imageURL')

Background-repeat

The 'background-repeat' property prevents a background image from repeating across and down the screen. The different type of values that can be used with the 'background-repeat' property are:

  • no-repeat: the image does not repeat on either the X or Y axis
  • repeat-x - the image repeats across the screen from left to right
  • repeat-y: the image repeats down the screen from top to bottom

Background-position

The 'background-position' CSS property allows you to position where on the element a background image appears. By default an image will appear in the top left-hand corner of an element. The different values that can be used to position a background image are:

  • Keywords: left, right, top, bottom and center
  • Percentage: 90% 2% (positions the image on the horizontal and vertical axis)
  • Pixels: 100px 200px (positions the image on the horizontal and vertical axis)

Background-size

The 'background-size' CSS property can be used to customize the size of a background image. The different values that can be used to size a background image are:

  • Auto: the image is displayed as it's original size
  • Percentage: set the width and height relative to the element.
  • Cover: set the background image to cover the entire element. The image will be stretched or cut to fit
  • Contain: set the background image to be fully visible in the element

Border

The ‘border’ CSS shorthand property allows you to change the color, style and width of a border that surrounds an element. The different types of values that can be used in the ‘border’ shorthand property are:

  • Color

    • Color keyword - black, white, pink, yellow

    • RGB Hexidecimal - #000000, #fff, #f5f5f5

    • RGB and RGBA Integer Values -  rgb(250, 250, 250) , rgba(250, 250, 250, 0.6)

  • Style - dotted, dashed, solid, double

  • Width - pixel unit or a keyword such as thin, medium or thick

Border-radius

The ‘border-radius’ CSS shorthand property allows you to give elements rounded corners. The ‘pixel’ can be used in the ‘border-radius’ shorthand property.

Color

The ‘color’ CSS property allows you to change the color of the text. The different types of values that can be used for the ‘color’ property’ are:

  • Color keyword - black, white, pink, yellow

  • RGB Hexidecimal - #000000, #fff, #f5f5f5

  • RGB and RGBA Integer Values -  rgb(250, 250, 250) , rgba(250, 250, 250, 0.6)

Font-size

The ‘font-size’ CSS property allows you to change the size of the text. The different types of values that can be used for the ‘font-size’ property are:

  • Font size keyword - ‘xx-small’, ‘x-small’, ‘small’, ‘large’, ‘x-large’ and ‘xx-large’

  • Percentage - 50%

  • Pixels - 16px

Font-family

The ‘font-family’ CSS property allows you to change the font to another style. The values that can be used for the ‘font-size’ property are:

  • Web Safe fonts - ‘serif’, ‘Sans-serif’, ‘monospace’, ‘cursive’ and ‘fantasy’.

  • Font Keyword - ‘Google Font Keyword’ or ‘Font File Keyword’

To add a ‘font stack’, add the font keywords minus any quotation marks.

Note: in order to change the font-family, the font you are changing the text to needs to be pre-loaded on your site - either via a script added to your sites header, or loaded into your website theme. Adding a font-family to the personalization will not automatically load the font for you.

Change the font-family with a pre-loaded font and using a font stack.

Changing the font-family without the font pre-loaded. The next value in the ‘font stack’ is applied.

Font-weight

The ‘font-weight’ CSS property allows you to change the font to appear lighter or darker. The values that can be used for the ‘font-weight’ property are:

  • Font weight keywords - lighter, light, normal, bold, bolder

  • Font weight numerical values - 400, 300, 700

Note: Not all fonts have the ability to use the numerical values. If you use the numerical values, and the particular weight of that font is not available, a dark or light variation of the font will be used.

Text-decoration

The ‘text-decoration’ CSS property allows you to add a line under or through the text. The values that can be used for the ‘text-decoration’ property are:

  • Line-through - adds a line through the text

  • Underline - adds a line under the text

Text-transform

The ‘text-transform’ CSS property allows you to change the text to either be all capitals, all lowercase or normal. The values that can be used for the ‘text-transform’ property are:

  • Uppercase - transform any text to appear as capitals

  • Lowercase - transform any text to appear as lowercase

  • None - leaves the text's case and capitalization exactly as it was entered.

Text-align

The ‘text-align’ CSS property allows you to align the text to either the left, right or middle of the element. The values that can be used for the ‘text-align’ property are:

  • Left - align the text to the left of the element

  • Right - align the text to the right of the element

  • Center - align the text in the middle of the element