this post was submitted on
50 points (76% like it)
73 up votes 23 down votes
shortlink:
to anything interesting: news article, blog entry, video, picture...

49
50

Hey everyone, I've just done lots of things to our CSS so please let me know about issues that you notice. (self.photography)

submitted ago* by vwllss[M]

I only test on Windows 7's most recent version of Chrome/Firefox and IE8. I've already gotten one message about an issue specific to Macs that I can't know about unless you guys tell me. If you see something wonky that I fudged up just let me know.

Also, if you disagree with any changes or have a suggestion I'm totally open to it.

p.s.: I'm already aware that the shadow effects on the headers somtimes don't work in IE. After researching how to fix it I ended up deciding I don't care that much. I hate you, Internet Explorer.

all 72 comments
sorted by:
best
hot
new
controversial
top
old

[–]peromocibob 11 points12 points ago

The visited and not visited links are too close in color. Please fix this.

[–]shark6428 6 points7 points ago

Agreed. The Unviewed links look close to purple and the grey is a little light. I'd rather have it in standard blue/purple.

[–]vwllss[S] 2 points3 points ago

Good call, I forgot to change the visited links after darkening them for dcnikon. Hopefully this is better.

[–]dontgoatsemebro 7 points8 points ago*

Everywhere else on the site; viewed links are purple. So, naturally, you've changed this subreddit to having unviewed links as purple...

What's the rationale beind that?

[–]vwllss[S] 0 points1 point ago

They're dark blue on my screen, like the default reddit. Not sure what you're talking about.

[–]dontgoatsemebro 1 point2 points ago

Print screen, zoom in and eyedrop. The hues are so close there is exactly the same purple in the font as the visited links on the front page.

But even if the hues were opposite you've reversed the link scheme from the rest of the site, where; light links are unvisited and darker links are visited. Now you've got light links visited and darker links unvisited.

Visually it's very disorienting.

[–]vwllss[S] 0 points1 point ago

I think there's an issue with my CSS then, because it doesn't look like that on my end. Maybe I left a rule in twice. It's definitely navy blue over here.

But even if there wasn't you've reversed the scheme from the rest of the site.

Navy blue for unvisited isn't reversed? The only thing I changed there was the bright purple, which was really ugly and actually complained about.

[–]dontgoatsemebro 2 points3 points ago*

This is what I mean.

Twisting my melon man.

[–]vwllss[S] 0 points1 point ago

I just tweaked visited links to be same lightness as visited links elsewhere on the site, but kept them gray. Maybe that'll look better.

[–]dontgoatsemebro 0 points1 point ago

Melon/torsion levels have been normalised.

[–]FenPhen 0 points1 point ago

Do not make visited links gray!

It is incredibly difficult to see a link this way. I see you're thinking of the case for the sub's list of links, but your CSS selector is not specific and it's affecting links in comments (click this, refresh, and you'll see what I mean).

[–]mackmgg 0 points1 point ago

Most people think of blue as already visited, as that's the default in most browsers. Changing that is fine, but making blue unvisited can be confusing.

[–]magus424 2 points3 points ago

Wrong. Default in all browsers is blue = unvisited, purple = visited.

[–]barcodez 1 point2 points ago

Also the top bar with the subreddits seems to be affected too. They should just always be the same colour IMO visited or not.

[–]vwllss[S,M] 31 points32 points ago

test post, please ignore

[–]Tovarisch 1 point2 points ago

I like how this comment has more upvotes than anything else.

[–]ahotw 2 points3 points ago

It shouldn't be a surprise.

[–]ahotw 3 points4 points ago

Umm... lets fix how links are displayed....

[–]Airazz 1 point2 points ago

Links should be blue, not grey. Difficult to notice when they're grey, as they look very similar to the normal black text.

[–]layzor 7 points8 points ago

loving the new layout. very neat and column-ized. gw.

[–]maskaler 2 points3 points ago

The main subreddit looks a bit skewed with the reddit enhancement suite's extra links at the top http://i.imgur.com/a2H3A.png

[–]dcnikon 5 points6 points ago

Font color is too light ...

[–]vwllss[S] 0 points1 point ago

I assume you're talking about the links? I'll darken them a little.

[–]lightleaks 3 points4 points ago

Looks really good, I like how the right sidebar information pops.

[–]dontgoatsemebro 3 points4 points ago*

Yeah, unfortunately almost half of the screen has been laid waste by it. Not wanting to be mean but this is an example of trying to fix something that wasn't broke.

I often browse with a split desktop, this is the result of the design changes.

The side bar is wider and extends all the way down. Browsing comments nearly half the screen is filled with the side bar which is empty.

Now if you look at the front page, the sidebar is unobtrusive, it doesn't even extend one full page down. On the photography subreddit scrolling down we've got three full pages of links, albeit useful, it's stuff that I've already read I don't need to see all that information every time I visit or when I'm scrolling down through comments. It's just in the way.

And fix the links! Across the entire site;

visited links = purple

Except, on this subreddit, where;

