What's new
Xen Factory

Register today to become a member! Once signed in, you'll be able to start purchasing our products, ask questions, request support and suggest new ideas!

  • This area is dedicated to the support of our xF1 add-ons. For xF2, please use the dedicated area: HERE.

Support No Answer Change text colour in bracket generator

C

CarlM24

New Member
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 said:
The css class would be the following:
div.jQBracket .team div.label
Click to expand...
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;
}
 
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;
}
 
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
 
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
 
You must log in or register to reply here.
Top