CSS Change – Changes to default thumbnails, expando icons, and upcoming change to comments pages for logged out users from SEO

https://www.reddit.com/r/cssnews/comments/51u4sh/css_change_changes_to_default_thumbnails_expando/

created by madlee on 08/09/2016 at 22:49 UTC*

0 upvotes, 45 top-level comments (showing 25)

New default thumbnails

We've updated the default thumbnails that are shown for self posts and links without image thumbnails. All of the thumbnail images are now the same size ~~(70x70)~~ (70x50). In about a week, we're planning on adding HDPI ("retina") versions of these, which we expect to conflict with any custom thumbnail CSS. If you're currently overriding the default thumbnail styles with CSS, you'll need to **explicitly set the `background-size` property** to avoid issues.

New expando icons

We're also updating the expando icons to a new style. Similarly, we're planning to add HDPI versions of these in about a week. If you're styling the expando icon with CSS, you'll need to **explicitly set the `background-size` property** to avoid issues.

Upcoming change to comments pages for logged out users from SEO

We’re making some changes to comments pages for logged out users coming into Reddit from search engines. The primary change is the inclusion of a new listing of posts from the current subreddit in the comments section.

The new HTML structure for this page looks roughly like this:

<div class="commentarea">
  <div class="sitetable nestedlisting">
    <!-- normal comments markup -->
  </div>
  <!-- new divider with a button to jump down to the rest of the comments -->
  <div class="seo-comments spacer">
    <a class="c-btn c-btn-primary" href="#bottom-comments">More comments</a>
  </div>
  <div class="spacer">
    <h1 class="seo-comments">More from r/cssNews</h1>
    <div class="sitetable linklisting">
      <!-- normal link listing markup -->
    </div>
  </div>
  <div id="bottom-comments">
    <div class="spacer">
      <h1 class="seo-comments">Comments, continued...</h1>
    </div>
    <div class="sitetable nestedlisting">
      <!-- normal comment listing markup -->
    </div>
  </div>
</div>

You can view the changes now by adding `?feature=seo_comments_page` to the end of a url, like this!

If you have any questions/comments about these HTML/CSS changes, please ask them here and I'll be happy to help!

Comments

Comment by Antabaka at 08/09/2016 at 23:57 UTC

59 upvotes, 3 direct replies

Why was there not a test for this? Even a heads up? All of these issues could have been easily fixed given an absolutely tiny opt-in beta.

Comment by srs_house at 09/09/2016 at 00:47 UTC

55 upvotes, 1 direct replies

So, while everyone else is focused on the shoddily crafted new graphics, can we talk about the proposed changes?

Because this looks horrible.

Comment by manguybuddydude at 09/09/2016 at 00:04 UTC

38 upvotes, 1 direct replies

Please give us the option to view the old icons. I appreciate the intent, but would much rather have the old icons.

Comment by creesch at 09/09/2016 at 05:44 UTC*

25 upvotes, 1 direct replies

Are you guys deliberately trolling us now? Dropping a change like this without prior notice which you **know** will break styling for a lot of subreddits.

Seriously, this is not ok.

edit:

Also, you guys even forgot transparency on some of the expando icons...

Comment by Jesus_Faction at 09/09/2016 at 00:57 UTC

24 upvotes, 0 direct replies

looks bad, i guess its up to RES to fix it

Comment by [deleted] at 09/09/2016 at 03:11 UTC*

20 upvotes, 0 direct replies

What middle school did you recruit from for your UI team?

Comment by Veritas__Aequitas at 08/09/2016 at 23:10 UTC

17 upvotes, 1 direct replies

Not sure if it is like this on all browsers but with firefox, in its expanded state, the button is cut off on the right and on the bottom: http://i.imgur.com/yHbLEm2.png

Comment by B9AE2 at 15/09/2016 at 01:56 UTC

13 upvotes, 1 direct replies

Those SEO changes are absurd. It looks horrendous and it's incredibly jarring to have the comments section broken in half by BS I don't care about. I also don't really appreciate trying to be forced to log in just to avoid it. Fortunately it's easy enough for me to block the elements, but that doesn't make the changes any less horrible. I shouldn't have to add rules to a css filter to remove spam from the comments section.

Comment by he_must_workout at 08/09/2016 at 23:32 UTC

29 upvotes, 1 direct replies

Can you give users the option to revert? Icons look like they were created in paint by a middle schooler

http://imgur.com/a/HhZLE

Comment by 1point618 at 09/09/2016 at 13:46 UTC

13 upvotes, 1 direct replies

Why was this not announced to moderators before it happened, and why did you not give us a way to test it on our subreddits before it went live for users?

We've been promised time and time again that would happen for all new changes that affect us.

/u/deimorz and /u/chtorrr can you help out here? How did the process go so wrong yet again?

