Customize The Lounge on-the-fly using CSS

It is sometimes useful to tweak the interface to one’s preferences. To do so without having to roll a full-fledged theme, or fork and maintain an existing theme, The Lounge offers an easy way to apply your own CSS snippets.

Towards the bottom of the Settings page, you will find a Custom Stylesheet field:

Simply add your custom CSS, and the modifications will be applied when clicking outside the field.

Note that The Lounge evolves rather quickly, and new versions often change the existing HTML and CSS files. This causes custom CSS snippets to often require changes as new versions get released. Use your browser’s developer tools when your trying to add or edit custom CSS.

Oops, something has gone wrong

It is not impossible to accidentally apply changes that cannot be reverted, for example by hiding the custom CSS field itself. The Lounge fortunately comes with a failsafe should this unlikely situation occurs.

By loading The Lounge with ?nocss at the end the URL (but before any #xyz fragment), any CSS in the field will be ignored. You can then remove the faulty lines, and reload the page without ?nocss.

Registry of CSS tweaks

Over time, users have come up with useful snippets to customize their experience of The Lounge. While they might be too niche to come up with the application by default, they are listed here in case they are useful to others.

Feel free to edit this page to fix existing snippets, or add other useful ones.

Bigger custom CSS field

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

Change the font

body{font-family:"Comic Sans MS";}

Hide ident and hostmasks

Removes the (~ident@irc.example.com) part from join/part/quit actions.

Hide the sidebar close buttons

The × buttons that appear in the channel list on the currently active channel can sometimes be clicked by accident. This snippet removes it, so that the only way to leave a channel is by clicking “Leave” in the context menu.

#sidebarbutton.close{display:none;}

Thinner channel sidebar

#sidebar{width:180px;}

Thinner user list

#chat.userlist{width:150px;}

Disable IRC styling in messages

This removes all colors, boldness, italics, underline, strikethrough, and monospace font styles that can be embedded in the messages themselves.

Hide link previews in a specific channel

Hide link previews for a specific user

This is useful to silence bots that automatically fetch URL previews, already being fetched by The Lounge’s built-in preview mechanism.

#chat.msg[data-from="MyBot"]div.preview{display:none;}

Hide link previews for specific URLs

div.preview[data-url*="github.com"]{display:none;}

Hide link previews by default for a specific user

This does not fully disable previews but hides them by default (even when link/media auto-expand is enabled) while still allowing to show it manually.
This is useful to silence bots that automatically fetch URL previews, already being fetched by The Lounge’s built-in preview mechanism.

Enlarge images in link previews

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