Originally shared by Isaac Kuo
Multi-column Stream in diaspora!
One thing I like about Google+ is the multi-column stream view. It means I can browse articles more quickly than with a single column view, with less scrolling effort. Conversely, it means my followers can browse articles more quickly, so more people see my posts. It's great! More engagement, more enjoyment, less time spent.
Diaspora has many features I like, being similar to early G+. But it has just a single column stream view...until now! It turns out that adding a small bit of CSS code gives a crude multi-column stream view. It's not neat Masonry tiling, with weird gaps. But it's good enough for me.
The steps to do this are:
1) Use Chrome or Chromium
2) Install the Stylus plugin (search for "stylus chrome")
3) Go to pluspora.com (or whatever diaspora pod you're on)
4) Click on the “S” plugin icon in the upper right; select Write Style for pluspora.com
5) Paste the code:
```
#main-stream .stream-element {
float: left;
width: 33%;
}
.container-fluid {
max-width: 3000px;
}
.col-md-3 {
width: 15%;
}
```
6)Click “Save” to save your new style.
#diaspora #diasporatips #tips #tip
Have you uploaded this to userstyles.org for people to find and use as well?
ReplyDeleteDon McCollough I'm a complete newbie when it comes to this stuff, so no - I was not even aware of userstyles.org. Thanks for the heads up!
ReplyDeleteIsaac Kuo You're welcome! There is a multi-column on that site already, though yours seems to work a bit better, and there's nothing wrong with more than one of the same style by different people as they all work differently.
ReplyDeletetrying to get away from Chrome, though....
ReplyDeleteJohn Douglas Porter I've been told that this works in Firefox; the Stylus plugin is also available for Firefox.
ReplyDeleteI would expect the same Stylus plugin or equivalent capabilities exist for other browsers also. It's basically just sliding your own custom CSS code into the web page.
This works on Chrome and Firefox. I've done it on both.
ReplyDeleteI need breathing room... so:
ReplyDelete#main-stream .stream-element {
float: left;
width: 31%;
margin-right:2%;
}
Should give a little breathing room for each column.
Thanks, Isaac!
ReplyDeleteBTW, I have refined the code, and also included a link to CSS style for auto-expanding posts (so you don't have to click on "Show More").
ReplyDeleteI also added code for removing the sidebar, so the full width is used for posts:
https://pluspora.com/posts/708910#c062f8000d420137d119005056264835
I can look into coding a much better version using javascript, which is what I use on Atmos to give the effect that makes long posts not cause massive gaps at some point
ReplyDeleteNever knew you could do any of this. Thanks guys.
ReplyDeleteIsaac Kuo pastebin.com - Pastebin.com - #1 paste tool since 2002! ??
ReplyDeletehttps://pastebin.com/XnSXtRXm
John Lewis There's a userstyles.org - Themes & Skins for the World's Top Websites web site specifically for sharing Stylus CSS style scripts in easy "click to install" form. I'm not sure how to sign up for it (I'm not enthusiastic about logging in with my "Google" ID...)
ReplyDeleteIf I can figure that out, I'll share my style code there. That way, people can just click on it to install!
Isaac Kuo Nice!
ReplyDeleteSeems this would be a great application for either CSS columns layout or CSS grid. I'll play with both.
ReplyDelete(And, FWIW: single column is the one true format and you are all sick and twisted deviants!!!)
Edward Morbius your columns-layout results (https://www.joindiaspora.com/posts/133d3f800d270137d113005056264835#ddf1afa00d810137985e0218b7b935a5) are better than what I came up with (https://www.joindiaspora.com/posts/14024966) :)
ReplyDeletejoindiaspora.com - Multi-column Stream in diaspora!
Isaac Kuo a little off topic, but since this is making me really consider putting more effort into pluspora, is there any good ‘how to’ post somewhere that you know of? Or should I just work my way through their help?
ReplyDeleteAlistair Langsford When I was searching around yesterday, I ran across one but I don't remember where.
ReplyDeleteHonestly, when I first joined up with pluspora I instantly felt at home because the UI was so similar to early G+ (which was a diaspora clone in the first place). Aspects = Circles.
But there were, in fact, some important differences and tricks that weren't obvious to me at first. Like, it wasn't obvious how to reshare a post with additional commentary (you copy/paste the URL to a normal post).
If you find it, please let me know. I’m not sure if the keywords / hash tags I’m following are too general, or if other things are slipping in. I don’t seem to be able to restrict things enough. Unlike here on G+, where its either the groups I’m in, or the people/collections I’m following. Probably need to persist with reading the doco. Its just all strange to me. I know the minimum I need for FB, which I only use because of certain people who best coordinate via using it. So I use it to that extent alone. Other places seem quite different from here.
ReplyDeleteI do like their @{username@pod} format as it has less of a chance of screwing up other text like G+ does.
ReplyDeleteFollowing hashtags can be both a blessing and a curse. I don't think it's possible, but being able to specify per hashtag how much content is included in the Stream, and sorting hashtags into Aspects, would've been nice.
Alistair Langsford The Tutorials for pluspora are only 6 pages long (not including the Markdown reference, which you don't need to start with) and is easy to understand. It shouldn't take long to work through. And there's also Help section for particular topics. Both are in the Need help? section in the sidebar.
ReplyDeleteAnd if you use the #help hashtag in a post, one of us will come running. If you follow the #help hasthag, you should see responses to other people's requests, and add to your learning.
Garry Knight thanks. I’ll see how i go and post any further question there.
ReplyDeleteAlistair Langsford Here's the "getting started" with diaspora post I had run across earlier. It's pretty basic stuff:
ReplyDeletepluspora.com - pluspora - FIRST STEPS
Isaac Kuo Thanks. Many seem to do a lot online, with social media, fiddling with webpages & blogs, HTML & CSS etc. I’m not one of them. So this helps turn confusion and fog into known bits of information and structure. Which then helps me learn more. So thankyou again, because it is a big help to me.
ReplyDeleteDon McCollough I uploaded my Style, which includes a few more enhancements (that are in easy to delete code sections)
ReplyDeleteuserstyles.org - 3 Column Diaspora
new instructions here:
https://plus.google.com/+IsaacKuo/posts/Qj6asPvwmjU
#ConsiderationsAndFeatures
ReplyDeleteJeff Diver I have greatly improved my userstyles, and made multi-column stream styles for diaspora, Mastodon, Tumblr, Hubzilla, Friendica, YouMe, and MeWe.
ReplyDelete"Point and click" instructions here:
https://pluspora.com/posts/e5093d3025790137cf99005056264835
Isaac Kuo Sounds great!
ReplyDelete