killthecake | [1] Tutorial: How to Make Your Sticky Entry Stand Out

So you've probably noticed on this comm, that I have a message pinned at the top about coding requests. It looks all fancy and is there to catch the eye. In fact, you've probably noticed similar things on other comms and journals.

All of those messages are sticky entries with a little css help involved. I'm going to tell you how to make your own, but you might need to know a little bit about css to customize your entry however you prefer. All I know is that it took me forever to figure out, so I thought I might as well tell you guys about it, too.

For some extra css help, check out w3schools.

How to Make Sticky Entries (or really any entry) Fancy

Everything is going to be done in the coding of your layout, not in the post. So go to Organize > Customize Style or Account Settings > Journal Style > Customize your theme. Once there, go to Custom CSS.

Or, I mean, you can just click here.

Okay, that big ol' Use embedded CSS section is where we're going to work our magic. If you already have a lot of code in there for a personalized layout, that's fine. Just go on down to the bottom so you don't mess any of that up and we'll plug this stuff into there.

Now, the first thing we need to know is the url to the entry in question. Let's take this post's url as an example (pretend it's stickied).

killthecake.dreamwidth.org/11967

The numbers at the end, "11967" is the important part. Almost all css you would use to customize this entry is going to start with:

#sticky-entry-11967

So with a little bit of css know-how, you can edit that entry to stand out. But if you don't have any css know-how, I'm going to try to help a little with that.

Important Note: Some premade journal layouts, especially the default ones the DW offers, are going to have more trouble with the code than a premade layout some other user made. But! They can still be customized. You're just going to have to do a little wiggling and tweaking here and there to make it work in your favor. Though, the end result probably won't be exactly as you planned it.

A Few CSS Tricks

Here are a few general things you can do to make your entry look neat.

To edit how your management links appear (edit, track, memory, etc):

#sticky-entry-11967 ul.entry-management-links { CODE HERE }

To edit how your interaction links appear (link, reply, etc):

#sticky-entry-11967 ul.entry-interaction-links { CODE HERE }

To edit the header space:

#sticky-entry-11967 .header { CODE HERE }

To edit the content space:

#sticky-entry-11967 .entry-content { CODE HERE }

To edit the date/time space:

#sticky-entry-11967 .datetime { CODE HERE }

To edit the userpic/icon:

#sticky-entry-11967 .userpic { CODE HERE }

To edit the tag space:

#sticky-entry-11967 .tag { CODE HERE }

To make the star go away:

.sticky-entry-icon {display:none;}

To make anything go away, add this to the CODE HERE sections:

display:none;

And here is an example! This little code uses all of the things taught above. Feel free to yoink it or use it as a template:

#sticky-entry-11967 ul.entry-management-links {display:none;}

#sticky-entry-11967 ul.entry-interaction-links {display:none;}

#sticky-entry-11967 .header {font-family:helvetica;text-align:center;font-variant:small-caps;}

#sticky-entry-11967 .entry-content  {font-family:monospace;background: pink;text-align:center;}

#sticky-entry-11967 .datetime {display:none;}

#sticky-entry-11967 .userpic {display:none;}

#sticky-entry-11967 .tag {display:none;}

.sticky-entry-icon {display:none;}

Before

After

If you have any more specific questions, feel free to ask. Thank you!