Hola,

i thought to create a thread related to user-developed custom stylesheet(s) for Lounge IRC.

I’ll include mine below this text for an original reference.

I came up with the custom coding after searching the web and messing about for thirty minutes this morning. Also bothered Squishy a few times :-p... I may add/modify elements in the future but this is what I came up with initially.

textarea#user-specified-css-input {font-size: 7px;}

body {font-family: "Palatino";}

#sidebar .channel {
    padding: 1px 7px;
}

#sidebar .channel {
    margin-bottom: 5px;
}

#sidebar {
    width: 180px;
}

.channel-list-item {
    padding: 1px 0;
}
.close-tooltip {
display: none;
}

#chat .msg[data-type="message"] .from .user::before {
    content: "<";
}
#chat .msg[data-type="message"] .from .user::after {
    content: ">";
}

#chat .content {
    padding-left: 0;
}
#chat .messages {
    display: block;
}
#chat .time {
    display: inline;
}
#chat .from,
#chat .text {
    background: none;
    border: 0;
    display: inline;
}
#chat .from {
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-mask-image: none;
    mask-image: none;
}
#chat .userlist {
    width: 125px;
}

#chat .self .content {
    color: lightgrey;
}

#chat .content span[class*="irc-"] {
    color: inherit;
    background-color: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    text-decoration: inherit;
}

#chat .time,
#chat .from,
#chat .content {
    padding-top: 1px;
    padding-bottom: 1px;
}

#chat .toggle-content .thumb {
    max-width: 200px;
    max-height: 200px;
}
#chat .toggle-text {
    /* Larger images means that there is more than one line of space available for
    the description, so it can wrap to multiple lines */
    white-space: initial;
}
#chat .msg[data-type="action"] .from::before,
#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="action"] .user {
    font-style: italic;
}

As useful as this is can a screenshot be shared to show what the difference is? 

Cool feature to have in lounge 

this is cool!

Custom Stylesheet v2 (Lounge IRC)

/* =========================================
   COMPACT + VIVID IRC / THE LOUNGE THEME
   ========================================= */

:root {
    --irc-text: #e2e6ea;
    --irc-muted: #7f8994;
    --irc-separator: #9aa7b4;
    --irc-self: #c5ccd3;
    --irc-system: #8fa3b7;
    --irc-action: #c49be8;
    --irc-highlight: #ffd166;
    --irc-hover: rgba(255, 255, 255, 0.035);
}

/* ---------- CUSTOM CSS EDITOR ---------- */

textarea#user-specified-css-input {
    font-size: 0.5rem;
}

/* ---------- GLOBAL ---------- */

body {
    font-family: "Verdana-bold", Verdana, Geneva, Arial, sans-serif;
}

/* ---------- SIDEBAR ---------- */

#sidebar {
    width: 180px;
}

#sidebar .channel {
    padding: 1px 7px;
    margin-bottom: 3px;
}

.channel-list-item {
    padding: 1px 0;
}

/* ---------- CHAT TYPOGRAPHY ---------- */

#chat {
    font-size: 0.6875rem; /* ~11px */
    line-height: 1.3;
    color: var(--irc-text);
}

/* ---------- MESSAGE ROW ---------- */

#chat .msg {
    margin: 0;
    min-height: 0;
}

#chat .msg:hover {
    background: var(--irc-hover);
}

/* ---------- TIMESTAMP ---------- */

#chat .time,
.timestamp {
    display: inline;
    font-size: 0.9em;
    color: var(--irc-muted);
}

/* Example: 14:37:  |  <Nick> */
#chat .time::after {
    content: ":\00a0\00a0|\00a0\00a0";
    color: var(--irc-separator);
}

/* ---------- CLASSIC IRC NICK FORMAT ---------- */

#chat .msg[data-type="message"] .from .user::before {
    content: "<";
}

#chat .msg[data-type="message"] .from .user::after {
    content: ">";
}

/* ---------- NICKNAMES ---------- */

#chat .from .user,
.nick {
    font-size: 1em;
    font-weight: 600;
}

/* ---------- MESSAGE LAYOUT ---------- */

#chat .messages {
    display: block;
}

#chat .from,
#chat .text {
    display: inline;
    background: none;
    border: 0;
}

#chat .from {
    width: auto;
    padding-left: 0;
    padding-right: 4px;

    -webkit-mask-image: none;
    mask-image: none;
}

#chat .content {
    padding-left: 0;
}

/* Compact vertical spacing */

#chat .time,
#chat .from,
#chat .content {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* ---------- USER LIST ---------- */

#chat .userlist {
    width: 125px;
}

/* ---------- YOUR OWN MESSAGES ---------- */

#chat .self .content {
    color: var(--irc-self);
}

/* ---------- IRC FORMATTING ---------- */

/*
   Preserve IRC foreground colors and text styling.
   Do NOT force color: inherit here, or IRC colors disappear.
*/

#chat .content span[class*="irc-"] {
    font-family: inherit;
}

/* ---------- ACTIONS /me ---------- */

#chat .msg[data-type="action"] .from::before,
#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="action"] .user {
    font-style: italic;
    color: var(--irc-action);
}

/* ---------- SYSTEM / STATUS MESSAGES ---------- */

#chat .msg[data-type="join"] .content,
#chat .msg[data-type="part"] .content,
#chat .msg[data-type="quit"] .content,
#chat .msg[data-type="nick"] .content {
    color: var(--irc-system);
}

