How to change the layout of the columns?

Hello everyone,

I’m trying to customize the timeline, so I can show the local timeline at the beginning and also turn it into a one column layout, instead of having 4 columns.
I can’t find a way of doing it form the settings, but there’s a log of post saying you can pick and choose the order of the timeline, and all that, but nowhere shows how.

thanks for the help!

Mastodon is notoriously difficult to re-style. The only thing that’s made easy (or, indeed, officially explicitly allowed) is changing the CSS. I’ve seen browser CSS hacks that change the layout to a single column, but I’ve been unable to make that work for my instance. If you can pull that off, please do tell me how you did it.

There’s also projects like Halcyon, which is a complete replacement for the Mastodon UI, but it’s increasingly out of date and requires the use of tokens to sign in, as it behaves like an app, rather than a native Mastodon interface.

Yes, actually I was able to change it to one column.
It’s all CSS.

This is what helped me a lot, I followed a lot of that code to make it look how I wanted.

1 Like

I’ve used el-jefe’s (thank you btw!) to make, slightly modified as the base settings will break on most laptops, user testing got me to this:

@media (min-width: 1024px) {
    .tabs-bar {display: flex;
    width: 585px;
    margin-left: calc(25% + 155px);
    z-index: 1;

  .tabs-bar > a:nth-child(5) {display: none;}

    width: calc(50% + 300px);
    margin: -60px auto auto;

  .column {display: none;}

    display: flex;
    min-width: 600px;
    margin-top: 55px;

.ui {background-image: url("") !important;}
.text-btn {display: none;}

.drawer__header {
  height: 110px;
  background-image: url("") !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;

.drawer__header a:hover {opacity: 0.90; background:#eceff1;}

.column-header {background:#8e8d8a; color:#eae7dc;} 

.tabs-bar, .drawer__header, .search__input, .column-header__back-button, .column-header__button, .landing-page #mastodon-timeline, .landing-page__forms, .landing-page__information {
    background: #eceff1;

.flex-spacer, .getting-started, .getting-started__wrapper, .column-link__badge, .column-subheading {
    background: #f6f6f6;
.column-link {background: #fff; color: #7e685a;}
.column-header__back-button, .column-header__button {background: #8e8d8a; color: #eae7dc;}
.column-header__back-button:hover {
    text-decoration: none;
    color: #fff;
.column-link:hover, .button.button-alternative-2 {background: #e7717d; color: #fff;}
.column-header__button:hover {color: #fff;}

.tabs-bar__link {
    color: #8e8d8a;
    border-bottom: 2px solid #e7717d;
} {
    border-bottom: 2px solid #e7717d; color: #e85a4f;

.button, .tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover, .simple_form .block-button, .simple_form .button, .simple_form button, .button.button-alternative {
    background: #e7717d; color: #fff;

.button:hover, .simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover, .button.button-alternative-2:active, .button.button-alternative-2:focus, .button.button-alternative-2:hover, .button.button-alternative:active, .button.button-alternative:focus, .button.button-alternative:hover {
    background-color: #e85a4f;

.compose-form .autosuggest-textarea__suggestions, .compose-form .compose-form__buttons-wrapper, .search__input:focus, .column-header__collapsible-inner,, {
    background: #8e8d8a; color:#eae7dc;

.load-more:hover {background: #eae7dc;}
.compose-form .compose-form__warning {background: #e98074;}
.icon-button.inverted {color: #eae7dc;}
.icon-button.inverted:hover, .icon-button.inverted:active, .icon-button.inverted:focus {color: #fff;}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter { color: #eae7dc;}
.text-icon-button {color: #eae7dc;}
.text-icon-button:hover {color: #fff;} {color: #e98074;}

.drawer__inner {
    background: #eceff1; height: auto;
.drawer__inner__mastodon, .landing-page__mascot {display:none;}

.compose-form .spoiler-input__input {
    border: 3px;
    border-radius: 4px;
    border-color: #e98074;
    border-style: solid;

.drawer__tab {color: #8e8d8a;}

.privacy-dropdown__option:hover, {
    background: #e85a4f;
    color: #000000;} {
    background: #e98074;
} {
    background: #e85a4f;} {color:#e98074;}
.column-header > .column-header__back-button {
    color: #fff;
.landing-page #mastodon-timeline {color: #eae7dc;}
.column-settings__section {color: #eae7dc;}
.setting-toggle__label {color: #eae7dc;}

.drawer__pager {overflow: auto;}
1 Like

Moved the css to