Remove "story taskbar"?

I’d like to remove the Story Taskbar at the bottom (div#story_taskbar). This thing below:

I’m not an expert at CSS and the best I can end up doing is making it just blank. I know it’s relatively small but I never use it and I’d like it gone so I can get a little extra browsing real estate.

Is there a simple CSS rule I could add (I have the Stylus Chrome extension) to remove it and let the stories fill all the way down to the bottom?

Ideally just remove the “right” portion of it, the part under the stories, and keep the more frequently useful “left” part of it under the folders tree. But I’d be fine with both going away if that’s easier.

Thanks!
Thanks

You can run this custom JS to hide that toolbar:

NEWSBLUR.reader.layout.rightLayout.toggle('south')

You can put that in Custom JS (premium only).

Tried it, but the bar is still there even after refreshing the page.

Try adding a setTimeout() around it with a timeout of 5000 ms

setTimeout(() => {
NEWSBLUR.reader.layout.rightLayout.toggle('south')
}, 5000);

Ohh, I see, it draws it back in every time you open a feed. There’s no hooks for you to use, I’m afraid. You’re best bet would be to use CSS to hide it.

Best I can do on that end is

div#story_taskbar {display: none !important;}

But this doesn’t actually free up that space. Now it’s just a black bar down there. I’m thinking removing it in this way isn’t quite enough, I’d need to manage the height of

.content-pane.ui-layout-container.ui-layout-pane.ui-layout-pane-center

But the height of .content-pane is already set to auto. I just can’t figure it out. Not a huge problem, just figured if you or anyone here could think of something off the tops of your heads. If not, probably not really worth spending time on.

The content pane has child elements with specified heights, I’m assuming they get their height calculated and set by javascript somewhere.

Try this:

#story_taskbar {display: none !important;}

.right-pane .content-pane.ui-layout-container.ui-layout-pane.ui-layout-pane-center{
	height: calc(100% - 36.9px) !important;
}

#story_titles,
#story_pane {
	height: 100% !important;
}

36.9px is the height of the top bar for me, might need adjustment based on your font sizes or scaling.

1 Like

Perfect, thank you!