Staff List – Customization

WordPress Plugin Staff List – Customization

By default, your theme’s styles will be applied to staff member pages. However, you can easily change the look and feel of your presentation by using built-in formatting options or adding your own custom styling.
There are custom styling options for the plugin container, plugin sections, images, icons, pagination and individual fields. You can apply different styles to staff and single pages.
Staff list pages can easilly match the rest of your website design.

Staff Template – built-in formatting options.

Staff template provides built-in basic styling options like font size or margins.
Individual fields can have the same or differently styles on staff and single pages.
Staff Template > Input Fields > Field > Field Style – Staff Page
Staff members page styling options.
The field style options will be applied to staff page.
wordpress plugin staff list field style options
Staff Template > Input Fields > Field > Field Style – Single Page
Single page styling options.
The field styling will be applied to single pages.
wordpress plugin staff list field style options single page
Field HTML Tag
For your field container you can select one of the HTML tags. DIV is the default one.
Staff List, staff page, field tags
 

Staff Template – Custom CSS

For full control over the visual aspect of your presentation, you can add custom classes and inline styles.
wordpress plugin staff list field style custom css options
Some of the data fields, have an option to add styles to individual sections: field container, label and text.
wordpress plugin staff list field style custom css for label and text
You can also apply different custom styling to Staff and Single pages. See class prefixes.
 

CSS Customization

Advanced customization, including custom classes requires some knowledge of CSS and browser developer tools. See: Chrome DevTools, Firefox Developer Tools
We provide only limited CSS support. Feel free to reach out and we’ll let you know if we can help with your CSS request. Otherwise, we may be able to point you in the right direction!
p20886