You are here: Home > Clarity > Popular/requested user changes.

---

A small collection of simple changes that have been requested in the past and don't warrant their own articles.

---

Increase the size of the category/status bar.

With this you can increase the width of the coloured bar that indicates whether the entry is completed, dropped, or so on.

Add this code to the bottom of your CSS, then change the first number (the "2px") to anything you want. The default theme is set to 1, but I have set it to 2 in this code.

/*-S-T-A-R-T--------------------*
| Change Status Bar Width        |
*------------------------------*/

.data.status { width: 2px !important; }
.list-table-data { padding-left: 0px; }

/*------------------------E-N-D-*/

If the bar is beginning to overlap with other content, or if you want a little bit more spacing, increase the second number (after .list-table-data) by however much you wish. I recommend setting it to the width of the status bar (the first number) minus one.

Make sure to not delete the px at the end of the numbers, or it will break the code.

---

Change the banner height.

Add this code to the bottom of your CSS. You may then change the number (the 318px) where it says "Change number here".

/*-S-T-A-R-T--------------------*
| Change Banner Height           |
*------------------------------*/

/*Change number here*/
:root { --banner-height: 318px; }

.cover-block { height: var(--banner-height); }
.header { margin-top: calc(var(--banner-height) - 36px); }
.list-stats { top: calc(var(--banner-height) + 98px); }

/*------------------------E-N-D-*/

---

Add coloured line to header.

Add the code from either of these links to the bottom of your CSS. Pick one, not both.

CODE - Single-colour

CODE - Category-coloured

---

Category-coloured header text.

Add the code from this link to the bottom of your CSS.

CODE