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.
azurelunatic: A glittery black pin badge with a blue holographic star in the middle. (Default)

[personal profile] azurelunatic 2009-07-01 04:01 am (UTC)(link)
I have a feeling that people may want to do this for posts tagged 'twitter', too. ;)
isis: winged Isis image (wings)

[personal profile] isis 2009-07-01 03:30 pm (UTC)(link)
Stick this into your Customize Journal Style/Custom CSS/Custom stylesheet textbox:

.loudtwitter {
display: none!important
}
jeshyr: Blessed are the broken. Harry Potter. (Default)

[personal profile] jeshyr 2009-07-01 05:09 am (UTC)(link)
Wow, those are super powerful!!!!
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2009-07-01 08:51 am (UTC)(link)
That is amazingly cool.
pne: A picture of a plush toy, halfway between a duck and a platypus, with a green body and a yellow bill and feet. (Default)

[personal profile] pne 2009-07-01 10:13 am (UTC)(link)
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"?).
av8rmike: Neo from Matrix, text: I know S2 (I know s2)

[personal profile] av8rmike 2009-07-02 05:06 pm (UTC)(link)
Thanks! We'll probably be linking to this post from a new [site community profile] 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: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)

[staff profile] denise 2010-09-09 05:29 am (UTC)(link)
FYI, you might want to update this post to indicate that reading filters work now!
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!
staranise: A star anise floating in a cup of mint tea (Default)

[personal profile] staranise 2016-04-09 08:03 pm (UTC)(link)
Okay, is there a way to consistently make entries tagged with a specific tag show up with their entry content behind a cut tag?