Team Schedule Colors

[Bryan Shepherd]

Good afternoon,

I have successfully gotten the css styling according to the code snippets, but I’m curious as to whether I can color the games according to home/away?

[Mark]

Yes. The team schedule table rows have tags for home-game and away-game, which allow you to set up whatever CSS rules you choose.

There is also the shortcode argument:

star_home = '*' (or whatever symbol you choose, maybe star_home='†')

As well as star_conf, star_div, star_league.

For example, see the team schedules on the dev site: http://dev.shoalsummitsolutions.com/lm-team-schedules/

[Bryan Shepherd]

I’ve used the shortcodes (which are great!) and was wondering about the CSS tags.

Here’s a link: http://wpress.kcmsathletics.com/baseball/mckinley-middle-school-baseball/

Thanks!

[Bryan Shepherd]

So I tried to change the CSS tags from odd, even to home-game, away-game and it didn’t work and I’m wanting to make sure that I did it correctly. Here’s the CSS code that I used:

/*----------------------------------------------
 * Styles for the Horace Mann team schedules
 *----------------------------------------------*/	
table.mstw-lm-team-schedule_horace-mann-middle-school thead tr th {
	background-color: #007500; /* green */
	color:            #FFFFFF; /* white */
	font-weight:      bold;
	border-top:       1px solid #FFFFFF; /* white */
	border-bottom:    1px solid #FFFFFF; /* white */
	}
	
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(away-game) {
	background-color: #FFFFFF; /* white */
	color:            #007500; /* green */
	}

table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(home-game) {
	background-color: #007500; /* green */
	color:            #FFFFFF; /* white */
	}

table.mstw-lm-team-schedule_horace-mann-middle-school tbody tr td {
	border-top:       1px solid #FFFFFF; /* white */
	border-bottom:    1px solid #FFFFFF; /* white */
	}
	
table.mstw-lm-team-schedule_horace-mann-middle-school a {
    text-decoration: underline;
}

table.mstw-lm-team-schedule_horace-mann-middle-school a:hover {
    text-decoration: none;
}

table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(away-game) a,
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(away-game) a:hover,
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(away-game) a:visited,
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(away-game) a:active {
    color: #007500; /* green */
}

table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(home-game) a,
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(home-game) a:hover,
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(home-game) a:visited,
table.mstw-lm-team-schedule_horace-mann-middle-school tr:nth-child(home-game) a:active {
    color: #FFFFFF; /* white */
}

Link: http://wpress.kcmsathletics.com/baseball/horace-mann-middle-school-baseball/

[Mark]

nth-child won’t work here. Home and away games aren’t typically ‘nth children’. There could be 3 home games in a row followed by 4 away games. Try just using home-game and away-game in your selectors.

-Mark

[Bryan Shepherd]

Just before you replied I figured it out. I took out the entire tr:nth-child argument and just changed it to .home-game/.away-game.

/*----------------------------------------------
 * Styles for the Horace Mann team schedules
 *----------------------------------------------*/	
table.mstw-lm-team-schedule_horace-mann-middle-school thead tr th {
	background-color: #007500; /* green */
	color:            #FFFFFF; /* white */
	font-weight:      bold;
	border-top:       1px solid #FFFFFF; /* white */
	border-bottom:    1px solid #FFFFFF; /* white */
	}
	
table.mstw-lm-team-schedule_horace-mann-middle-school .away-game {
	background-color: #FFFFFF; /* white */
	color:            #007500; /* green */
	}

table.mstw-lm-team-schedule_horace-mann-middle-school .home-game {
	background-color: #007500; /* green */
	color:            #FFFFFF; /* white */
	}

table.mstw-lm-team-schedule_horace-mann-middle-school tbody tr td {
	border-top:       1px solid #FFFFFF; /* white */
	border-bottom:    1px solid #FFFFFF; /* white */
	}
	
table.mstw-lm-team-schedule_horace-mann-middle-school a {
    text-decoration: underline;
}

table.mstw-lm-team-schedule_horace-mann-middle-school a:hover {
    text-decoration: none;
}

table.mstw-lm-team-schedule_horace-mann-middle-school .away-game a,
table.mstw-lm-team-schedule_horace-mann-middle-school .away-game a:hover,
table.mstw-lm-team-schedule_horace-mann-middle-school .away-game a:visited,
table.mstw-lm-team-schedule_horace-mann-middle-school .away-game a:active {
    color: #007500; /* green */
}

table.mstw-lm-team-schedule_horace-mann-middle-school .home-game a,
table.mstw-lm-team-schedule_horace-mann-middle-school .home-game a:hover,
table.mstw-lm-team-schedule_horace-mann-middle-school .home-game a:visited,
table.mstw-lm-team-schedule_horace-mann-middle-school .home-game a:active {
    color: #FFFFFF; /* white */
}

Result: http://wpress.kcmsathletics.com/baseball/horace-mann-middle-school-baseball/

For those trying to stumble or are new to CSS, I found a great website that will help: https://www.w3schools.com/cssref/default.asp

[Mark]

Good for you! And yes, that is a great website. Seems like I end up there whenever I want to look something up, like nth-child say.

[Adrian Tramutola]

what would your selectors be if you just wanted different colors for odd/even rows?

[Mark]

Look at this code snippet. It’s for team rosters but the same idea works for all the MSTW tables. tr:nth-child(odd)and tr:nth-child(even) are what you’re looking for.

[Author]

Posts