> ## Content Index
> Fetch the complete content index at: https://cetialphafive.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Custom CSS for The Lounge IRC Client
- URL: https://cetialphafive.com/custom-css-for-the-lounge-irc-client/
- Published: 2020-08-23T21:03:42.000Z
- Updated: 2023-04-15T04:38:03.000Z
- Description: Custom CSS to make The Lounge Web IRC client spiffy
- Author: fC
- Tags: irc, nodejs, #Import 2026-07-18 00:18

The Lounge is a pretty sweet web IRC client. You should check it out if you haven't:

[The LoungeThe Lounge is a self-hosted web IRC client for the modern world.The Lounge![](https://thelounge.chat/img/meta_image.png)](https://thelounge.chat/?ref=cetialphafive.com)

![](https://cetialphafive.com/content/images/2020/08/kanye-west-taylor-swift-2009-vmas-billboard-1500x845-1024x577.jpg)

I'm gonna let you finish, but IRC is the best chat program of all time.

The Mininapse theme is my favorite, but it just won't hitting totally right. Luckily, I got two turn tables and a microphone. The following custom CSS for the Lounge in combination with Mininapse got it going like a turbo vette.

```
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i');

* {
        font-family: 'Source Code Pro', monospace;
}

/*fix timestamp width in monospace themes*/
#chat.show-seconds .time, #chat.show-seconds .chat-view[data-type="channel"] .msg.highlight .time {
    width: auto;
}

#chat .content {
	padding-left: 0;

}
#chat .messages {
	display: block;
}
#chat .time {
	display: inline;
}

#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;
}

.messages .from .user:before {
	opacity: 0.5;
	content: "<";
}

.messages .from .user:after {
	opacity: 0.5;
	content: ">";
}

#sidebar .networks {
        width: 180px;
        padding: 10px 0;
        font-size: 10x;
}

#sidebar .network {
	margin-bottom: 10px;
        font-size: 10px;
}

.channel-list-item {
	padding: 2px 15px;
        font-size: 12px;
}

#chat .userlist {
	width: 120px;
        font-size: 12px;
}

#sidebar {
	width: 150px;
}

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

#user-specified-css-input {
	height: 400px;
}

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

```

And boom, bip, bap this is what you get:

![](https://cetialphafive.com/content/images/2020/08/image-5.png)

yaas