qilin: A colorful, squat ceramic qilin (ceramic)
Qilin ([personal profile] qilin) wrote in [site community profile] dw_nifty2009-06-30 06:29 pm
Entry tags:

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

So, we don't have reading filters yet--they are [staff profile] 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 [site community profile] 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.
stormy: βͺ ππŽπ“πˆπ‚π„ ❫ 𝑫𝑢 𝑡𝑢𝑻 𝑻𝑨𝑲𝑬 𝑴𝒀 𝑰π‘ͺ𝑢𝑡𝑺 ⊘ (Default)

[personal profile] stormy 2010-10-21 03:44 pm (UTC)(link)
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!