Styling the Plugin’s Displays

Out of the box, the default stylesheet rules in /css/mstw-cs-styles.css control the front-end displays of staff tables, coaches galleries, and single coach profile pages. The graphic design of the coaching staff tables, the single coach’s profile pages, and the coaches gallery pages may be modified by editing the plugin’s style sheet /css/mstw-cs-styles.css. ALWAYS use a new stylesheet, mstw-cs-custom-styles.css, located in your CHILD theme’s main directory. Read more about this here.

If you are not comfortable editing the stylesheet, significant control of the displays is provided through the Display Settings admin screen. NOTE that the admin page settings will override the corresponding styles in the mstw-cs-styles.css stylesheet AND any custom stylesheet you may have created.

Depending on your theme, it may also be necessary to edit the single-coach.php and taxonomy-staffs.php templates to get everything to ‘fit’ just right.

Through html tags, the plugin supports rules specific to individual staffs. For example, all coaching staff tables are in a .mstw-cs-table class, which is styled by the default rules, but each table is also in a .mstw-cs-table-team-slug class, which can be styled more specifically for individual staffs. Because they are more specific than the ‘generic’ rules and the rules generated by the display settings, they take precedence over both in “the cascade” of CSS rules.

Combining the above techniques, significant graphic design control of all plugin output can be achieved, as shown on my MSTW Plugin Development Site. The rules for the samples below are shown at the bottom of this page.

Shortcode Example #1
Coaches Gallery
/*---------------------------------------------------------
Sample Custom Styles for coaching staff table ([mstw-cs-table] shortcode)
Used shoalsummitsolutions.com live coaching staffs - girls-varsity-baskeball team
---------------------------------------------------------*/
h1.staff-head-title.staff-head-title-varsity-basketball-girls {
  color: #1775D7;
}

table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls th {
  background-color: #1775D7;
  color: #FEB101;
}

/* Odd rows will be the default */
table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls tr td {
  background-color : #FEB101;
  color : #1775D7;
}

table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls tr td a {
  color: #1775D7;
}
table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls tr:nth-child(even) td {
  background-color : #1775D7;
  color : #FEB101;
}

table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls tr:nth-child(even) td a,
table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls tr:nth-child(even) td a:visited,
table.mstw-cs-table.mstw-cs-table-varsity-basketball-girls tr:nth-child(even) td a:active {
  color : #FEB101;
}

/*--------------------------------------------------------
Sample Custom Styles for Single Coach profile/bio (single-coach.php page template)
Used shoalsummitsolutions.com live coaching staffs - girls-varsity-baskeball team
---------------------------------------------------------*/
div.coach-header-varsity-basketball-girls {
  background-color : #1775D7;
  color : #FEB101;
}

div.coach-header-varsity-basketball-girls #coach-name-position #coach-name h1,
div.coach-header-varsity-basketball-girls #coach-name-position #coach-name h2 {
  color : #FEB101;
}

div.coach-header-varsity-basketball-girls .coach-bio h1 {
  color : #1775D7;
}

/*--------------------------------------------------------
Sample Custom Styles for Coaches Gallery (taxonomy-staffs.php page template)
Used shoalsummitsolutions.com live coaching staffs - girls-varsity-baskeball team
---------------------------------------------------------*/
h1.staff-head-title.staff-head-title-varsity-basketball-girls {
  color: #1775D7;
}

div.coach-tile.coach-tile-varsity-basketball-girls {
background-color : #1775D7;
  color : #FEB101;
}

div.coach-tile-varsity-basketball-girls .coach-name-position h1,
div.coach-tile-varsity-basketball-girls .coach-name-position h2 {
  color : #FEB101;
}

div.coach-tile-varsity-basketball-girls .coach-name-position a {
  color : #FEB101;
  text-decoration : none;
}

div.coach-tile-varsity-basketball-girls .coach-name-position a:hover {
  color : #FEB101;
  text-decoration : underline;
}