Here is a walk-through of how you can leverage the CSS Override feature to highly customize your brackets. This CSS below is what this bracket is using to make it look and feel different from our default CSS: https://showcase.votion.co/bracket/372f2fe6-1c7f-11e7-a157-029f9751820b
Every element of our app has a CLASS or ID so with CSS you can restyle or hide any component of the page. This sample CSS file should give you some examples of what can be done.
@import url(‘https://fonts.googleapis.com/css?family=Oswald’);
.Countdown, .PrimaryInstruction, .ProgressIndicator, .NavBar, .Pagination,
.BirdsEyeView-columns-name-line, .Matchups-round-name, .Matchup-infoContainer, .Matchup .Matchup-competitor-name a,
.MatchupDetails-competitorNum, .Modal-header, .MatchupDetails-name, .LoginButton {
font-family: ‘Oswald’, sans-serif;
text-transform: uppercase;
}
.MatchupDetails-competitorNum {
color: #da2128;
}
.MatchupDetails-divider {
border-bottom-width: 2px;
}
.ProgressIndicator {
background-color: #da2128;
color: white;
}
.Matchups-round-name {
text-align: center;
color: #00295B;
font-size: 20px;
}
.Pagination a {
background-color: #00295B;
fill: white;
color: white;
padding: 8px 10px;
}
.Matchup .Matchup-infoContainer {
color: #da2128;
}
.Matchup .Matchup-competitor-name a {
color: #da2128;;
}
.Matchup .Matchup-competitor-name a .Icon.var-sm svg {
fill: #da2128;
}
.Matchup-content {
border: 2px solid #da2128;
}
.Button {
background-color: #00295B;
}
.Matchup .Matchup-voteBar-voteButton {
background-color: #00295B;
border-color: #00295B;
}
.Matchup-voteBar-voteButton .Icon.var-lg svg {
fill: white;
}
.Matchup-voteBar-voteButton:hover .Icon.var-lg svg {
fill: #00295B;
}
.Header .Header-logo img {
max-width: none;
padding: 0;
}
.NavBar {
border-bottom: 4px solid #00295B;
}
.NavBar a {
padding: 6px 15px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: #00295B;
border: 1px solid #00295B;
border-bottom: 0;
}
.NavBar a.is-active {
color: white;
background: #00295B;
}
.PrimaryInstruction.is-visible {
color: white;
background: #00295B;
font-family: ‘Oswald’, sans-serif;
text-transform: uppercase;
}
.Prose p {
line-height: 1.4;
}
.BirdsEyeView .BirdsEyeView-matchup-line-bottom, .BirdsEyeView .BirdsEyeView-matchup-line-top,
.BirdsEyeView .BirdsEyeView-matchup-line-bottom:before, .BirdsEyeView .BirdsEyeView-matchup-line-top:before,
.BirdsEyeView .BirdsEyeView-region-name {
border-color: #da2128;
color: #da2128;
}
.Description {min-height:0px;padding:0px;}