Skip to main content


Bild/Foto
Bild/Foto
Bild/Foto
Bild/Foto

G+ style Multi-Column Streams in pluspora, Mastodon, Hubzilla, and Tumblr


I've put together CSS styles which provide multi-column Streams in various social media platforms. This has a huge effect on browsing speed. To use them, you:

1) Download Stylus plugin (Chrome, Firefox or Opera): https://add0n.com/stylus.html

2) Install desired Multi-Column style from here: https://userstyles.org/users/773238

Enjoy!

#diaspora #mastodon #hubzilla #tumblr #pluspora #tips #tip #diasporatips

(Putting them all here in one convenient place.)

Also, your choice in desktop environment is impeccable!

Done! So far, I think this will definitely make Pluspora a bit more "homey."

Yeah, I've been a fan of XFCE4 ever since I realized that it rotated text on vertical taskbar.

OMG - it is very serviceable! thx @Isaac Kuo!

This is awesome, thank you!

@Dr. Sam PhD Yeah, I'm aware of that. I tried out SocialHome, but there are a number of diaspora features that I just couldn't live without. The lack of notifications outside of e-mail was a big one, as was the hidden comments, and lack of post "like" option.

So I came crawling back to diaspora after very briefly trying out SocialHome. It just wasn't for me, in its current state.

@Oliver Zimmermann If you don't mind, please continue discussion of Friendica multi-column here. Thanks!

I'm hoping that my Hubzilla CSS code will work on Friendica, if you don't mind testing it:
main { max-width: none; }
 .thread-wrapper.toplevel_item.generic-content-wrapper.h-entry {
    vertical-align: top;
    display: inline-block !important;
    height: unset!important;
    width: calc(50% - 10px);
    margin-right: 10px;
 }
 .p-2.wall-item-content.clearfix.divmore {
    height: unset!important;
 }
 .divgrow-showmore.fakelink { display:none; }

On Hubzilla, this does two things - it creates a 2 column stream, and it autoexpands all posts. Since Friendica and Hubzilla are similar, maybe it will work on Friendica also.

I didn't go for a 3 column stream because Hubzilla annoyingly puts stuff in both a left sidebar and a right sidebar. This consumes a lot of width.

@Isaac Kuo Alright, thanks for looking into it.

BTW, I have added custom font size option in the 3-Column Diaspora userstyle. The code is commented out; you just uncomment the code and change the font size from 13px to whatever you desire.
body, .form-control { font-size: 13px; }

Wonderful - thank you for making this available!

I tried it and it works. It is much better, thank you very much for sharing!

@Isaac Kuo

I tested it out on Friendica but it didn't work, I am going to investigate a bit later if I have time.
main { max-width: none; }
 .thread-wrapper.toplevel_item.generic-content-wrapper.h-entry {
    vertical-align: top;
    display: inline-block !important;
    height: unset!important;
    width: calc(50% - 10px);
    margin-right: 10px;
 }
 .p-2.wall-item-content.clearfix.divmore {
    height: unset!important;
 }
 .divgrow-showmore.fakelink { display:none; }

@Daniel please let me know if you make any progress. I'm on Friendica too.

@Isaac Kuo I am sure there will be people on Friendica who want a multi-column configuration option.

Thanks for trying it out, @Daniel ! I was hoping it would just work, due to the similarities between Hubzilla and Friendica. I guess I'll sign up for a Friendica account somewhere to try things out. Any suggestions for a pod which is running a "common" release (as opposed to experimental stuff or whatever)?

@Isaac Kuo look for stable version 2019.01

@Isaac Kuo Although I will say the social.isurf.ca I am using is quite stable even though they have integrated the current release candidate.

@Isaac Kuo_ “ custom font size option” is awesome, thank you!

Ah, I see from https://the-federation.info/friendica that the overwhelming majority of active users are on 2019.03-rc-1304 anyway (rather than 2019.01), so I'll go with that.

I've gone with social.isurf.ca since it's one of the bigger nodes and it's open for new users.

Bizarrely, the overwhelming majority of "users" are in a single weird node, SPRACI : https://the-federation.info/node/spraci.info

SPRACI has only 6 active users, but 10433 total users. In terms of total users, SPRACI is 2/3 of the total, artificially inflating the total user number to three times what it should be. What's the story with SPRACI? I have no idea.

