Fun with core2 styles and CSS: filtering posts on your reading page

[qilin]

So, we don't have reading filters yet--they are mark's current big project. This post is designed to show you a little bit of the power in DW's new version of S2 with examples of how you can do some interesting filtering of your reading page through CSS alone.

Each entry on your reading page has some CSS classes in a div called the .entry-wrapper. They include the following, among other things:

* Post security: security-public for public entries, security-protected and security-custom for access-only
* Adult content labeling: restrictions-none, restrictions-nsfw and restrictions-18
* Journal type: journal-type-C for communities, journal-type-P for personal journals
* Poster: poster-USERNAME
* Journal posted in: journal-JOURNALNAME

So, this entry would have the CSS classes:

security-public journal-type-C poster-qilin journal-dw_nifty restrictions-none

I'm now going to use these classes in examples designed for filtering your reading page, using my own username and dw_nifty when poster-USERNAME or journal-JOURNALNAME are used. Note: because these aren't real filters, they can only hide posts; if only 3 posts of the last 20 fit the display criteria, you will only see those 3 posts for that place in your reading page.

You can used this to select which entries you want to display or not. For instance, let's say a particular person posts a lot and you don't want their personal journal posts to show up. This CSS will make them not display:

.entry-wrapper+.journal-qilin { display: none; }

You can make sure this only happens on your reading page by putting .page-read in front of it:

.page-read .entry-wrapper+.journal-qilin { display: none; }

Or perhaps a particular person doesn't cut their posts and tends to post long ones. You can hide the entry's content and leave everything else intact:

.entry-wrapper+.journal-qilin .entry-content { display: none; }

Maybe you only don't want to read somebody's posts to communities, but want to read their personal posts:

.entry-wrapper+.poster-qilin+journal-type-C { display: none; }

Or maybe you only want to read someone's post to a community but not the rest of the posts. You can do that by making those posts not display but marking the ones by the person you want to read to display afterwards:

.entry-wrapper+.journal-dw_nifty { display: none; }
.entry-wrapper+.journal-dw_nifty+.poster-qilin { display: inherit; }

Maybe you aren't interested in someone's NSFW or 18+ content, whether they post in their journal or a community, but don't want to hide their unrestricted content:

.entry-wrapper+.poster-qilin+.restrictions-nsfw, .entry-wrapper+.poster-qilin+.restrictions-18 { display: none; }

Maybe you don't want to have any NSFW posts show up on your reading page only but are okay with it on other pages:

.page-read .entry-wrapper+.poster-qilin+.restrictions-nsfw, .page-read .entry-wrapper+.poster-qilin+.restrictions-18 { display: none; }

Here is a little bit of code that only shows the header and footer for posts not from communities:

div.entry-wrapper .entry-content, div.entry-wrapper .userpic, div.entry-wrapper .metadata { display: none; }

div.entry-wrapper+.journal-type-C .entry-content, div.entry-wrapper+.journal-type-C .userpic, div.entry-wrapper+.journal-type-C .metadata { display: inherit; }

There are two easy places to put the CSS rules you make.

One is in the custom CSS settings on your styles modification page.

The other, if you use Firefox, is the Stylish extension. The Stylish extension is especially nifty, because you can easily check or uncheck what styles you want applied and reload the page to have them take effect, or only have the styles apply to certain DW pages. That way, you could create different styles that do different filtering and check and uncheck them to cobble together a cheap version of reading page filtering.

These examples are a little taste of how much CSS class detail is in DW styles, which will hopefully be put to good use in the solicitation for official Tabula Rasa styles.

Comments

[azurelunatic]

I have a feeling that people may want to do this for posts tagged 'twitter', too. ;)

[qilin]

Yes, but I am less sure of how to do that with CSS, although I know some people surround their Twitter content with a CSS class to make it easier to block.

[isis]

Stick this into your Customize Journal Style/Custom CSS/Custom stylesheet textbox:

.loudtwitter {
display: none!important
}

[jeshyr]

Wow, those are super powerful!!!!

[cesy]

That is amazingly cool.

[pne]

Or maybe you only want to read someone's post to a community but not the rest of the posts. You can do that by making those posts not display but marking the ones by the person you want to read to display afterwards:

.entry-wrapper+.journal-dw_nifty { display: none; }
.entry-wrapper+.journal-dw_nifty+.poster-qilin { display: none; }

I think the second line should not have "display: none" but rather something else ("display: block"?).

[qilin]

Oh, you are correct! I've been using display: inherit for that. Thank you for the sharp eye! Fixing now.

[av8rmike]

Thanks! We'll probably be linking to this post from a new dw_styles entry.

One nitpick in the first paragraph: "DW's new version of S2". We haven't actually updated anything in the S2 language itself, just built a new Core layer with expanded capabilities.

[denise]

FYI, you might want to update this post to indicate that reading filters work now!

[stormy]

Another fabulous thing you could include for the people who never cut their journal entries is adding:


.entry-wrapper+.journal-qilin .entry-content { height: 400px; overflow:scroll }

That'd enforce the entry to be no more than 400px (or whatever you decide to set) high, and the rest of it would scroll with a scroll bar. It's not as graphically pretty, but I set this on some feeds sometime when they just keep going!

[staranise]

Okay, is there a way to consistently make entries tagged with a specific tag show up with their entry content behind a cut tag?

[alix]

This would be a really cool feature for a community I'm trying to start up....