unvisited = purple

It's messing with my head man!

[–]vwllss[S] 0 points1 point ago

Not wanting to be mean but this is an example of trying to fix something that wasn't broke.

It wasn't broken, but I honestly think reddit is an ugly site. It looks like it got stuck in the 90s. Maybe we're used to it, but every time I tell a friend they always comment on how bad it looks.

The side bar is wider and extends all the way down. Browsing comments nearly half the screen is filled with the side bar which is empty.

That's a good point, I'll consider reverting the changes.

On the photography subreddit scrolling down we've got three full pages of links, albeit useful, it's stuff that I've already read I don't need to see all that information every time I visit or when I'm scrolling down through comments.

Honestly all the information there is essential simply to keep the noise down. We have Snapsort in the sidebar and still people ask "what's a decent compact?" I agree it's enormous and I never read it either, but we need it merely as a banner for newbies.

And fix the links! Across the entire site;

visited links = purple

Except, on this subreddit, where;

unvisited = purple

It's messing with my head man!

Yeah I think that was a CSS error on my part. Someone else screenshotted the purple links he saw and it looks nothing like the code I had entered.

[–]dontgoatsemebro 0 points1 point ago

Honestly all the information there is essential simply to keep the noise down.

Very true, and you're right in so far as it's probably a necessity. It would be nice if the sidebar disapeared after scrolling down though, if that's possible?

I disagree with reddit being an ugly site though! Even ignoring function over form, I think reddit is visually very clean and clear.

[–]xpostmanx 2 points3 points ago

Thanks. It looks much nicer! Could we perhaps expand on the subreddit list? /analog and /darkroom might be worthy of a mention?

[–]vwllss[S] 1 point2 points ago

There's so many photoreddits I'm thinking about making a separate "and more" link for any that aren't the biggest. For example, I really don't think /r/ToyCameras deserves its current spot but it's been there longer than I've been a mod so I left it for now.

[–]xpostmanx 1 point2 points ago

I concur. A comprehensive list of the various subreddits would be fantastic.

[–][deleted] ago

[deleted]

[–]vwllss[S] 0 points1 point ago

I didn't, he's the same alien as before.

[–][deleted] ago*

[deleted]

[–]vwllss[S] 0 points1 point ago

Something else I noticed is that the OP doesnt have a slightly different colored name like it used to.

Look now :)

[–]rogue 0 points1 point ago

I don't know if this was noted elsewhere but thought I'd mention it here... now that the current unvisited link color is the same as the background, the "/r/photography" link on top (between the Reddit image and tabs) is invisible until moused over or visited. This leaves visitors searching for a way to navigate out of a comments page.

[–]jkossen 2 points3 points ago*

Love it, except for the a:visited color (purple-ish). I'd make them a light-blue I think.

Thanks!

[–]vwllss[S] 0 points1 point ago

They were light blue, but someone complained that it was hard to read. They're gray now, probably my favorite so far but if not I'll revert back to light blue.

[–]jkossen 0 points1 point ago

Ah, there's always someone to complain, sometimes it's me ;-)

Thanks though, I think the gray looks very good!

[–]Highwinds 2 points3 points ago

Looking good, but I have a few comments about the design.

I think the CSS3 rounded corners are a tad too rounded. I find that 4px and 5px border-radius is much better.

I really like the letter press effect in the sidebar headings. However instead of having the text shadow pure white and pure black, try changing them to both extremely light and dark shades of blue. I've found that trying to match the background colour's hue makes for a more subtle yet effective highlight & shadow.

These are all minor details, so they're not really important. It won't stop me from enjoying this subreddit at all.

Overall great work lads!

[–]vwllss[S] 0 points1 point ago

I think the CSS3 rounded corners are a tad too rounded. I find that 4px and 5px border-radius is much better.

Hmm, think you might be right. But super-round corners is so web 2.0!

I really like the letter press effect in the sidebar headings. However instead of having the text shadow pure white and pure black, try changing them to both extremely light and dark shades of blue. I've found that trying to match the background colour's hue makes for a more subtle yet effective highlight & shadow.

I actually did try that briefly while setting it up, but I liked the 'punch' that the white outline gave. It'd be horrible anywhere else, but I thought for the header it brought necessary attention.

[–]Highwinds 0 points1 point ago

Web 2.0 is so 2011. :P

As long as you checked out different options, everything's cool! :)

[–]obviouslyCPTobvious 2 points3 points ago

Needs more lens flare?

[–]7-methyltheophylline 2 points3 points ago

Unfortunately, you've wasted half of the page on the sidebar, which people will read once and move on. The actual content, which I come here for, has been shafted for very little gain.

[–]KevZero 5 points6 points ago

Where do I nominate this CSS for "best subreddit design" award? This is very attractive. I haven't seen any issues so far. Way to go on giving us an aesthetic worthy of our subject matter.

[–]the2nafish 2 points3 points ago

I agree, this looks awesome!

[–]Chroko 1 point2 points ago

Preferences, uncheck:

[ ] allow reddits to show me custom styles

Don't take this personally, but every few months one of the minor Reddits decides to play with custom styles. It's not you specifically and I appreciate a mod that cares enough to try and customize the experience - but if you're trying to stay on top of dozens of Reddits, it just gets annoying after a while.

[–]jannne 1 point2 points ago

The new top bar is distracting. Sidebar looks nice though.

[–]vwllss[S] 1 point2 points ago

Is that any better?

[–]robertbobberson 1 point2 points ago

I dunno... I think it's the drop shadow on the text that doesn't look great. (Mac + Chrome)

Either make it deeper... or... kill it?

[–]jbphysreddit 0 points1 point ago

mac and chrome too - i'll agree with you here!

[–]vivalakellye 0 points1 point ago

I third this. (Mac + Chrome)

(I like the effect, it just doesn't exactly "go" with the rest of the design.)

[–]vwllss[S] 0 points1 point ago

Majority rule, I fixed it.

[–]vivalakellye 0 points1 point ago

You're sweet.

[–]spshlj 1 point2 points ago

Not a fan of the pink headers. I am on a mac. I like the old utilitarian css. Get off my lawn.

[–]vwllss[S] 1 point2 points ago

They're gray now. I think it's better.

[–]spshlj 1 point2 points ago

Wow, does that ever change things. I like it now. Please enjoy my lawn but don't step on my daffodils.

[–]IshanSaluja 1 point2 points ago

Wait. Something changed?

[–]vwllss[S] 1 point2 points ago

ಠ_ಠ

[–]IshanSaluja 1 point2 points ago*

I'm quite serious. I've been known to overlook details before.

Edit: Seriously speaking, I'd appreciate a brighter shade of blue for the unread links. Everything else looks pretty neat.

[–]vwllss[S] 0 points1 point ago

Edit: Seriously speaking, I'd appreciate a brighter shade of blue for the unread links.

Funny you say that, a lot of people are requesting darker.

I'm going to sleep.

[–]IshanSaluja 0 points1 point ago

haha, fair enough.

[–]jippiejee 1 point2 points ago

Looks pretty! The subreddit name next to the alien is a little small maybe, and I wouldn't mind a slightly darker grey for the visited links. But well done.

[–]RedditGoldDigger 1 point2 points ago

I just want to say it looks great, thanks for your hard work!

[–]RizzoFromDigg 0 points1 point ago

The gutter on the left is too narrow, the one between the main content and the sidebar is too wide. Split the difference.

[–]foreverinane 0 points1 point ago

ack, it looks like I've already read everything... unread links should always be brighter than read links, IMO.

[–]MWMWMWMWMW 0 points1 point ago

When you say that some issues are "specific to Macs", do you mean specific to Safari? If that's the case, Safari is available for Windows if you need it for testing.

[–]vwllss[S] 0 points1 point ago

Chrome on Macintosh. I have no idea why it would be different, but it was.

[–]BokehBurgher 0 points1 point ago

This looks very nice. I think an added piece of functionality would be a set of posts compiling all the tips/tricks/gotcha's/diy's for the main cameras that people buy. These would be things not readily available through user manuals. You could have 1 post for each type of camera. It would just be a running compilation that was updated as new tidbits came in. So you could have one's for Pentax, Canon, Nikon, Leica, Fujifilm, etc.. just my two cents. Like what you did with the CSS looks very professional, and very easy to navigate.

[–]mackmgg 0 points1 point ago

When posts are nested enough, replying gets somewhat screwed up. The text boxes don't change sizes, but for some reason no scroll bars show up. The only way to hit "Save" is to use the arrow keys to get to text at the beginning.

Example

Also, with links being gray, you can barely tell they're links inline with regular text. Other than that, this new theme looks great!

[–]robeaux 1 point2 points ago

Good job! One of the better looking themes on reddit. The only thing I can think of is that the reddit alien is a bit far to the right, and the 'PHOTOGRAPHY' subreddit link text next to it is a little small. Maybe increase the font size on the photography and/or move the reddit alien over to the left a bit? Otherwise, looking good, Billy Ray!

[–]spisska 0 points1 point ago

Nice new look, good job.

Don't sweat that it doesn't work on IE. It doesn't work on a typewriter either.

The difference is that a good typewriter is a great example of engineering.

IE is more like smallpox -- it's something we had to get through, and we're better for having got through it. But the fact that it bothers us no more is a great boon for the future of humanity.

Thanks to the mods for keeping this community a good one.

And a Happy New Year to everyone here.

[–]canon-shooter 1 point2 points ago

Links visited in threads are a grey color that almost matches the standard text. Can we please change this to something not so close in color.

Safari 5.1.2 on OS X 10.7.2

[–]Starlightbreaker 1 point2 points ago

looks weird with RES on night theme.

Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2012 reddit inc. All rights reserved.

REDDIT and the ALIEN Logo are registered trademarks of reddit inc.

π Rendered by PID 29479 on app-136 running 86c9e1d.