The bottom line is that Friendica and Hubzilla seem to be about the same size in terms of user base, with similar growth, despite the weird SPRACI outlier.

@Isaac Kuo The SPRACI issue is well known. It's a Friendica node that is not actually operated like it was intended to be. If I remember correctly, it's used for some kind of calender or appointment menagement system, were each entry generates a new user or something like that?
So it's actually not an active node, but some Friendica instance used in a weird way.

It seems like Friendica has a lot of different places to view stuff, which makes it more complicated for me to figure out where are the different places to test and such.

I do have a very basic question though - is there ever a right sidebar? I notice a right sidebar in some Friendica screenshots.

I need to know, because this complicates things.

Also, one thing I've run into is similar to Hubzilla - it seems that single post view is done using the same elements as stream view. As such, single post view is a problem because it'll end up really narrow for no good reason.

@Isaac Kuo Best advice I can give on your quest is to look in settings > display to find the available themes and customization options. I am not sure what they all look like for all functions.

@Shelenn Ayres I'm not on a quest. I have no interest in using this platform, I just want to implement something quickly that others may find useful.

So, can I assume there will never be a right sidebar?

I really don't want to search around all the different features to try and find out if there's any right sidebar and whether it's important or if I can just erase it.

I just want to know whether there's ever any right sidebar.

Fundamentally, I really hate these social media platforms with lots of different "features" like groups and collections and stuff ... so many different ways to access the same sort of stuff. It's annoying to me, and it's a ton of extra effort to try and deal with on a developer level. MeWe, Friendica, Hubzilla, YouMe, Facebook ... it's frustrating for me to deal with, compared to the relatively clean way diaspora and Tumblr do things. Even Mastodon, really.

Oh yeah - I've also got multi-column YouMe on my plate. Tomorrow's roll... show more

@Isaac Kuo For me the things that annoy you I like LOL. I prefer the power to be in the hands of the user so they can use the features whatever way they find best for them. The Frio theme (bootstrap 3) is the most user friendly in terms of customization options for colors etc. It is the default theme for social.isurf.ca

I have not seen anything on the right so far. I will look around for you but the premise is shown in the default theme screenshots here. What I have noticed is the use menu accessed by the small down triangle to the right of the user photo upper right. This overlays of course. On the Vier image you see what looks like a chat widget coming up from the lower right.

https://friendica-themes.com/doku.php?id=gallery

@Isaac Kuo It does look like there is a theme on this node called Smoothly that has a right sidebar instead of a left sidebar. You can see it in settings > display by selecting the pull down menu.

Thanks. I'm not worried about alternative themes. Most people only use the default theme, and I'm only going to work on modifying from the default theme. If other themes don't work well with the CSS userstyle, then others can figure out how to tweak it.

My basic philosophy is to try and keep the code as simple as practical while also offering the desired functionality. That way, it will be easier to understand so users can customize it without worrying about everything falling apart. Furthermore, fewer alterations to the CSS code will generally be friendlier with other theming and other userstyles/userscripts.

Anyway, I despise superfluous excess features. I mean like, why the eff have both hashtags and categories? They're the same effing thing! That was a huge turnoff for me on Hubzilla, and obviously that came from Friendica. It's more crap for developers and coders to deal with, and it causes more needless friction with the federated platforms (such as the far more popular Mastodon and diaspora platforms).

But whatever. The bottom line is that... show more

@Isaac Kuo They are not the same thing. If I tag something as a category, any user can go to my profile and click a category to see all posts in that category. It is a direct replacement for G+ collections.

@Isaac Kuo With saved searches based on hashtags, the results are all posts with that hashtag anywhere in the Fediverse by anyone - which is not the same as a collection.

@Shelenn Ayres That's a completely stupid distinction. In Tumblr, for example, you can either click on a tag on a person's page to see a search of just that person (like a Collection) or on the dash to see a search of all of Tumblr (like how hashtags work on most platforms).

In other words, the same hashtags can serve both purposes just fine. There's no reason to use completely different things with completely different UIs and completely separate backend storage.

And in practical terms, it drove me up the wall. I had to type in both hashtags in the body of a post, as well as type in categories in the category line of a post. So much duplicated effort! I'm much happier now that I'm no longer posting anything on Hubzilla.

