• This area is dedicated to the support of our xF1 add-ons. For xF2, please use the dedicated area: HERE.
  • We are aware that a no permission error was shown when you tried to purchase in the last 2 days, this is now fixed.

Support No Answer Change text colour in bracket generator

CarlM24

New Member
Joined
Jun 1, 2017
Messages
29
Is it possible you can tell me how to change the colour of the text and background for the bracket generator. As you can see in the image below, the text is not clear at all. I would like to change the colour to match my forum's colour scheme.

Screenshot_20171117-072705.png

Thanks

Carl
 

MtoR

Freaky Coder
Staff member
Joined
Nov 14, 2015
Messages
4,459
The css class would be the following:
div.jQBracket .team div.label
 

CarlM24

New Member
Joined
Jun 1, 2017
Messages
29
The css class would be the following:
div.jQBracket .team div.label
Thanks for your help, but which one specifically should I edit to change the colour?

Code:
div.jQBracket {
    position: relative;
}
div.jQBracket.lr {
    margin-left: auto;
    margin-right: auto;
}
div.jQBracket .tools {
    position: absolute;
    top: 0;
    color: #FFF;
}
div.jQBracket .tools span {
    cursor: pointer;
    margin: 5px;
    display: block;
    text-align: center;
    width: 18px;
    height: 18px;
    background-color: #666;
}
div.jQBracket .tools span:hover {
    background-color: #999;
}
div.jQBracket .finals {
    float: right;
    right: 0;
    clear: right;
    position: relative;
}
div.jQBracket .bracket {
    float: right;
    clear: left;
}
div.jQBracket .loserBracket {
    float: right;
    clear: left;
    position: relative;
}
div.jQBracket .round {
    position: relative;
    width: 100px;
    margin-right: 40px;
    float: left;
}
div.jQBracket .match {
    position: relative;
}
div.jQBracket .editable {
    cursor: pointer;
}
div.jQBracket .team {
    position: relative;
    z-index: 1;
    float: left;
    background-color: #EEE;
    width: 100px;
    cursor: default;
}
div.jQBracket .team:first-child {
    border-bottom: 1px solid #999;
}
div.jQBracket .team input {
    font-size: 12px;
    padding: 0;
    width: inherit;
    border: 0;
    margin: 0;
}
div.jQBracket .team div.label {
    padding: 3px;
    position: absolute;
    width: 70px;
    height: 22px;
    white-space: nowrap;
    overflow: hidden;
    color: #1767bc;
}
div.jQBracket .team div.label[disabled] {
    cursor: default;
}
div.jQBracket .team div.score {
    float: right;
    padding: 3px;
    background-color: rgba(255, 255, 255, .3);
    text-align: center;
    width: 20px;
}
div.jQBracket .team div.score[disabled] {
    color: #999;
    cursor: default;
}
div.jQBracket .team div.label input.error, div.jQBracket .team div.score input.error {
    background-color: #FCC;
}
div.jQBracket .team.np {
    background-color: #666;
    color: #EEE;
}
div.jQBracket .team.na {
    background-color: #999;
    color: #CCC;
}
div.jQBracket .team.win {
    color: #333;
}
div.jQBracket .team.win div.score {
    color: #060;
}
div.jQBracket .team.lose div.score {
    color: #900;
}
div.jQBracket .team.lose {
    background-color: #DDD;
    color: #999;
}
div.jQBracket .team.tie div.score {
    color: #00F;
}
div.jQBracket .team.highlightWinner {
    background-color: #DA0;
    color: #000;
}
div.jQBracket .team.highlightLoser {
    background-color: #CCC;
    color: #000;
}
div.jQBracket .team.highlight {
    background-color: #3C0;
    color: #000;
}
div.jQBracket .teamContainer {
    z-index: 1;
    position: relative;
    float: left;
}
div.jQBracket .connector {
    border: 2px solid #666;
    border-left-style: none;
    position: absolute;
    z-index: 1;
}
div.jQBracket .connector div.connector {
    border: 0;
    border-bottom: 2px solid #666;
    height: 0;
    position: absolute;
}
div.jQBracket .connector.highlightWinner, div.jQBracket .connector div.connector.highlightWinner {
    border-color: #DA0;
}
div.jQBracket .connector.highlightLoser, div.jQBracket .connector div.connector.highlightLoser {
    border-color: #CCC;
}
div.jQBracket .connector.highlight, div.jQBracket .connector div.connector.highlight {
    border-color: #0C0;
}
div.jQBracket .np .connector, div.jQBracket .np .connector div.connector {
    border-color: #222;
}
div.jQBracket .bubble {
    height: 22px;
    line-height: 22px;
    width: 30px;
    right: -35px;
    position: absolute;
    text-align: center;
    font-size: 11px;
}
div.jQBracket .bubble.third {
    background-color: #963;
    color: #D95;
}
div.jQBracket .bubble.fourth {
    background-color: #678;
    color: #CCD;
}
div.jQBracket .bubble:after {
    content: "";
    position: absolute;
    top: 6px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
div.jQBracket .bubble:after {
    left: -5px;
    border-left: 0;
}
div.jQBracket .bubble.third:after {
    border-right: 6px solid #963;
}
div.jQBracket .bubble.fourth:after {
    border-right: 6px solid #678;
}
div.jQBracket .highlightWinner .bubble {
    background-color: #DA0;
    color: #960;
}
div.jQBracket .highlightWinner .bubble:after {
    border-right-color: #DA0;
}
div.jQBracket .highlightLoser .bubble {
    background-color: #CCC;
    color: #333;
}
div.jQBracket .highlightLoser .bubble:after {
    border-right-color: #CCC;
}
div.jQBracket.rl .finals {
    float: left;
    left: 0;
    clear: left;
}
div.jQBracket.rl .bracket {
    float: left;
    clear: right;
}
div.jQBracket.rl .loserBracket {
    float: left;
    clear: right;
}
div.jQBracket.rl .round {
    margin-right: 0;
    margin-left: 40px;
    float: right;
}
div.jQBracket.rl .team {
    float: right;
}
div.jQBracket.rl .team div.label {
    right: 0;
}
div.jQBracket.rl .team div.score {
    float: left;
}
div.jQBracket.rl .teamContainer {
    float: right;
}
div.jQBracket.rl .connector {
    border-left-style: solid;
    border-right-style: none;
    border-width: 2px;
}
div.jQBracket.rl .connector.highlightWinner, div.jQBracket.rl .connector div.connector.highlightWinner {
    border-color: #DA0;
}
div.jQBracket.rl .connector.highlightLoser, div.jQBracket.rl .connector div.connector.highlightLoser {
    border-color: #CCC;
}
div.jQBracket.rl .connector.highlight, div.jQBracket.rl .connector div.connector.highlight {
    border-color: #0C0;
}
div.jQBracket.rl .bubble {
    left: -35px;
}
div.jQBracket.rl .bubble.third {
    background-color: #963;
    color: #310;
}
div.jQBracket.rl .bubble.fourth {
    background-color: #678;
    color: #CCD;
}
div.jQBracket.rl .bubble:after {
    left: auto;
    right: -5px;
    border-left: 5px solid transparent;
    border-right: 0;
}
div.jQBracket.rl .bubble.third:after {
    border-right: 0;
    border-left: 6px solid #963;
}
div.jQBracket.rl .bubble.fourth:after {
    border-right: 0;
    border-left: 6px solid #678;
}
div.jQBracket.rl .highlightWinner .bubble:after {
    border-left-color: #DA0;
}
div.jQBracket.rl .highlightLoser .bubble:after {
    border-left-color: #CCC;
}
 

MtoR

Freaky Coder
Staff member
Joined
Nov 14, 2015
Messages
4,459
As stated, this one:
Code:
div.jQBracket .team div.label {
   padding: 3px;
   position: absolute;
   width: 70px;
   height: 22px;
   white-space: nowrap;
   overflow: hidden;
   color: #1767bc;
}
 

CarlM24

New Member
Joined
Jun 1, 2017
Messages
29
Sorry for the delayed response.

I added "color: #1767bc;" to this orginally, but it did not change the colour of the text. I added "background-color: blue;" and this works but it doesn't look right (see screenshot below). Are you sure this is the right template to change the color of the text?

XFA.png

Regards,
Carl
 

MtoR

Freaky Coder
Staff member
Joined
Nov 14, 2015
Messages
4,459
I am almost sure, though I haven't experienced it.

The better way for you would be to inspect the DOM using the browser tools and find out the best location for the modification.

Clément