Tiny Tiny RSS: Community

Custom CSS to split article content in columns


Hi there,
I’m running tt-rss for a lot of years now on my home-server, so first of all thanks for this great piece of software! :wink:

I just want to share some of my custom CSS, to make full-text feeds much more comfortable to read. Especially on big screens, 4K resolution,…

By default, the lines go all over the screen, and inline-images scale to the full screen width.

The CSS splits the content into columns (justified, with hyphenation) and adds horizontal scroll bars if necessary. The layout looks similar to a regular newspaper.
It works fine with all of my feeds, and night.css-Theme.

You can just paste the code to the custom-css section in the settings.
The first section changes the item-order in the headlines to my preference (optional)

/* optional section: change the order of objects in "fresh-articles" view */
.cdm .header .left        { order: 1; }  /* (de-)select | mark | publish */
.cdm .header .titleWrap   { order: 4; }  /* article title */
.cdm div.header div.feed  { order: 3; }  /* feed name */
.cdm .header span.updated { order: 5; }  /* date/time */
.cdm .header .right       { order: 2; }  /* feed icon */
i.icon-score, i.pub-pic   { display: none; }  /* hide "publish"-icon */

/* columns */
.cdm .content-inner {
    columns: auto 350px;
    column-rule: 1px dotted;
    max-height: 80vh;
    overflow-x: scroll;
    hyphens: auto;
    text-align: justify;

/* set a minimum-column-height */
.cdm .content-inner::after {
    content: "x";
    display: block;
    line-height: 20;
    break-before: column;
    break-inside: avoid;
    visibility: hidden;


Wow. Looks grand. Thanks. Of limited use to me though because my reading is 90% titles, 10% content, and thus three vertical panes.


Looks nice - but the “expand” button / function is gone for longer articles…


hmm, yes, but an expand button probably makes no sense in this case anyway, because the height is limited to the screen height, and all overflowing content goes to the right


i wouldn’t use it myself but it’s nice looking, op


Thanks for that, I always wanted to do that, but struggled with it. I guess I missed the max-height + overflow-x combination.

However, to make it really useful, I wish it could scroll horizontally with the mouse, instead of just vertically… Because for long article, I had to drag’n’drop the scrollbar, which is not very handy…


for me this works on my notebook, with touchpad (supports 2-finger horizontal scrolling),
but I agree…
Maybe also keyboard-navigation (scrolling horizontal by left/right key) would be nice.
But I don’t think it is possible just with CSS, would need some JavaScript at least


After a quick search, I see two things for scrolling:

  1. Firefox seems to have added it via Shift + scroll. See this addon
  2. There are some CSS tricks to simulate it. See this article. But this seems to be a hack. Maybe I can have some time tomorrow to test this.