@Isaac Kuo I don't think it is a stupid distinction at all. I cannot see another user's saved searches. They have a right to that privacy. I can however see their categories they make to share. I have the right to create my own saved searches with hashtags or simply use a hashtag search in global and not necessarily save it. It's about control over privacy.

I don't see how hashtags violate a right to privacy. At all.

I don't think you "get it". I'm not saying the usage is the same. I'm saying there's no reason to use "categories" at all. You can use hashtags for both things. There's no violation of privacy whatsoever. You don't see anyone's hashtag searches ... why would that be any different?

Why the heck have Categories at all? Why not just make it possible to use hashtags as categories? It's a stupid restriction on the software that makes it unnecessarily more difficult to use.

On Tumblr, it's simple and elegant. Tags can be used for both global searches and user specific searches. No need to double the user effort. It just ... works.

@Isaac Kuo I disagree but I am speaking ONLY from the Friendica perspective - not any other network type.

Using categories replaces collections and I like that distinction because it is explicit. It's perfectly fine for us to disagree.

If I search for a hashtag I get results from anybody and their brother who may have used a hashtag on something that is totally irrelevant. It's like searching for a keyword on the net - the search results are usually irrelevant because the global search is too broad and the meaning differs from one user to another. If I search for #blender the results could be posts associated with using the software named blender or it could be recipes made in a blender or a host of other meanings. With a category I know it was defined by that user to show me relevant posts for that user alone.

You like hashtags, I don't. It's no biggie. I can use both if I want but usage would be fo... show more

@Isaac Kuo If it's still important to you, the old default theme called "Vier" has a left and a right sidebar.

On your little discussion here, I'm on @Shelenn Ayres 's side. I use collections and hashtags in a completely different way. And as far as I know searching for a hashtag on a users profile on Diaspora gives you global results an there is no way to filter hastags in a way you describe for tumblr. Meaning Diaspora has no means of only showing hashtags from a specific users profile.

Please correct me if I'm wrong there.

Thanks for the info on "Vier". Now I understand the screenshots I've seen with right sidebar.

Diaspora does not yet have personal hashtag search, which is why I'm talking about how it already works on Tumblr. I talk about Tumblr's example because it's a popular well known platform which has done this for many years - since before G+ even existed.

That said, I'm working on personal hashtags, via my #CSF (Client-Side Filter). This is a hashtag that looks like #CSF isaackuo AT pluspora com and the #CSF simply filters out any errant usages via javascript. This is inspired by Tumblr, but it's even better because of how diaspora's hashtag following works.

Anyway, the only reason you use categories and hashtags differently on Friendica is because Friendica forces you to do it. Categories can only be u... show more

@Isaac Kuo No one is forced to do anything - quite the opposite. If a Friendica user does not want to use categories they don't have to do so. They can use hashtag saved searches or advanced account types for news, celebrities, organizations, or community forums. Every network type has its own use cases. The beauty of the Fediverse is any user can choose the one that best fits their use case and still connect with others who choose other network types. I do not think developers determine what users want. Users decide what developers should provide.

@Isaac Kuo Instead of ranting about all the shortcomings, go to GitHub and open an issue. It's probably more helpful than arguing about it in the comments of a post about multi column view 😉

No hard feelings, just my opinion.

This is on my profile page, so I'll probably simply delete everything related to Friendica here.

As for what is helpful? I hate a LOT of things about Friendica. It's not worth my time, since I'm working on diaspora instead. The Friendica project has a different vision for what a social media platform ought to be like, which is fine for the hundreds of people using Friendica.

In case you hadn't noticed, I've also ranted about stupid things about G+ which I hated. Should I try and make suggestions to Google on how to improve it? Of course not.

I am using my experience with social media platforms and software design to learn from the mistakes of others and avoiding them in my own development.

As it is, I'm doing diaspora development outside the normal channels because it allows better flexibility and immediate results.

I have added Multi-Column Friendica userstyle here:

https://userstyles.org/styles/169703/multi-column-friendica-stream

There's some buggy interaction with javascript related to the left sidebar, but it mostly seems solid.
/* Alter left/right column balance by changing 15%/85% widths */

/* Alter number of columns by changing 33% 33% 33% to desired */

\#top > main > div.container { width:98%; }

\#top > main > div.container > div > aside { width:15%; }
\#content { float:right;                     width:85%; }

