Getting started

The class names and IDs that we use are relatively stable. However, while we always aim to minimize disruption, it is possible — due to new features or bugfixes, for example — that we have to change HTML in ways that require updating your CSS.

We recommend using your browser's built-in development tools to assist you in finding the names of elements and classes to edit. Generally, you can right-click on an element in your Cbox, and select "Inspect".

In the new version of Cbox, the CSS you enter in your editor is appended to the base CSS. This means you do not have to copy any classes or properties that you are not editing. For example, to make avatars round, simply use:

.pic {
border-radius: 50%;
}

Notice that the other properties, such as width and height, are not affected by this CSS. Any properties that are bound to the basic theme editor can still be edited that way. We strongly recommend this approach — rather than copying the base CSS and then editing it — for both performance and maintainability reasons.

More examples

By default a star icon appears after mod/admin names. You can change or remove that:

You can take advantage of CSS's cascading nature to target different rules at the same element in different contexts. For example, to show rounded avatars in the users list, but hide them completely in messages, you could use a pair of rules:

.msg .pic {
display: none;
}
.usr .pic {
border-radius: 50%;
}

To change or remove the maximum height that Cbox restricts your emoticons to, you can use a rule like this:

.msg .emote {
max-height: none;
}

The following rule makes message background colours alternate:

.msg:nth-of-type(2n) {
background: #03A9F4;
}

With CSS you can influence browser functionality as well. The following CSS prevents users from being able to select text in messages:

.msg {
user-select: none;
}

Custom classes

You can define your own classes to be used in conjunction with filters. Filters support boxcode, so you can apply colour that way. But for more flexibility, there's a special [class] boxcode that lets you use any CSS you want.

For example, this CSS rule targets a class called cc_glow.

.cc_glow {
text-shadow: 0px 0px 3px #E91E63;
font-size: 120%;
}

With the above CSS, the corresponding boxcode is [class=glow][/class].

With both the CSS and the filtering rule in place, simply typing hello in your Cbox should show glowing text.

You can also override existing boxcode rather than defining your own classes:

.msg .body s {
text-decoration: none;
opacity: 0.5;
}

The above modifies the [s][/s] boxcode which would normally produce a strikethrough. Instead it will produce translucent text. The .msg .body selectors are there to ensure only markup in messages is targeted.

Specificity

Sometimes you might find your edits don't appear to be overriding Cbox's base CSS. This can be due to CSS Specificity rules. You may need to add specificity by including more parts in your selectors. For example, to change the colour of the smilies/emoticons button, you can use:

form#frmMain button#btnSmilies {
color: red;
}

Notice that while the form#frmMain part might seem redundant, it increases specificity sufficiently to override Cbox's base CSS. Alternatively, you can use the !important rule to achieve the same outcome.

While !important can make customization easier, we don't recommend using it, as it increases the likelihood of unintended side-effects.