CSS Styling of Front End Displays

The plugin provides flexibility in styling the front-end displays (from shortcodes) via Cascading Style Sheets (CSS). The plugin’s stylesheet, /css/mstw-bb-styles.css, provides the default styles, and is an important reference, but it should NOT be modified. Because if it is modified, any changes will be wiped out when the plugin is updated. A better option is add custom CSS to a stylesheet named mstw-bb-custom-styles.css, and save it in your theme’s home directory. If such a stylesheet exists, it will be loaded AFTER the plugin’s stylesheet, therefore its selectors and rules will over-ride the plugin’s default stylesheet. The BEST method is to CREATE A CHILD THEME, and add the custom stylesheet there. Then updating your site’s theme will not wipe out the customizations in the child theme.

Generally speaking, a top level table contains a tag like:

<table class="mstw_tournament_bracket mstw_tournament_bracket_league-slug">

or

<table class="mstw_tournament_bracket mstw_tournament_bracket_league-slug">

So front end displays can be styled using selectors can cascade from that unique tag.

Styling examples may be found on the MSTW plugin dev site. The custom stylesheet, which changes some of the colors for the Double Elimination tournament ( slug: double-elimination) shown on the site, is shown below.

/*
 *   Double Elimination Tournament Bracket Customizations
 */
.mstw_tournament_bracket .round_header {
    text-align: center;
    font-size: 16px;
}

table.mstw_tournament_table_double-elimination td.team_B.winner, 
table.mstw_tournament_table_double-elimination td.team_A.winner {
	background-color: #ddddff;
}

div.mstw_tournament_bracket_double-elimination ul.game li.game_status  {
	background-color: navy;
}

div.mstw_tournament_bracket_double-elimination ul.game li.game_location  {
	background-color: cornflowerblue;
}

div.mstw_tournament_bracket_double-elimination ul.game li.team_B.winner, 
div.mstw_tournament_bracket_double-elimination ul.game li.team_A.winner {
	background-color: #ddddff;
}

/*
 *   Double Elimination Tournament Table Customizations
 */
 
.mstw_tournament_table_double-elimination tr.round_header {
    color : cornflowerblue;
}

.mstw_tournament_table_double-elimination tr.table_headers {
    background-color : navy;
	color            : white;
}

.mstw_tournament_table tbody tr:nth-child(even) {
	background-color : white;
	color            : navy;
}

.mstw_tournament_table tbody tr:nth-child(odd) {
	background-color : white;
	color            : navy;
}