Custom CSS Classes

WordPress Plugin Staff List – Custom Classes

How To Add Custom Classes

Section containers are located in Template Options, individual fields in the Input Fields.
  • Find the HTML element you want to modify.
  • Go to Custom CSS Class.
  • Empty value = an element has a default style.
  • Enter the CSS class name you want to use to override the default.
  • Do not include leading dots!
  • You can add multiple classes. No leading dots, single space between class names.
Custom CSS Class - input field

Different Classes for Staff Page and Single Page

You can add class prefixes to apply different custom styles to Staff Page and Single Page.

  • The lst_ prefix will add custom class only to Staff Page.
  • The spg_ prefix will add custom class only to a Single Page.

Prefix is not a part of the class name. It is used by the program as an indicator of the page type to apply the custom class to.

Custom CSS Class Prefixes
  • myClass1 class is added to both page types.
  • lst_myClass2 prefix lst_ is removed and myClass2 is added to a Staff Page
  • spg_myClass3 prefix spg_ is removed and myClass3 is added to a Single Page.

Example: Live Preview – Grid Layout. Text is center aligned on the staff page and left aligned on the single page.

How To Add Custom Styles

  • Find the HTML element you want to modify.
  • Go to Custom Inline Style.
  • Enter property-value pair: property:value; like color:blue;.
  • Do not include attribute name (style), equal sign or double quotes.
You can have as many property value pairs as you want. Don’t forget to include the semicolon ; after each pair.
Example color:blue;font-size:46px;
It will render as style=”color:blue;font-size:46px;”
Not all Staff List layout elements have inline styles available.
You may want to apply inline styles only for testing purposes during the development of your project. For production stage you should consider CSS classes.