/* ---------- HIGHLIGHTS / MENTIONS ---------- */

#chat .highlight .content,
#chat .msg.highlight .content {
    color: var(--irc-highlight);
}

/* ---------- IMAGE PREVIEWS ---------- */

#chat .toggle-content .thumb {
    max-width: 200px;
    max-height: 200px;
}

#chat .toggle-text {
    white-space: initial;
}

/* ---------- TOOLTIP ---------- */

.close-tooltip {
    display: none;
}

To remove the bold font replace with the following code snippet below "GLOBAL" section:

body {
    font-family: "Verdana", Verdana, Geneva, Arial, sans-serif;
}

/* =========================================
   COMPACT + VIVID IRC / THE LOUNGE THEME
   ========================================= */

:root {
    --irc-text: #e2e6ea;
    --irc-muted: #7f8994;
    --irc-self: #c5ccd3;
    --irc-system: #8fa3b7;
    --irc-action: #c49be8;
    --irc-highlight: #ffd166;
    --irc-hover: rgba(255, 255, 255, 0.035);
}

/* ---------- CUSTOM CSS EDITOR ---------- */

textarea#user-specified-css-input {
    font-size: 0.5rem;
}

/* ---------- GLOBAL ---------- */

body {
    font-family: "Verdana-bold";
}

/* ---------- SIDEBAR ---------- */

#sidebar {
    width: 180px;
}

#sidebar .channel {
    padding: 1px 7px;
    margin-bottom: 3px;
}

.channel-list-item {
    padding: 1px 0;
}

/* ---------- CHAT TYPOGRAPHY ---------- */

#chat {
    font-size: 0.6875rem; /* ~11px */
    line-height: 1.3;
    color: var(--irc-text);
}

/* ---------- MESSAGE ROWS ---------- */

#chat .messages {
    display: block;
}

#chat .msg {
    margin: 0;
    min-height: 0;
}

#chat .msg:hover {
    background: var(--irc-hover);
}

/* ---------- TIMESTAMP ---------- */

#chat .time,
.timestamp {
    display: inline;
    font-size: 0.9em;
    color: var(--irc-muted);
}

/* ---------- REMOVE TIMESTAMP COLON ---------- */

/*
   Explicitly suppress any colon or separator
   generated after the timestamp.
*/

#chat .time::after,
.timestamp::after {
    content: none !important;
    display: none !important;
}

/* ---------- REMOVE OLD FROM SEPARATOR ---------- */

#chat .msg[data-type="message"] .from::before {
    content: none !important;
}

/* ---------- ROLE-COLORED BAR + NICKNAME ---------- */

/*
   Intended appearance:

   14:37  |  <Nickname> Message

   The | and brackets inherit the same color
   as the nickname / IRC role color.
*/

#chat .msg[data-type="message"] .from .user::before {
    content: "|  <";
}

#chat .msg[data-type="message"] .from .user::after {
    content: ">";
}

/* ---------- NICKNAMES ---------- */

#chat .from .user,
.nick {
    font-size: 1em;
    font-weight: 600;
}

/* ---------- MESSAGE LAYOUT ---------- */

#chat .time {
    display: inline;
}

#chat .from,
#chat .text {
    display: inline;
    background: none;
    border: 0;
}

#chat .from {
    width: auto;

    /* Space between timestamp and role-colored bar */
    padding-left: 0.5em;
    padding-right: 4px;

    -webkit-mask-image: none;
    mask-image: none;
}

#chat .content {
    padding-left: 0;
}

/* ---------- COMPACT VERTICAL SPACING ---------- */

#chat .time,
#chat .from,
#chat .content {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* ---------- USER LIST ---------- */

#chat .userlist {
    width: 125px;
}

/* ---------- YOUR OWN MESSAGES ---------- */

#chat .self .content {
    color: var(--irc-self);
}

/* ---------- IRC FORMATTING ---------- */

/*
   Preserve native IRC foreground colors and formatting.
   This allows nickname / IRC colors to remain vivid.
*/

#chat .content span[class*="irc-"] {
    font-family: inherit;
}

/* ---------- /ME ACTIONS ---------- */

#chat .msg[data-type="action"] .from,
#chat .msg[data-type="action"] .content,
#chat .msg[data-type="action"] .user {
    font-style: italic;
    color: var(--irc-action);
}

/* ---------- SYSTEM / STATUS MESSAGES ---------- */

#chat .msg[data-type="join"] .content,
#chat .msg[data-type="part"] .content,
#chat .msg[data-type="quit"] .content,
#chat .msg[data-type="nick"] .content {
    color: var(--irc-system);
}

/* ---------- HIGHLIGHTS / MENTIONS ---------- */

#chat .highlight .content,
#chat .msg.highlight .content {
    color: var(--irc-highlight);
}

/* ---------- IMAGE PREVIEWS ---------- */

#chat .toggle-content .thumb {
    max-width: 200px;
    max-height: 200px;
}

#chat .toggle-text {
    white-space: initial;
}

/* ---------- TOOLTIP ---------- */

.close-tooltip {
    display: none;
}

For the code provided above, the font is no longer bold. And, the posted version explicitly removes any colon generated after the timestamp and moves the divider into the nickname area so the vertical bar inherits the user’s role/name color. It also preserves "The Lounge’s" native role symbol instead of overwriting it.

Replace the following to remove bold.

font-family: "Verdana-bold";

Instead copy and paste:

    font-family: "Verdana";