Dreamwidth: The Nifty Things You Might Not Know

A few times I've noted questions about the @import feature for embedding fonts into customized layouts. At current, Dreamwidth hasn't decided to implement that, but users can embed fonts into their Dreamwidth layouts with a little help from Google Web Fonts. Google.com is continuously uploading and hosting a variety of fonts, free for use, and it's very quick to pop one into a Dreamwidth layout using the external stylesheet link. Jump behind the cut for a quick tutorial.

How do you use fonts hosted on Google on your Dreamwidth layout?
Tutorial Type: CSS/Customization
Difficulty: Medium
( Continue to the Tutorial )
Update: Multiple fonts are supported! To request multiple font families, separate the names with a pipe character (|). For example, to request the fonts Tangerine, Inconsolata, and Droid Sans: http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

K, in response to a few posts at dw_suggestions, have some CSS to reduce the impact feeds, especially long feed entries, have on your reading page.

( The code itself )
( the Explanation )

( Removing the whole shebang )

Simples. By the way, I'm not using this code myself, I just did it as it was requested, it won't work if the feed uses inline styling to set size (naughty originating site), but I'm happy to have a look if anyone's having problems with it. It would, of course, be a lot easier if the paragraph given the class ".ljsyndicationlink" was followed by a div given a class like ".ljsyndicationcontent", but that's not my call *cough*hint*cough* ;-)

See this post on using CSS to make feed userpics and custom comment colors in matgb's journal!

The new AJAX-y cut tags are great, but one thing about them is that they don't by default show up with any borders. That's great if you like it the way they are, but if you want to be able to distinguish between open cuts and the rest of the post, it's not easy to tell where the end is.

Thankfully, however, an open cut tag has its own CSS class, so you can customise it on your journal and reading page. Go to the Custom CSS section of the Customize area, and paste this into the box:

.cuttag-open {
  border: 1px dashed black;
  margin: 0.5em;
  padding: 0.5em;
}

Or however you prefer - for example you might prefer a red or black border. But after saving this CSS and refreshing your journal or reading page, you should find that any open cut tags will now have dashed boxes around them. :D

This only works for the dynamic part of the cut tags, unfortunately; going to an entry directly won't allow you to do this. (but maybe I should suggest that as a feature! Mmm, that'd be good.)

I like a very clean and simple reading page, so I use style=mine all the time.

afuna taught me this:

( If a user's posts or comments show up a lot in your journal or reading page, and you get confused about who it is because they use so many different icons )

---

If you get confused about the meta data, like mood, location and music you can remove it from view by putting this in your custom css:

.metadata {display: none;}

ETA:
From poulpette in comments: (paraphrased badly by me, you had better read poulpette's precision here)
To hide mood, location and music but leave the crossposted footer visible:

.metadata-label {display: none;} (Hides "Mood:" etc)
.metadata-item {display: none;} (Hides "Excited" etc)
.metadata li img {display: none;} (Hides the mood image)

Of course you can always see the original icon and original meta data by not using style=mine.

I've made a userstyle that tweaks the Tropo Red site scheme a bit and makes the profile page look more like LJ's did before they changed it.

All site scheme pages have a slightly larger font size and the visited links are in a different colour - the same as the hover colour for the page and a light grey for the drop-down menus.

On the profile page I've got rid of the grey bar under the username and the dotted lines below the section headers. I've moved the default usericon to the right (where it belongs, dammit!) and removed the unnecessary toolbar/actionbar text. I made the title and subtitle larger, made the stats slightly larger and in black, and made the font size of any adult warning match the rest of the stats and also removed the bolding of this line.

This is how my profile looks with the script installed.

You can install the script here on Userstyles.org.

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.

( Here we go! )

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.