Styling the Plugin’s Front End Displays

The plugin has a default stylesheet, /css/mstw-ss-styles.css, which applies to all front end elements – shortcodes, widgets, and page templates. The default colors are shown on Game Venues table on the MSTW Plugin Dev Site. There are several ways to customize the front end elements on your site, as described below. NOTE that prior to version 1.3, customizations often required changes to the plugin’s stylesheet. In version 1.3 and beyond, there is no longer any need to change this file, and it is recommended that you do NOT change it.

To change the defaults across all front end elements on your site, there are two options. First, the Settings admin menu provides a rich set of options for shortcode, widget, and template data, layout, and colors. These settings apply to ALL front end elements, across the entire website. See the Settings-Colors, Settings-Data Fields & Columns, Settings-Date & Time Formats, and Settings-Venues manual pages. If you prefer, you can instead create a customized stylesheet named mstw-ss-custom-styles.css, and save it in your theme’s main directory, or your child theme’s main directory if you are using one. Since it is loaded after the default stylesheet, modifications to the styles will affect all the plugin’s displays on your site.

To customize the styles for a specific team, a schedule table for example, each front end shortcode, widget, and page template has team specific HTML element modifiers built-in. You can add team specific selectors to your CSS rules in the mstw-ss-custom-styles.css in your main theme (or child theme) directory. For example, on the Schedule Tables page of the MSTW Plugin Dev site, the defaults (set on the Settings admin screen) are the Cal blue and gold. The 49’ers red and gold branding is set via custom css styling. The CSS rules for the 49’er styles on the dev site is available on this site’s Code Snippets page.

A video tutorial on styling schedule tables is available to Gold Support members.