Comment by [deleted] at 08/09/2016 at 22:53 UTC

13 upvotes, 2 direct replies

Thank god you are adding HiDPI ones because it looks awful right now

http://imgur.com/a/QUf4o

Comment by kwwxis at 09/09/2016 at 01:16 UTC*

10 upvotes, 0 direct replies

The thumbnail icons feel kind of large to me... maybe it'd be better if they were about the same size as the thumbnail icons in /r/showerthoughts?

Comment by 13steinj at 09/09/2016 at 04:09 UTC

13 upvotes, 1 direct replies

I don't really *care* about the icons but I must say I prefer the old ones.

However, the SEO stuff just looks horribly designed to me.

Comment by jsun at 15/09/2016 at 07:05 UTC

10 upvotes, 1 direct replies

The "More from" change is terrible. I prefer to browse Reddit while logged out. The related links mixed in with the comments is really jarring. I have a hard time believing that someone actually thought this was a good idea.

Reddit, you're supposed to be one of the good guys. I don't want to be forced to be logged in or have an account to have a good experience. I hope you guys remove this.

Also, don't go too hard on the people who made this change when you figure out how bad it actually is. Just fix it, pretend like it never happened, and move on.

Comment by Pluckerpluck at 09/09/2016 at 08:34 UTC

21 upvotes, 2 direct replies

Seriously... round icons! Everything on this damn website is either rectangular or rectangular with rounded edges. The round icons look completely ridiculous against the rectangular thumbnails.

And why the hell is NSFW now 18+? Before I could safely avoid NSFW while at work without disabling them. **Now the icon itself is basically NSFW!!!** That's just what I need. A bunch of random 18+ icons anyone can obviously see me looking at.

And finally, why make them bigger without doing a decent job about it? Was this even tested?

Comment by turikk at 09/09/2016 at 00:44 UTC

8 upvotes, 1 direct replies

I know this might be outside the scope of this, but... is there a preview branch or thread for these CSS changes that I'm not aware of? It would be great to be able to vet or compare these changes before they went live.

I don't see any huge issues today but it gives me some concern for the future.

Comment by RandommUser at 09/09/2016 at 08:37 UTC

7 upvotes, 0 direct replies

Can you at least add

Background-color: transparent; 

to the expando or change it to

background: url() transparent; 

??? Why have the images be .png when it does still have a white background by default

--------------------------------------------------------------------------------

For mods, as a temp fix:

.expando-button { Background-color: transparent; }

If there are problems with some plugins do tell.

Comment by ckaustro at 14/09/2016 at 20:08 UTC

8 upvotes, 0 direct replies

I browse direct to reddit, usually without logging in. The new More From area looks absolutely terrible.

Comment by IdRatherBeLurking at 09/09/2016 at 20:07 UTC*

6 upvotes, 0 direct replies

/u/spez and /u/powerlanguage, I thought that there was going to be better communication this time?

When you're changing something that has the ability to affect a large number of moderators, you *need* to give people a heads up before doing so.

It's hard to trust what the admins say at this point, and that sucks.

Comment by Fairchild660 at 09/09/2016 at 03:21 UTC

12 upvotes, 1 direct replies

The new default thumbnails are definitely sleeker, but the colour doesn't work at all. Why not make them #cee3f8;[1] the same colour as the header? It's just as neutral, but doesn't look so drab.

1: https://i.imgur.com/zyUSXxK.jpg

The link icon needs to be bolder, too, so it doesn't look so unbalanced next to the text post thumbnails / expandos.

Comment by qtx at 09/09/2016 at 10:34 UTC

5 upvotes, 1 direct replies

Why no transparent background? Or svg? Or maybe give us the ability to use css filters.

Comment by [deleted] at 08/09/2016 at 23:00 UTC

9 upvotes, 1 direct replies

This might be a stupid question, but is there any way to completely disable the expando icons?

Comment by Vusys at 08/09/2016 at 23:07 UTC

3 upvotes, 1 direct replies

When the new SEO stuff goes live, will there be a way to force it for testing/ development purposes on when you're logged in?

Comment by kwwxis at 09/09/2016 at 03:49 UTC

5 upvotes, 0 direct replies

I just noticed that the SEO comments change introduces another element with the id `#siteTable` into the comments page such that there are two elements with that id: `.content[role=main] > #siteTable` and `.commentarea > .spacer > #siteTable`. Please fix, thank you.

Comment by totallypregnant at 22/09/2016 at 02:07 UTC

3 upvotes, 0 direct replies

Upcoming change to comments pages for logged out users from SEO

This change is truly awful. My first encounter with it had me thinking there were only three comments in the thread and the 'more from' section was the end of the comments page.

In my opinion, if its important this section exist, fewer comments should be shown by default then have this section at the end underneath the usual 'load more comments' link.

Again, really awful choice as it is now.