21 CSS Customizations

Fastidious edited this page 2024-03-15 11:55:21 -04:00

Table of Contents

• Change global font
• More spacious theme
• Disable readmarker
• Suppress repeated prefix
• Suppress hiding of buffer list in mobile layout
• Hide/Remove "Show <Item>" Button
• Larger input bar
• Firefox: no break in the middle of words
• Move bufferlist (sidebar) to the right
• Prevent backticks from formatting text as code
• Ellipse long nicknames

This is a list of some popular CSS customizations for Glowing Bear. You can use them by copying and pasting them into the "Custom CSS" box in the settings.

Change global font

If you want to use the excellent Lato font everywhere, add

@import url('https://fonts.googleapis.com/css?family=Lato');

body { font-family: 'Lato', sans-serif; }

More spacious theme

To increase spacing, use

tr.bufferline { line-height: 1.4; }

Disable readmarker

If you don't like the readmarker, kill it with

#readmarker { display:none; }

Suppress repeated prefix

When there are several contiguous messages from the same user, this replaces the username with a ↪ on all but the first [ source ]

.repeated-prefix span {
    position: relative;
    left: -1000px;
}

.repeated-prefix span.hidden-bracket {
    position: absolute;
    left: -1000px;
}

.repeated-prefix span:nth-last-of-type(2):after {
    content:"↪";
    position: relative;
    left: 1000px;
}

.repeated-prefix span.highlight {
    position: initial;
    left: initial;
}

.repeated-prefix span.hidden-bracket:after,
.repeated-prefix span.highlight:after {
    content: initial;
    position: initial;
    left: initial;
}

Suppress hiding of buffer list in mobile layout

If you use Glowing Bear in a narrow window on the desktop, you may end up with the mobile layout. If you want to keep the buffer list visible, this works: [ source ]

#sidebar[data-state=hidden] {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}

.content[sidebar-state=hidden] #bufferlines,
.content[sidebar-state=hidden] .footer {
    margin-left: 200px;
}

Hide/Remove "Show <Item>" Button

If you never want to have the option to open an embedded item, you can disable it with:

#bufferlines .btn {visibility: hidden; height: 0px;}

Larger input bar

If you need more space to type, enlarge the input bar. The values here provides space for about 3 lines with the default settings. Replace 60px by a value of your choosing to customize further.

#sendMessage {
    height: 60px;
    padding-top: 1px;
    padding-bottom: 1px;
}
#bufferlines {
    padding-top: 60px; /* topbar */
    bottom: 60px;      /* input bar */
}
.footer {
    height: 60px;
}

Firefox: no break in the middle of words

Firefox has trouble with breaking words correctly and will break in the middle of the word. If you want to avoid this at the cost of rarely having a horizontal scroll bar, this is how to do it.

td.message {
    word-break: normal;
}

Move bufferlist (sidebar) to the right

This one is just a quick hack and could likely benefit from improvement. It's only tested on the desktop layout.

#sidebar, #sidebar[data-state=visible]
  { left:inherit; right: 0px !important; }
.content #bufferlines,
.content[sidebar-state="visible"] #bufferlines
  { margin-left: 0px!important; margin-right: 300px !important; }
#nicklist { right: 200px; }
#topbar .title { left: 110px !important; }
.content[sidebar-state=visible] .footer
  { margin-right: 300px !important; padding-left: 0px}
@media(min-width: 1400px) {
  .content[sidebar-state="visible"] #bufferlines,
  .content[sidebar-state=visible] .footer
  { margin-right: 345px!important; }
}

Prevent backticks from formatting text as code

This will make code blocks created by backticks appear identical to the plain text equivalent.

.message .hidden-bracket {
  position: static;
}

code {
  padding: 0px;
  border: none;
  font-size: 100%;
  font-family: inherit;
  color: inherit;
  background-color: inherit;
}

Ellipse long nicknames

This will ellipse nicknames long enough to overflow:

#nicklist li,
#nicklist a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}