Custom styling that adds avatars to clubhouse

clubhouse-stylish.css

/* Yes, I'm going to CSS hell! Install stylish browser extension then add this for clubhouse.io */
/* We don't find story and user ID useful so hide them */

.bucket-content .story-id,
.project-name {
    display: none;
}
/* Font size 0 needed to hide forward separator between owners */

.bucket-content .story-summary {
    overflow: hidden;
    font-size: 0;
}
.bucket-content .owner {
    border-radius: 20px;
    height: 30px;
    width: 30px;
    font-size: 0;
    display: block;
    background-size: cover;
    background-color: red;
    float: left;
    margin: 0 4px 0 0;
}
.bucket-content .tag {
    margin: 5px 4px 0 0;
}
/* Increase font sizes and hide stuff we don't need full screen - standup mode */

.fullscreen .story-summary .epic-tag {
    font-size: 14px;
    line-height: 16px;
}
body.fullscreen .story-summary .summary-title {
    font-size: 24px;
    line-height: 28px;
}
.fullscreen .bucket-content .owner {
    height: 48px;
    width: 48px;
    border-radius: 48px;
}
.fullscreen .tag {
    display: none;
}
/* To add more users you just need to find out their data-id*/
/* Tom H */

.bucket-content .owner[data-id="57d274fa-7304-46bf-a300-d5c4caf13d48"] {
    background-image: url(https://www.geckoboard.com/assets/img/tomh.jpg);
}
/* Jon */

.bucket-content .owner[data-id="57c7f4b1-f2a7-4aee-8bdb-6e244da918da"] {
    background-image: url(https://www.geckoboard.com/assets/img/jon.jpg);
}
/* Vivien */

.bucket-content .owner[data-id="57d29bc5-9d9f-4917-a2ec-31793016dc30"] {
    background-image: url(https://www.gravatar.com/avatar/06dd439fa7a483234935e6cc20839530.jpg?s=48&d=identicon);
}
/* Thomas */

.bucket-content .owner[data-id="57d7138a-c69b-45e6-8d76-3e80c2f191a8"] {
    background-image: url(https://www.geckoboard.com/assets/img/thomas.jpg);
}
/* Karl */

.bucket-content .owner[data-id="57ce82e9-4d2b-47e1-84b2-ae54841eeba5"] {
    background-image: url(https://www.geckoboard.com/assets/img/karl.jpg);
}
/* Klara */

.bucket-content .owner[data-id="57c9a5e1-811a-4932-ba63-4351a1ce9a03"] {
    background-image: url(https://www.geckoboard.com/assets/img/klara.jpg);
}
/* Daniel */

.bucket-content .owner[data-id="57d2925d-3a25-48c6-b216-de5f2562f683"] {
    background-image: url(https://www.geckoboard.com/assets/img/daniel.jpg);
}
/* Liggi */

.bucket-content .owner[data-id="57d29b3d-2f2d-44ce-a0a3-d875c105f8d9"] {
    background-image: url(https://www.geckoboard.com/assets/img/liggi.jpg);
}
/* TomR */

.bucket-content .owner[data-id="57c7ea2a-16ec-4b9f-a020-5fe2a6c9ed6b"] {
    background-image: url(https://www.geckoboard.com/assets/img/tomr.jpg);
}
/* Jack */

.bucket-content .owner[data-id="57c99c79-2c3b-4973-a9fb-107be5900d62"] {
    background-image: url(https://www.geckoboard.com/assets/img/jack.jpg);
}
/* Achilleas */

.bucket-content .owner[data-id="57d2de72-8eae-475a-9068-30c62e4b6540"] {
    background-image: url(https://www.geckoboard.com/assets/img/achilleas.jpg);
}
/* Pete */

.bucket-content .owner[data-id="57d6bdec-088e-4e63-9d46-1f54c741b917"] {
    background-image: url(https://www.geckoboard.com/assets/img/pete.jpg);
}
/* Matt */

.bucket-content .owner[data-id="57d277b2-5d2d-48ac-a41a-d710f1425739"] {
    background-image: url(https://www.geckoboard.com/assets/img/matt.jpg);
}
/* Romain */

.bucket-content .owner[data-id="57d66915-acd7-42f3-9e61-3f9453cf20be"] {
    background-image: url(https://www.geckoboard.com/assets/img/romain.jpg);
}
/* Leo */

.bucket-content .owner[data-id="57cd81df-e6d1-478c-9c8b-38cb705d3478"] {
    background-image: url(https://www.geckoboard.com/assets/img/leo.jpg);
}
/* Carl */

.bucket-content .owner[data-id="57d94102-f973-4a91-bfcd-4ecec64f56bb"] {
    background-image: url(https://www.geckoboard.com/assets/img/carl.jpg);
}
/* Jason */

.bucket-content .owner[data-id="57d33e50-e132-4b2b-ac83-88658078d31a"] {
    background-image: url(https://www.geckoboard.com/assets/img/jason.jpg);
}