Skip to content
Interactive Prediction & Voting Brackets by Votion Logo
  • Home
  • Brackets
    • Prediction, Voting & Live Mode Brackets
    • NCAA Brackets
    • World Cup Brackets – Group selection, Prediction & Leaderboard
  • Polls
  • Resources
    • Blog
    • FAQs
    • Case Studies
    • Quick Start Bracket
    • About
  • Demos & Campaigns
    • Voting Bracket Demo
    • Prediction Bracket Demo
    • Poll Demo
  • Sign Up
Previous

Bracket CSS Overrides

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.

The CSS overrides look like this:

@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;}

Related

By Votion Blog|2019-03-19T13:18:56+00:00March 19th, 2019|Comments Off on Bracket CSS Overrides

Please help spread the word about Votion!

FacebookTwitterLinkedInRedditPinterestVkEmail
© 2021 Votion, Inc. | Contact Us