\#content > section.sectiontop.network-content-wrapper,
\#content > section.sectiontop.community-content-wrapper,
\#content > section.sectiontop.search-content-wrapper,
\#content > section.sectiontop.profile-content-wrapper {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-row-gap: 0px;
  grid-column-gap: 20px;
}

@Isaac Kuo Appreciate the effort! How do I add it so I can test it? I also need to make non-technical instructions for others who know nothing about css/js/html.

@Isaac Kuo Hmm, does not seem to have any effect, if I use this code to create a style for the squeet.me URL in stylus.

@Isaac Kuo Ah, sorry... Forgot to change the server address on your style. Thank you very much!
It does work but has some strange quirks like very long white spaces at the end of some posts, probably to keep the "grid" in tact?
Bild/Foto

@Isaac Kuo @Isaac Kuo Ah, sorry... Forgot to change the server address on your style. Thank you very much!
It does work but has some strange quirks like very long white spaces at the end of some posts, probably to keep the "grid" in tact?
Bild/Foto

@Oliver Zimmermann What is the process start to finish that you used to test it? Do you have show more enabled? Do you have infinite scroll enabled?

@Shelenn Ayres The basic instructions are:

1) Download Stylus plugin (Chrome, Firefox or Opera)

2) Install the userstyle from here: https://userstyles.org/styles/169703/multi-column-friendica-stream

3) If you're not using social.isurf.ca, then adjust the domain it's set for.

@Oliver Zimmermann The white spaces are an unfortunate side effect of the way grid CSS works. I have updated the style with a different method:

```/
* Alter left/right column balance by changing 15%/85% widths */

/* Alter number of columns by changing 33% to desired */

#top > main > div.container { width:98%; }

#top >... show more

@Isaac Kuo I've followed the instructions and captured screenshots for each step. I will put them into a slideshow so you can see how things look on my system. Apparently there are different display behaviors for network and status pages, especially for long threads, than for single posts accessed via notifications.

Bleah. I've tweaked things so that at least the left sidebar is functional when you scroll all the way up to the top.

But I can't figure out how to avoid the buggy behavior when you get near the bottom of the content. There's some javascript that fights you scrolling where you want.

@Isaac Kuo It seems to relate to Friendica code related to the following: open post from notifications and it will highlight the comment or post. When I attempt to scroll I can't BUT if I click the arrow button to go to the top of the post it will go there. Once at the top I can scroll normally.

I have implemented 4 Column stream view in YouMe (you can adjust to 3 or 5+ columns if you want):

https://userstyles.org/styles/169705/4-column-youme

It's not 100%, but then neither is the site. It affects too much stuff, particularly single post view. Also, there seems to be a right sidebar on single post view of a Poll, which is a problem. Ugh... right sidebar!

Since YouMe already defaults to 2 column view, this may become completely unnecessary. They may develop 3+ column view options anyway.

So, this is just something quick and dirty to use/tweak/etc in the meantime.

I'm not going to be active in YouMe (or Friendica, Hubzilla, or MeWe), so expect my further development on those Multi-column userstyles to be spotty.

I do actively use diaspora, Tumblr, and Mastodon, so I'll likely update those if necessary.

@Isaac Kuo, please forgive a dummy question: Do I need to update the script manually every once in a while or does it update itself? (Chrome, macOS)
TIA, Tom

@Bonobo It never updates automatically. You can update manually by:

1) Go to Manage in the S menu.

2) Click on the little circly arrow icons to "Check for updates".

If you have edited the style, it will ask you if you really want to update (it overwrites whatever changes you made). For example, let's suppose you altered the number of columns by changing 33% to 50%. You'll have to redo your alteration after updating.

OIC, thanks a lot, @Isaac Kuo!

Great discussion - thx y'all.

I have updated this post here:

https://pluspora.com/posts/e5093d3025790137cf99005056264835

The updated post reflects the seven platforms I've made multi-column userstyles for:

diaspora
Tumblr
Mastodon
Hubzilla
Friendica
YouMe
MeWe

Interestingly, the YouMe userstyle can be useful for providing single column view, because the normal view is currently 2 column (always).

I've finally just taken the plunge and begun trying to shift into using Pluspora over Plus for my "shouting into the void of friendly strangers" purposes, and this 3 column thing you made is definitely going to make this easier. So I am absolutely here for all further enhancements you create. My thanks to you!

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