Welcome to XenForo Nulled Community

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

Better Checkboxes (Now with radios!)

Admin

Administrator
Administrative
Joined
Feb 18, 2019
Messages
2,119
Reputation
4,330
Points
113
Overview

This simple CSS insert adds a nice subtle UI tweak for your checkboxes. First, we'll fade out unchecked boxes and labels to a softer color, helping to give them a "deactivated" appearance. Next, we highlight the checkbox color when hovering over an option. When a box is checked, we'll change the label color back to normal giving it an "on" appearance. We'll apply fade transitions using the @xf-baseAnimationSpeed value, then optionally set the pointer cursor and checked icon weight (outline vs solid).
better-checkboxes-sample.gif
** The checkboxes do change color on hover, though it is hard to see in this gif^

CSS snippet

Drop this into your extra.less template:
CSS:
/* Better Checkboxes */

// Edit these values

@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

@controlLabelColor: @xf-textColorMuted;
@controlLabelColor--active: @xf-textColor;

@controlCheckedWeight: bold; // normal for outline, bold for solid
@cursor: pointer;

// From core_input.less
.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra
{
    .iconic,
    &.dataList-cell--fa > a
    {
        > i
        {
            color: @controlColor;
        }

        &:hover > i
        {
            color: @controlColor--hover;
        }
    }
}

// Don't apply to off-canvas controls
.formRow .iconic > input[type=checkbox],
.formRow .iconic > input[type=radio] {

    + i:before,
    + i:after {
        transition: @xf-animationSpeed opacity;
    }
    + i:after {
        font-weight: @controlCheckedWeight;
    }
    ~ * {
        transition: @xf-animationSpeed color;
    }
    ~ span.iconic-label {
        color: @controlLabelColor;
    }
    &:checked ~ span.iconic-label {
        color: @controlLabelColor--active;
    }
    &:checked + i {
        color: @controlColor--hover;
    }
}

// Change the cursor
.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra,
.structItem-extraInfo
{
    .iconic:hover {
        cursor: @cursor;
    }
}
Editing the values

You only need the edit the following lines if needed, but the default values should work great on their own:
Code:
@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

@controlLabelColor: @xf-textColorMuted;
@controlLabelColor--active: @xf-textColor;

@controlCheckedWeight: bold; // normal for outline, bold for solid
@cursor: pointer;
The @controlColors set the color of checkbox icons (note that @controlColor--hover is also used for the checked state). The @controlLabelColors affect the label text when a box is checked or unchecked. Finally, you can make checked boxes solid by using 'bold', and change the cursor pointer.

A few notes

While this is somewhat expanded to make beginner-friendly edits, you could optimize this with CSS knowledge. Further, since this is being dropped into extra.less, the @control variables don't override those in core_input.less - so we need to duplicate some code from that template :whistle:. This could be avoided via an addon with Template Modifications. For the Less parent selector, we use the input[type="checkbox] in order to declare easy sibling combinators.
 
shape1
shape2
shape3
shape4
shape7
shape8
Top