My custom.css to fix some stuff and add some minor features (all commented)


/* Remove underlay (in cases you don't use a wallpaper in the background */
.underlay {
  opacity: 0;

/* This removes the placeholder in the post text box*/
.form-post-body::placeholder {
  opacity: 0;

/* adjustments for the scope buttons */
.ScopeSelector .scope {
  margin-right: 0 !important;
.ScopeSelector {
  font-size: smaller;
  margin-right: auto;
.button-unstyled {
  font-size: 1em !important;
.post-status-form .form-bottom {
  height: 1.5em !important;
.post-status-form .media-upload-icon, .post-status-form .poll-icon, .post-status-form .emoji-icon {
  font-size: 1.2em !important;
.post-status-form .form-bottom-left {
  margin-right: 74px !important;
  max-width: 6em !important;

/* Language selector */
/* removes all language from the dropdown*/
label#post-language > select > option
  display: none;
/* Choose which languages you wanna see in the selector*/
[value="en"], [value="pt"], [value="es"] {
  display: unset !important;
.language-selector {
  padding-right: 0.5em !important;
.edit-form-modal-panel > * > * > * > .visibility-tray {
  justify-content: end !important;
label.Select select {
  padding: 0 1.5em 0 0.4em !important;

/* Reduce the custom to 16px emoji size*/
.emoji {
  --_still_image-label-scale: 0.5;
  --emoji-size: 16px !important;
/* Set the reaction emoji size, on the notification panel, to the same size of the emoji everywhere else */
.notification-reaction-emoji {
  width: var(--emoji-size) !important;
/* avoid clipping the enlarged emoji */
p:has(> .emoji):hover, .content:hover {
  overflow: visible !important;
/* enlarge emoji on mouse hover*/
.emoji:hover {
  transform: scale(3) !important;
  transition: 0.5s !important;
  z-index: 1000 !important;
  vertical-align: top !important;
  cursor: none;
/* set unicode emoji to regular size*/
  font-size: 100% !important;
.emoji-reaction .reaction-emoji {
  max-height: 1em !important;
  margin-right: 0.5em !important;
/* fix instance panel padding and margins (using the same values as in the other panels), this requires adding the class 'instance-panel' to the parent element in 'panel.html'  */
  padding: 0 1em 1em 1em;
/* remove duplicate of the instace panel*/
.column-inner > .instance-specific-panel {
  display: none;
/* remove staff panel*/
.staff-panel {
  display: none;

/* Terms of Service panel this requires adding the class 'tos' to the parent element and adding the title (as shown in my example)  in 'terms-of-service.html' */
.column-inner .panel-body {
  display: table;
.tos-content {
  display: table-footer-group;;
.tos-header {
  display: table-header-group;
  padding: 0 1em 1em 1em;
.tos {
  margin: 1em


<div class="panel-heading timeline-heading base02-background"><div class="title">Instance</div></div>
<div class="instance-panel">
<h2>Welcome to <a href="" target="_blank">Akkoma</a>!</h2>

<li><a href="/">Akkoma</a></li>
<li><a href="/web/">Mastodon</a></li>
<li><a href="/akkoma/swaggerui/">API</a></li>
<li><a href="/akkoma/frontend/">FE Picker</a></li>

<h3><a href="/about">About</a> this instance.</h3>


<div class="panel-heading timeline-heading base02-background tos-header"><div class="title">Terms of Service</div></div>
<div class="tos">
<h1>Welcome to 'your instance'</h1>
<h3>Our guidelines</h3>
<li>Hate speech is <u>not</u> tolerated.</li>
<li>Lewd or violent content is always tagged as sensitive.</li>
<li>No restrictions on Subjects/Content Warnings.</li>
<li>No restrictions on the scopes.</li>
<li>No spamming nor any behavior that bother others.</li>
<li>No bots.</li>
<li>No promotional content.</li>
<h3>Registrations are open/closed.</h3>

What it looks like:


Thanks for this, this is fantastically useful. I’ve only implemented the language selector so far, but it is such a blessing to not having to scroll through all the languages on earth every time I need to post in one of my two languages!

I shall have a look at your other snippets too, they also look useful.

Thanks! :grinning: