Skip to main content

G+ style Multi-Column Streams in diaspora, Tumblr, Mastodon, Hubzilla, Friendica, YouMe, and MeWe.

I... show more

Thanks, @Isaac Kuo!

If I may ask … this part here:
/* ===== TALLER NOTIFICATIONS DROPDOWN ===== Doc Edward Morbius */

.navbar.navbar-fixed-top .nav-badges .dropdown-menu .notifications {
    max-height: calc(85vh - 4em);
    min-height: 8em;

I tried to change the “vh” number but nothing seems to change (27" iMac w/ Retina) … I’d like to have the notifications dropdown to go all the way down to the bottom of the browser window.

But maybe @Doc Edward Morbius is the one I should asK?

Anyway, thanks to all of you who contribute to this, I love it.

When I try to install it, I get an error at the top of the page to the effect that chrome cannot install scripts from this site. Any quick thoughts?

I'd really love to use this on Friendica, but my left bar is too tall 🙁 But great work on getting this out... might try to look to see what the problem with Friendica is myself.

Have you considered contributing this to the diaspora project?

Wow! Neat, thank you!

Thanks. 😀 Seems to work like charm.

You're welcome!

@Bonobo I adapted that from something @Doc Edward Morbius posted once. I experimented with trying to make the dropdown taller, but it seemed to act funny if I tried to make it too tall.

@Kent Crispin What sort of system/browser/plugin are you using? I know this does not work on iOS, because Apple refuses to allow any browser engine other than Safari (other "browsers" are customizations on top of Safari).

@Chuck Dee I'd appreciate it if you took a look at it. I've given up on it. I tried a number of things, but nothing worked. The current version at least makes the left sidebar accessible if you're scrolled all the way to the top (you can independently scroll just the sidebar to access stuff below the screen).

@Isaac Kuo I know you are busy with other stuff but I'll drop my suggestion/wish anyway. It would be great if we could have some flags/variables at the begin of the code to control the possible configuration options like font size, column count, ... instead of having to change the code and/or comment part of it. Something like
var numColumns = 2 or var expandAllPosts = true, however that is written in CSS. Would make it much easier to reconfigure after an update. I really don't want to do without your script anymore. Totally different diaspora* experience with it 😀 Thanks! Oh, ... and maybe a name change from "3 Column Diaspora" to "Multi-Column Diaspora"? 😉 😉 😉

@Nelson Honestly, I have not used github yet, and I think it's a bit of a learning curve to get going with it.

That said, when I get my #CSF javascript thingy going, it will likely be something worth integrating into diaspora at some point.

You're welcome, again!

@Justin Pletzfeld I decided against that approach because it would make the actual code harder to comprehend (you'd have to look up at the top to see what each variable actually was).

My strategy is to try and make the code itself be simple and easy enough for people to understand. Once you see how few lines of codes are involved, it makes you look at all web sites in a different way. Just knowing that only a few lines is necessary to alter things the way you prefer...

Let me explain how I got started with this. I actually was asking about multi-column stream in Dreamwidth when @Filip H.F. "FiXato" Slagter explained in a very brief comment that it's something that you can usually alter yourself with a Stylus userstyle. He gave a diaspora example with just a single line of code (altering the stream element's width and... show more

Awesome story, @Isaac Kuo, and inspiring indeed!

Thanks! I used to do this ( CSS ) but stopped using FF cos it crashed so often and was slow, - this is much easier to look at 😁 Cheers!

@Kent Crispin If you're still having problems, an alternative method of using this CSS userstyle is to use a javascript userscript instead.

This requires a different plugin - TamperMonkey or GreaseMonkey or equivalent. These plugins run javascript userscripts rather than CSS userstyles - more powerful and flexible, but also more complex.

On each userstyles page, there's a link which says:

Install style as userscript

This immediately converts the CSS code into javascript code, for installation into TamperMonkey/GreaseMonkey/etc.

@Isaac Kuo It worked fine under firefox -- Thanks again for your work, btw, it really is a vast improvement in usability. I have to go back and investigate the problem further, though, because I do use chromium/chrome at times and the contrast is painful. My impression was that it was chromium/chrome that was complaining, not stylus -- it appeared that the userstyles site itself was possibly on some kind of browser blocklist. I did notice some rather sketchy ads there...

Anyway, I'll investigate further when I have time. Thanks again!

@Isaac Kuo Tried again today, and now it loaded the styles fine. I still need to try it on my pixelbook, but progress has been made 😀

I unleashed a monster 😂

@Isaac Kuo Nice. Really improves usability


BTW, I've come up with an alternative way of presenting single post view - 3 columns with the original post at the upper left, rather than the original post consuming the left section entirely.

This uses space more efficiently, but I'm not sure whether I should replace the old version with it. Here's the new code:
/* ===== TRIPLE COLUMN COMMENTS ===== Isaac Ji Kuo */

/* For two columns, change column-count from 3 to 2 */

\#single-post-container > div { column-count: 3; }
\#single-post-content.col-md-6.single-post-content { width: 99%; break-inside: avoid; }
\#single-post-interactions.col-md-6.single-post-interactions { width: 99%; } { break-inside: avoid; }

And here's the current code it would replace:
/* ===== DOUBLE COLUMN COMMENTS ===== Isaac Ji Kuo */

/* To adjust post width, alter 40%-60% split */
/* For three columns, change 50% to 33% and column-count to 3 */

\#single-post-content.col-md-6.single-post-content {
    width: 40%; }
... show more

Okay, I've updated the "3 Column Diaspora" userstyle.

This version:

1) Alters the left side-bar into a small bar that autoexpands on hover. This provides full width to the stream.

2) Fixes a bug with Photos pages. Photos pages now appear nice, with 5 columns.

3) Changes the way the Single Post View comments work. Instead of being two columns on their own, there are three columns shared with the original post. This tends to use space a lot better. However, there are some times while entering comments that this is a bit buggy. If you encounter a situation where the bottom of the comment you're entering is below the screen, temporarily deactivate the style.

If you prefer the old style of Single Post View, I still provide that code, commented out. To use it, delete the new style code, and uncomment the old code.

Here's what the current code looks like:
/* ===== CUSTOM FO
... show more

Lines #47 to #52:
/* For four columns, column-count: 4; column-width: 25%;  */

\#single-post-container > div { column-count: 3; column-width: 33%; }
\#single-post-content.col-md-6.single-post-content { width: 99%; break-inside: avoid; }
\#single-post-interactions.col-md-6.single-post-interactions { width: 99%; } { break-inside: avoid; }

I get an error msg for line #49:
⚠️ Expected '<length> | auto' but found '33%'.

It's a warning rather than an error. I can make the warning go away by putting "calc()" around 33%, but ... why? It works as expected either way. I feel like it may be a bug in the Stylus plugin that it warns on this.

Ah, OK, thx!
(I’m not a coder, I couldn’t distinguish a “warning” from an “error” from a “the sky is falling” message 😉 )

Hi there,

i have here another attempt for the single-post display while playing arround with flexbox:

post-content and comments-container are adjustable as well as the comment column layout
/* ===== CUSTOM FONT SIZE ===== Isaac Ji Kuo */

/* uncomment and change from 13px to desired size */

/* body, .form-control { font-size: 13px; } */

/* ===== TALLER NOTIFICATIONS DROPDOWN ===== Doc Edward Morbius */

.navbar.navbar-fixed-top .nav-badges .dropdown-menu .notifications {
    max-height: calc(85vh - 4em);
    min-height: 8em;

/* ===== EXPAND ALL POSTS ===== Gible Fog */

.expander{ display:none; }
.stream-element .collapsible,
.stream-element .collapsible.collapsed {
    max-height: 800px;
    overflow-y: auto!important;
    height: unset!important;

/* ===== TRIPLE COLUMN STREAM ===== Isaac Ji Kuo */

/* For two columns, change 33% to 50% */

\#main-stream > div:not([class='clearfix row']) {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-row-gap: 0px;
  grid-column-gap: 20px;
... show more

@Thomas Fellinger Thanks for your efforts! You're doing a lot of stuff I don't understand, and maybe it'll be helpful for me to learn.

Like, I don't know what "clearfix" is, or what resetting it implies. And I don't know what "bootstrap chaos" means.

For not being a coder (but with some experience in reading parts of different codes, including in maybe a dozen programming languages, it seems I’m going to learn a lot just from following your posts Re: your script 😀

) <— the missing closing parentheses, pls insert before the second comma 😁

The fact that I can’t edit my comments alone raises the probability that I’ll abandong pluspora when Openbook takes off well … should’ve been “parenthes_i_s”.

@Bonobo you can copy/delete/paste new comment and correct your mistakes.

And I am going to work on post/comment editing via #CSF. The basic idea is that you comment with a line starting with EDIT and it uses substring pattern matching to determine which comment (or post) the comment is meant to replace.

Then the javascript code moves the comment to replace the comment or post.

i retested it and the problems i had before are gone - so that part can be left out. Maybe the chaos is only at developing stage 😉

if “flex” is used across browsers, some kind of vendor-prefixing may be considered:
/* ===== MULTI COLUMN SINGLE POST ===== Thomas Fellinger */

/* Flex layout for post parts content & comments */
\#single-post-container > .row,
.comment_stream .comments {
  -webkit-flex-flow:row wrap;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
/* reset clearfix */
\#single-post-container > .row::before,
\#single-post-container > .row::after {
/* reset float */
\#single-post-container [class*="single-post"] {
 * Adjust post parts width
 * alter 40%-60% split
... show more

Okay, I've fixed up my YouMe theme; it supports both the Default (Mustard) and YouMe (black&white) UIs. It works better with the Default.
/* Change 25% to 33% for 3 columns */

\#content-wrapper, #center, #header > div.container.full_header { width: 99%; }
\#leftnav { height: 77px; overflow: hidden; float:left; }
\#right   { height: 42px; overflow: hidden; float:right; }
\#leftnav:hover, #right:hover { height: 100%; }

/* DEFAULT MUSTARD THEME = list-content > li */
/* YOUME BLACK AND WHITE THEME = .feed-grid-item */

\#list-content > li,
.feed-grid-item {
    width:calc(25% - 5px)!important;
    display: inline-block !important;
    vertical-align: top;

@I am not Alice , here you go! Isaac gets all the glory 😀

Just trying this extension on PlusPora -- it makes a big difference.

Hi. I'm grateful for this script. Could it possibly be adapted to be a 2 column script?

@Brian, just click the Stylus icon, then “Manage”, then click the script, scroll down until you see this:
/* ===== TRIPLE COLUMN STREAM ===== Isaac Ji Kuo */

/* For two columns, change 33% to 50% */

Everything else should be clear then.

Gotit! Thank you @Bonobo

You're welcome 😀

This website uses cookies to recognize revisiting and logged in users. You accept the usage of these cookies by continue browsing this website.