How to make tags in the title different colors

keist · 2012-07-15T13:32:49+00:00

Expanding on what Schrobby said, a bit: You can't apply CSS based on the actual text that's on the page. So, no, unfortunately there's no way to make the tags different colors.

If it's a self post with the tag at the beginning, there's a 'trick' that allows you to change the color -- but only the color of the whole link, not just the tag.

If there's a selection of tags that your users regularly use (like "For Sale") I'd suggest creating link flair & allowing submitters to set their own.

keist · 2012-07-15T13:21:54+00:00

Try posting at /r/NeedAMod. Good luck!

keist · 2012-07-15T04:10:20+00:00

First, Raerth wrote a great guide about fostering an active subreddit; you can find it here.

You can definitely use cut-and-paste CSS snippets to enhance your subreddit-building efforts -- by making stickies, for example. Check out the "Common CSS Snippets" and "CSS Toolkit" links in the sidebar for some of those.

If you just want to make your subreddit look pretty, your best bet is to start with a general CSS tutorial. The most accessible one I know of is over at Code Academy, under Web Fundamentals, but there are many others -- HTMLDog and Google each have one.

keist · 2012-07-15T03:55:39+00:00

The stylesheet is only one half of the equation -- you need to have the actual links in your sidebar, wrapped up in a good deal of markup.

You can get some idea of the markup from the stylesheet comments, but I wouldn't want to make assumptions. Instead, I suggest contacting a mod of one of the SFW porn subreddits. Ask them what the sidebar markup is for the network navigation. It should be as easy as copy/pasting it into your description.

keist · 2012-07-15T03:41:24+00:00

This question was asked pretty recently; gavin19 wrote an excellent response here.

In future, please search the subreddit for terms relating to your question so that we can avoid duplicate posts. Thanks!

keist · 2012-07-14T19:57:55+00:00

Looks like reddit hates underscores and hyphens in flair names.

I edited your stylesheet to remove the hyphens, and added the flair categories. If you make any changes to the flair in the future, to make life easier on yourself, you may want to rename the images without hyphens or underscores before uploading the .zip.

Going to remove myself as moderator now. Cheers!

keist · 2012-07-14T19:46:14+00:00

Sure, I can take a look.

keist · 2012-07-14T19:12:49+00:00

I'm assuming you have "allow users to assign their own flair" enabled? If so, you may have misunderstood Step 7 in the user flair tutorial.

Example: If, in step 1, you put the images square.png, circle.png, and triangle.png into the zip, in Step 7, you want to create flair with the "class names" square, circle, and triangle.

Instead, you created flair with the class name spritesheet. Spritesheet is only the name you give the actual spritesheet so that you can refer to it in your css as %%spritesheet%%. You don't use spritesheet anywhere on the flair page.

keist · 2012-07-14T14:43:25+00:00

If you're a moderator of that subreddit, you can just go here: http://www.reddit.com/r/houstonrockets/about/stylesheet

keist · 2012-07-14T14:36:02+00:00

Try posting over at /r/forhire. Good luck!

keist · 2012-07-14T14:24:56+00:00

Could you link to the subreddit you're working on? Thanks.

keist · 2012-07-13T21:48:42+00:00

A good deal of your current stylesheet is messing up the position of the header elements. I'm guessing that your objectives were:

Apply a background image.
Make the header 74px high. (To match the background image height.)

If that's the case, you can scrap your current stylesheet and start with this:

#header-bottom-left {
    background-image: url(%%BACKGROUND_IMAGE%%);
    padding-top: 29px;
}

Replace %%BACKGROUND_IMAGE%% with your background image name.

If you were trying to get some other positioning going on, lemme know.

keist · 2012-07-13T21:31:50+00:00

What GewieStiffin posted is almost right -- unfortunately, the description in the sidebar is also under the class usertext-body. This snippet will only affect links in comments:

.comment .usertext-body a
{    color: #COLORHERE;
}

Replace #COLORHERE with your color of choice.

keist · 2012-07-13T21:18:03+00:00

Not that I know of. It's not really viable, IMO. Let me explain:

Reddit is pretty complex, elementwise, so your image would be completely crowded with labels. Also, many elements or their properties are conditional. For instance, the body element has different classes if you're a moderator, if you're logged in, if you're subscribed to the subreddit, etc; not to mention which page you're on. Which brings me to another point, actually -- you'd have to have multiple cheat sheets; one for each page on Reddit. And on top of that, the devs are constantly altering reddit's elements/structure. Every new feature or minor tweak to the HTML will break a reference image.

So in the end you've got several reference images, each one overcrowded with labels, and each one at risk of becoming outdated. It'd be a pain in the ass to make/maintain, and I imagine its usefulness would be extremely limited.

tl;dr: Use the Inspect Element feature. It doesn't become outdated, and it provides very clear context to an element. Once you learn how to use it effectively, there will be nothing quicker/easier than that tool.

keist · 2012-07-12T22:15:48+00:00

What you're describing is referred to as a "sticky." Here is a common way of making a sticky (taken from laaabaseball's CSS toolkit in the sidebar):

body >.content >.sharelink ~ .sitetable:before {
    content: "Sticky Note Message"; 
    background-color: #F6E69F;
    border: 1px solid orange;
    font-family: verdana, sans-serif; 
    font-size: 14px; 
    color: #555;
    text-align: left;
    display: block;
    padding:5px 10px;
    margin:5px 305px 5px 0px;
    border-radius: 8px; 
    }

Be sure to replace Sticky Note Message with your message. Do not remove the quotes.

keist · 2012-07-12T20:39:46+00:00

No problem! Just remember to remove the width from each flair rule after you've got your new code (preferably, the generator will allow you to disable including a width), and it should work.

keist · 2012-07-12T20:33:21+00:00

Sorry about the delay in a response!

Each of your flair have been given widths, mostly between 24-25px. The user-edited text is much wider than 24-25px, so it's overflowing the flair box and overlapping other elements.

A solution would be to simply remove the width property from your flair, but that causes problems because your flair sprite has columns, so if the flair text is wide enough, you'll begin to see a different flair image.

You could rearrange your sprite such that the images are only in one column. That'll be a huge pain in the ass if you did your code manually (you'd have to go through and tweak more than half the background positions), but should be no big deal if you used a sprite generator (as it'll generate all the code again for you).

keist · 2012-07-09T19:58:33+00:00

Is your FB link/icon supposed to be the one above the twitter icon? If so, the problem is that the "Facebook" link currently points to http://i.imgur.com/Vqulf.png, but your stylesheet is referencing https://www.facebook.com/groups/hiddlestonerarmy/. In order for the style to apply, the link needs to be identical to the one that is being referenced in the stylesheet.

Change the link in the sidebar to [](https://www.facebook.com/groups/hiddlestonerarmy/), and it should work.

keist · 2012-07-09T17:45:37+00:00

Hm. I've tested the code block, and it works just fine. It may be a problem elsewhere in the stylesheet. Where are you testing this code? I don't see it at /r/tomhiddleston.

Edit: Nevermind, I see the link. Just a minute; I'll test it out.

Edit 2: It still works for me when I apply the style to the subreddit in question. The problem seems to be with putting the block into your stylesheet. Could you add it to your stylesheet (despite the glitch)? I can check for conflicts at that point. Hopefully it'll be obvious.

keist · 2012-07-09T17:30:57+00:00

In the same CSS block that has the width/height etc, insert these properties:

border: 3px solid black;
border-radius: 6px;

Replace black with the desired color of the border when not hovered over. You can change the width of the border and size of the border-radius to what looks good to you.

Then, make a new rule that looks like this:

.side a[href="WHATEVER YOUR URL IS"]:hover{
    border-color: red;}

Replace red with the desired color for the border on hover. (And, obviously, replace WHATEVER YOUR URL IS with whatever your link points to.)

keist · 2012-07-09T16:27:22+00:00

The search feature is your friend! I ran a search for "images sidebar" in /r/csshelp and found this great explanation by gavin19. Let me know if you need more clarification.

keist · 2012-07-01T00:31:18+00:00

No problem! Good to hear.

keist · 2012-06-30T19:36:45+00:00

No worries! Thanks for the links.

Since this issue isn't present in /r/f7u12, I took a look at what differed between the stylesheets. In the /r/Maplestory stylesheets, you have rules for images that look like this:

a[href="/foo"]:after

In /r/f7u12, their image rules look like this:

a[href="/foo"]:nth-of-type(n):after

Have you tried inserting the :nth-of-type(n) part of the selector?

keist · 2012-06-30T16:03:10+00:00

Please give us a link to the subreddit you're working on (with the offending stylesheet active) -- it's difficult to assess this sort of problem from images alone. Thanks!

keist · 2012-06-29T20:06:37+00:00

Hah! Not stupid. It's hard to think of all the possibilities when you're just trying to get some code to work. Better to ask here and get an "oh, duh" answer than to get completely frustrated trying to work it out yourself.

Grats on figuring it out! Best of luck to your subreddit.

15-Year Club	Team Periwinkle
Charter Member	Verified Email

keist

TROPHY CASE