Skip to content

tumblr dashboard dynamic multi column by sbm202

Details

Authorsbm202

LicenseCC Zero

Categorywww.tumblr.com

Created

Updated

Size2.1 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

changes the dash from single column to multiple column grid-like view. By default it will show 2 columns on a standard 1920px wide monitor.

Notes

Don't use this with infinite scrolling. new posts wont load

you can zoom out to show 3 columns. tweak --main-max-width to a higher number if you want more columns, but there may be some bugs such as posts disappearing.

Source code

/* ==UserStyle==
@name         tumblr dashboard dynamic multi column
@version      20230928.00.42
@namespace    ?
@description    changes the dash from single column to multiple columns. By default it will show 2 columns on a starndard 1920px wide monitor.
@author         sbm202
==/UserStyle== */

@-moz-document url("https://www.tumblr.com/"), url-prefix("https://www.tumblr.com/dashboard") {


/* DONT USE THIS WITH INFINATE SCROLLING */ 
/* it will not load new posts */


/* the width of the main content container */
/* good numbers 60 100 */
.ZkG01 ._3xgk {
  flex-basis: 100% !important;
}

/* 1920 because more than 3 columns tends to become too buggy */
:root {
/*   --main-max-width: 3440px; */
    --main-max-width: 1920px;
}

/* make the content container have dynamic columns (based on window width)*/
.zAlrA {
  width: 100% !important;
  column-width: 540px !important;
}

/* each blog post is this wide */
/* .rZlUD {
  max-width: 540px !important;
} */

/* needed for width */
.O4V_R {
  width: 100% !important;
  max-width: var(--main-max-width) !important;
}

@media (min-width: 990px) {
  .gPQR5.ah4XU .lSyOz {
    padding-top: 0px !important;
    padding-right: 0px !important;
  }
/* needed for width */
  .gPQR5.ah4XU {
    max-width: var(--main-max-width) !important;
  }
}

/* needed for width */
.lSyOz {
  max-width: var(--main-max-width) !important;
}

/* let the blog post move freely and keep them from splitting*/
div.rZlUD.KYCZY.rdRcY {
  position: unset !important;
  break-inside: avoid !important;
}


/* for non-infinate scrolling reduce page height / otherwise theres a lot of blank space*/
.zAlrA {
  height: unset !important;
}


/* floating blogger closer to post */
.FtjPK .AD_w7 {
  left: -65px !important;
}

/* uncover left sidebar */
.ZkG01 .h_Erh {
  margin-right: 65px !important;
}

/* limit the controller width */
.wttFd {
  padding: 0;
  max-width: 540px;
}

/* reduce the controller text padding */
.FOqaP {
  line-height: 1;
}

}

Reviews

No reviews yet.