Add a CSS ID or class name to a module

You can enter a custom ID or class name for any row, column, or module. 

To assign a custom CSS ID or class value to a row, column, or module:

  1. Open a row, column, or module for editing.
  2. Click the Advanced tab and scroll down to the CSS Selectors section.
  3. Add a unique ID or a class name or both, depending on how you plan to use it.
    Don't use a pound sign or period in the selector value. The following sections describe ID and class selectors in more detail.
    Multiple CSS classes can be entered by separating them with spaces. 

About the ID selector

An ID selector must be unique, meaning it should only be used for only one element (meaning a row, column, or module).

IDs are used for two purposes:

  • To write custom CSS rules that apply to a single element.
  • To create an anchor so you can link to that element. (See the related links for how to create the link to the anchor.)

Here are the rules for ID selectors:

  • They must start with a letter
  • They cannot contain spaces
  • The only characters they can use are letters, numbers, dashes, or underscores

The symbol used to refer to an ID selector in a CSS rule is the pound sign (#). For example, if you assign an ID named my-element to a module, you can target that ID by writing a CSS rule for #my-element. The following rule says that the element with the ID my-element must be right-aligned:

#my-element {
    text-align: right;
}

Note: You should use the pound sign to name IDs in your CSS rule, but you should not use the pound symbol when you assign the ID name to the row, column, or module.

About the class selector

A class selector can apply to as many elements as you want your CSS rule to apply to. 

A class selector has the same constraints as IDs in terms of the letters, numbers, and symbols it can contain. 

Suppose you have several modules that you want to center on the page. Assign the same class name, my-elements, to each of the modules. The CSS symbol to refer to a class is a period (.), so your CSS rule would look like this: 

.my-elements {
    text-align: center;
}

Keep in mind that classes in the CSS rule should start with a period, but the value you enter into the CSS setting for an element should not include the period.