Subreddits using CSS on old Reddit should be aware of an upcoming change that will standardize ads across Reddit platforms. Starting next week, promoted posts (`.link.promoted`) will appear in feed. This may impact your styling if you have a custom style applied to (`.link.promoted`).

As early as next week, we will begin releasing an update to awards on old Reddit. In summary, we will be replacing the “gilding-bar” span on each post / comment with a similar “awardings-bar”, including moving the award icons into <img> tags contained within <span> tags.

​

More specifically, the “gilding-bar”, which used to look like this:

<span class="gilding-bar">
    <a>
        <span class="gilded-gid1-icon" data-count="7">7</span>
    </a>
    <a>
        <span class="gilded-gid2-icon" data-count="2">2</span>
    </a>
    <a>
        <span class="gilded-gid3-icon" data-count="1"></span>
    </a>
</span>

Will transform to look like this:

<span class="awardings-bar" >
    <a class="awarding-link" data-award-id="gid_3" data-count="1">
        <span class="awarding-icon-container">
            <img class="awarding-icon" src="...">
        </span>
    </a>
    <a class="awarding-link" data-award-id="gid_2" data-count="2">
        <span class="awarding-icon-container">
            <img class="awarding-icon" src="...">
        </span>2
    </a>
    <a class="awarding-show-more-link" >&amp; 7 more</a>
</span>

​

The accompanying CSS for the new element will be:

.awardings-bar {
   margin-left: 4px;
   &:empty {
       margin: 0;
   }
}
.awarding-link {
   margin-right: 4px;
   &.hide-award {
       display: none;
   }
}
.awarding-icon-container {
   display: inline-block;
   height: 12px;
   width: 12px;
   margin-right: 2px;
}
.awarding-icon {
   max-width: 12px;
   max-height: 12px;
   vertical-align: -2px;
}

​

If you have any questions or feedback on how the change has affected your CSS, let us know!

On June 19 we’re launching original content (OC) tags feature in old Reddit.

From a CSS perspective, OC tags work almost identically to NSFW and Spoiler tags. You can expect to see the following changes:

• A data-oc attribute will be added to the top level link div. It will be true or false depending on whether a post marked as OC.

• A posts marked as OC will add a new span element right after a post title (but before a flair if any):

  <span class="oc-tag" title="This post is marked as Original Content [OC]">OC</span>

  The CSS styles of the tag will be:

  .oc-tag {
    background: #0079D3;
    border-radius: 2px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    margin-right: .5em;
    padding: 0 2px;
    vertical-align: middle;
    white-space: nowrap;
  }

• A new div will be added to the flat-list buttons div, which is visible to mods and used to toggle the OC status of posts.

In the next couple of days we will be rolling out a change to the DOM for our submit pages to make clearer the effects of certain post submissions. The DOM that will be affected is as follows:

<div class="roundfield info-notice">
  ${text_with_links(_("please be mindful of reddit's %(content_policy)s and practice %(good_reddiquette)s."),
      content_policy=dict(
        link_text=_("content policy"),
        path="/help/contentpolicy",
        target="_blank"),
      good_reddiquette=dict(
        link_text=_("good reddiquette"),
        path="/wiki/reddiquette",
        target="_blank"),
  )}
</div>

An example of how the DOM will look once the changes land are shown below:

 <div class="roundfield info-notice">
  <div>
    ${text_with_links(_("please be mindful of reddit's %(content_policy)s and practice %(good_reddiquette)s."),
      content_policy=dict(
        link_text=_("content policy"),
        path="/help/contentpolicy",
        target="_blank"),
      good_reddiquette=dict(
        link_text=_("good reddiquette"),
        path="/wiki/reddiquette",
        target="_blank"),
    )}
  </div>
  <div class="saving-to-reddit-notice" style="display:none">
    ${_("Posting this link saves the image or gif to reddit.")}
  </div>
 </div>

Update IV (5/8/18): The changes have now gone out to 100% of users! We will continue to monitor feedback and issues.

Update III (4/19/18): We've rolled out these changes to about half of our users now, woo! Will continue to monitor to make sure all looks well before going 100%.

Update II (4/5/18): Changes are out to a small percentage of users!

Update I (4/4/18): We plan on rolling out these changes starting tomorrow, 4/5/18

Hi folks,

Next week, we will be rolling out a few gold-related changes that will likely affect your subreddit’s CSS. Briefly, they are:

• Show the "give gold" button on post menus in subreddits and the home feed
• Show the gold coin icon next to gilded posts in subreddits and the home feed
• Change the font color of the "give gold" button

See what these changes look like here!

Each of these changes will affect only a small percentage of users initially, before rolling this out to more people. These changes will take effect towards the end of next week. I will update here with an edit when that happens.

To support these CSS updates, you may see changes to the posts’ HTML that mirror what you might see on a comments page.

What was …

<div class="link">
 ...
 <p class="tagline">
   ...
   <a class="author">...</a>
 </p>
 ...
 <ul class="flat-list buttons">
   <li class="first">...</li>
   <li class="share">...</li>
   <li class="save-button">...</li>
   <li>...</li>
   <li class="report-button">...</li>
   <li class="crosspost-button">...</li>
 </ul>
 ...
</div>

… will become …

<div class="link">
 ...
 <p class="tagline">
   ...
   <a class="author">...</a>
   <a>
     <span class="gilded-icon">x3</span>
   </a>
 </p>
 ...
 <ul class="flat-list buttons">
   <li class="first">...</li>
   <li class="share">...</li>
   <li class="save-button">...</li>
   <li>...</li>
   <li class="give-gold-button">
     <a class="give-gold ...">...</a>
   </li>
   <li class="report-button">...</li>
   <li class="crosspost-button">...</li>
 </ul>
 ...
</div>

Meanwhile, to support styling of the “give gold” button, some users will see a new class applied: “gold-give-gold”. In order to overwrite the default styling of this button, you can select the element with CSS selector “.button .give-gold.gold-give-gold”.

Let me know if you have any questions!

Hi folks,

Starting early next week, we will begin opening up the redesign to more users as mentioned in this post. In order to give people the option to opt in and toggle back & forth easily, we will be adding a small icon in the top left corner of the page that will affect CSS that looks like this. The icon will appear on all aggregate pages as well as subreddit listings and comment pages. We’re aiming the release of this for Monday (4/2). The DOM updates are as follows:

<div id="sr-header-area">
  <div class="width-clip">
    <div class="redesign-beta-optin">
      ${_("TRY THE REDESIGN")}
    </div>

    ${thing.my_subreddits_dropdown}

    <div class="sr-list">
       ...
    </div>

    ...
  </div>
</div>

The div.redesign-beta-optin is the newly added element for the optin. The updated CSS is as follows:

#sr-header-area .redesign-beta-optin {
    background-color: #FF4500;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    padding-right: 20px;
    position: relative;
    text-align: center;
    width: 138px;

    // The dark red square to the right
    &:before {
        background-color: #C53500;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
    }

    // the icon
    &:after {
        content: "";
        display: block;
        height: 14px;
        position: absolute;
        right: 3px;
        top: 2px;
        width: 14px;
        .hdpi-bg-image(@1x: url(../icon_planet.png),
                       @2x: url(../icon_planet_2x.png));
    }
}

Edit: This will only be shown to users who have explicitly opted out of the redesign, or are eligible to optin to the redesign.

If you've made changes to the display of the crossposting modal preview, please be aware that we will be changing the CSS class from crosspost-preview to crosspost-thing-preview later today. As we don't expect that many communities have styled this yet, we hope that it is a low impact change. Thanks, and sorry for the inconvenience.

We will be releasing a new update that will attach video durations to post preview images. Initially this was rolled out without notice and reverted due to issues with toolbox that we caused due to our implementation, however, we have reached out to the toolbox devs and we're confident that this should not cause issues moving forward when this is redeployed. I'd also like to apologize for the lack of advanced notice for this feature, this is something that we will rectify moving forward. We're aiming to release this feature this Thursday (12/7).

An example of where this DOM element is being added can be seen below (the div with class duration-overlay):

<a class="thumbnail invisible-when-pinned may-blank " data-event-action="thumbnail" href="/r/WWII/comments/7godpy/i_think_i_just_used_up_all_my_supply_drop_luck/" data-href-url="/r/WWII/comments/7godpy/i_think_i_just_used_up_all_my_supply_drop_luck/" data-inbound-url="/r/WWII/comments/7godpy/i_think_i_just_used_up_all_my_supply_drop_luck/?utm_content=thumbnail&amp;utm_medium=new&amp;utm_source=reddit&amp;utm_name=v.redd.it" rel="nofollow">
    <img src="//b.thumbs.redditmedia.com/2nVV-kMlNowL_yDw-WKDCu6ciQDpBBLYX9gedAriGRs.jpg" width="70" height="39" alt="">
    <div class="duration-overlay">0:30</div>
</a>

We will also be adding a new icon to indicate native reddit video posts on the same line as the title and flair (the img tag).

<p class="title">
    <a class="title may-blank " data-event-action="title" href="/r/funny/comments/7hhq4j/woman_is_scared_in_vr_and_grabs_wrong_end_of_dog/" tabindex="1" data-href-url="/r/funny/comments/7hhq4j/woman_is_scared_in_vr_and_grabs_wrong_end_of_dog/" data-inbound-url="/r/funny/comments/7hhq4j/woman_is_scared_in_vr_and_grabs_wrong_end_of_dog/?utm_content=title&amp;utm_medium=hot&amp;utm_source=reddit&amp;utm_name=v.redd.it" rel="">Woman is scared in VR and grabs wrong end of dog</a>
    <span class="domain">
        <img src="/static/snoo-logo.svg?v=1512433810.97">(<a href="/domain/v.redd.it/">v.redd.it</a>)
    </span>
</p>

Edit: Added some words to make it clear that this was not an issue caused by toolbox

EDIT: As of 12/6/2017 @ 3:30 PM PST these changes went live. Users can now close the chat window and there's an icon next to the envelope to initiate the chat experience. Only users in the chat beta will see this icon.

As many of you know - chat has been in beta for the last couple of months. One of the most popular requests is being able to hide the chat window from the bottom right corner of the page. Early next week, we will be adding a chat icon next to the envelope icon in the header user menu which will allow users to close the chat window completely and re-open it by clicking the new icon. If you have customized the header menu for your community, you may be impacted by this change.

Please note - only users who have chat will see the chat icon. Users who are not yet part of the chat beta will not be impacted by this change. Chat is currently only available to a small percentage of users, so this change will not have a big impact initially.

##What’s changing next week:

• Adding a new chat icon and chat badge count to the user menu
• Allowing users to close chat completely from the bottom right corner of the website
• Allowing users to open chat from the chat icon

##What’s it look like?

• This is the chat icon
• This is the chat icon with an unread chat message

##Sample

<div id="header-bottom-right">
<span class="user"><a href="/user/jleeky/">jleeky</a>&nbsp;(<span class="userkarma" title="post karma">20,427</span>)</span>
<span class="separator">|</span>

<a title="new messages" href="https://www.reddit.com/message/messages/" class="havemail" id="message">messages</a>
<a href="https://www.reddit.com/message/messages/" class="message-count">2</a>
<span class="separator">|</span>

<a title="new notification!" href="https://www.reddit.com/notification/unread/" class="havemail" id="inbox">messages</a>
<a href="https://www.reddit.com/notification/unread/" class="inbox-count">2</a>
<span class="separator">|</span>

<a href="https://www.reddit.com/chat/" data-message-type="expand.chat" target="chat-app" id="chat" class="active">chat messages</a>
<a href="https://www.reddit.com/chat/" data-message-type="expand.chat" target="chat-app" id="chat-count" class="message-count">2</a>
<span class="separator">|</span>

<a title="no new mod mail" href="https://wwww.reddit.com/message/moderator/" data-event-action="pageview" data-event-detail="modmail" class="nohavemail access-required" id="modmail">mod messages</a>
<span class="separator">|</span>

<a title="new mod mail!" href="https://mod.reddit.com/" data-event-action="pageview" data-event-detail="modmail" class="havemail access-required" id="new_modmail">mod messages</a>
<span class="separator">|</span>

<ul class="flat-list hover">
    <li><a href="https://www.reddit.com/prefs/" class="pref-lang choice">preferences</a></li>
</ul>
<span class="separator">|</span>

<form method="post" action="https://www.reddit.com/logout" class="logout hover">
    <input type="hidden" name="uh" value="[censored]">
    <input type="hidden" name="top" value="off">
    <input type="hidden" name="dest" value="/"><a href="javascript:void(0)" onclick="$(this).parent().submit()">logout</a>
</form>
</div>

Hey Everyone!

In addition to this DOM change we deployed out a change that shows the top-level comment box on comment pages for logged out users. When clicking on the box, the user will be prompted to signup/login. The comment box will show up under <div class="commentarea">

The HTML for the new comment box looks like this:

<section class="infobar commentsignupbar">
  <div class="commentsignupbar__container">
    <a href="/login" class="login-required commentsignupbar__link-wrapper">
      <textarea class="commentsignupbar__textarea"></textarea>
      <div class="commentsignupbar__textarea-above">
        <h2 class="commentsignupbar__title">Want to add to the discussion?</h2>
        <p class="commentsignupbar__desc">Post a comment!'</p>
        <div class="commentsignupbar__cta-container">
          <span class="c-btn c-btn-primary commentsignupbar__cta-button">Sign up</span>
        </div>
      </div>
    </a>
  </div>
</section>

A CSS change we will be implementing on Monday is adding resize: none; to .commentsignupbar__textarea.

Thanks!

Hey Everyone!

As mentioned in this ModSupport post, we deployed a new sign up banner for logged out users on all listing pages. The bar will show up as the top item in the main content div: <div class="content" role="main">

The HTML for the new banner will look like this:

<section class="infobar listingsignupbar">
  <a href="/login" class="login-required listingsignupbar__container">
    <h2 class="listingsignupbar__title">Welcome to Reddit</h2>
    <p class="listingsignupbar__desc">the front page of the internet.</p>
    <div class="listingsignupbar__cta-container">
      <span class="c-btn c-btn-primary c-pull-left listingsignupbar__cta-button">Sign up</span>
      <p class="listingsignupbar__cta-desc">and subscribe to one of thousands of communities.</p>
    </div>
  </a>
  <a href="#" class="listingsignupbar__close" title="close">&times;</a>
</section>

Apologies for not posting about this change earlier before the banner was deployed. We'll be implementing a few fixes that will hopefully clean up some of the CSS issues with the banner.

Thanks!

Edit: We're going to be implementing one change for the signup banner on Monday. We're going to be marking the background for .infobar.listingsignupbar as !important E.g.:

.infobar.listingsignupbar {
    background: url("../listingsignupbar-orbit-2.png") left top no-repeat, url('../listingsignupbar-orbit-1.png') center right no-repeat #FEFBDA !important;
}

Early next week we will be splitting the inbox into Notifications and Private Messages. If you have customized the header user menu for your community you may be impacted by this change.

What’s changing on Reddit:

• Adding a new notification icon and notification badge count
• Messages are in the messages tab separate from the notifications tab
• Send a Private Message is moved under the messages sub menu

Sample below:  

<div id="header-bottom-right">
    <span class="user"><a href="/user/jleeky/">jleeky</a>&nbsp;(<span class="userkarma" title="post karma">20,427</span>)</span>
    <span class="separator">|</span>

    <a title="new messages" href="https://www.reddit.com/message/messages/" class="havemail" id="message">messages</a>
    <a href="https://www.reddit.com/message/messages/" class="message-count">2</a>
    <span class="separator">|</span>
    
    <a title="new notification!" href="https://www.reddit.com/notification/unread/" class="havemail" id="inbox">messages</a>
    <a href="https://www.reddit.com/notification/unread/" class="inbox-count">2</a>
    <span class="separator">|</span>
    
    <a title="no new mod mail" href="https://wwww.reddit.com/message/moderator/" data-event-action="pageview" data-event-detail="modmail" class="nohavemail access-required" id="modmail">mod messages</a>
    <span class="separator">|</span>
    
    <a title="new mod mail!" href="https://mod.reddit.com/" data-event-action="pageview" data-event-detail="modmail" class="havemail access-required" id="new_modmail">mod messages</a>
    <span class="separator">|</span>

    <ul class="flat-list hover">
        <li><a href="https://www.reddit.com/prefs/" class="pref-lang choice">preferences</a></li>
    </ul>
    <span class="separator">|</span>

    <form method="post" action="https://www.reddit.com/logout" class="logout hover">
        <input type="hidden" name="uh" value="[censored]">
        <input type="hidden" name="top" value="off">
        <input type="hidden" name="dest" value="/"><a href="javascript:void(0)" onclick="$(this).parent().submit()">logout</a>
    </form>
</div>

Today we deployed a DOM change that affects posts. We added a wrapping div with the class name top-matter to posts.

<div class="top-matter">
    <p class="title>
        <a />
    </p>
    <!-- existing post dom -->
</div>

I'd also like to apologize for not releasing this information until after the feature was deployed. We try our best to notify the mods ahead of time regarding changes like these, we will try harder in the future.

edit: The commit that contained this change was reverted due to an issue with ads on Firefox. Therefore, this is no longer valid. We will update this post when it is redeployed out.

edit 2: This change will be getting deployed again on Monday (6/26) morning.

edit 3: This has been redeployed back out.

On Monday next week (2017-05-15) we’ll be adding a view number to posts that will be displayed to mods and OP in the sidebar infobox.

It will look like this.

This change will add the following elements to the linkinfo div in the sidebar of comments pages:

<div class="views">
    <span class="view-count">709.9k</span>
    <span class="unit">views</span>
</div>

If you have styled the linkinfo div you may need to make changes to your subreddit CSS.

See the r/modsupport post for more details on this feature

Tomorrow we’re launching spoiler tags to all subreddits. You can read the r/modnews post here.

From a CSS perspective, spoiler tags work almost identically to NSFW tags. If your subreddit has spoilers enabled, you can expect to see the following changes:

• A spoiler class will be added to the top level link div. We currently don’t do any styling using this selector, but you are welcome to.
• A new div will be added to the flat-list buttons div, which is visible to mods and OP and used to toggle the spoiler status of posts.
• A post marked as a spoiler will add a new <li> element to the beginning of the flat-list buttons div with the class spoiler-stamp stamp.
• Thumbnails for spoiler posts will have the class thumbnail spoiler.
• Spoiler post previews will be obscured using the same interstitial overlay as NSFW posts. As with NSFW, we ask that you do not alter these overlays.

You can see some example spoiler posts in r/powerlanguagetest

Hello mods!

Back in June we ran an experiment that changes the promoted post appearance for all users. This change modifies the background of promoted posts and more clearly marks them as promoted. We will be updating the promoted post this week to reflect the new design.

Here’s a link to what the new promoted posts will look like for you to test: https://www.reddit.com/r/AMA/?feature=promoted_links_in_feed_top_grey

We do not anticipate that this will break any custom css, but wanted to announce it anyways! This change will be going live at some point tomorrow (01/12/2017).

We've been working on the new version of modmail (see r/modmailbeta) and plan to allow subreddits to start enrolling themselves soon. If you mod a subreddit that is enrolled in the new modmail, you'll start seeing a new icon in the header area.

This is added as a new a tag in the header-bottom-right div (alongside the legacy modmail icon) with id="new_modmail" and class="havemail" or class="nohavemail".

We've updated our CSS to incorporate this change and made some tweaks to the existing modmail selector to accomodate the new icon:

#modmail, #new_modmail {
    position: relative;
    top: -2px;
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
    height: 16px;
    margin-bottom: -6px;
}

#modmail {
    width: 16px;
}

#new_modmail {
    width: 13px;
}

#new_modmail.havemail {
    background-image: url(sprite-reddit.6Om8v6KMv28.png);
    background-position: -102px -1435px;
    background-repeat: no-repeat;
}

#new_modmail.nohavemail {
    background-image: url(sprite-reddit.6Om8v6KMv28.png);
    background-position: -126px -1323px;
    background-repeat: no-repeat;
}

About two weeks ago we changed the default thumbnail images and expando icons. In the announcement post, I mentioned that we would also be pushing out HDPI (hi-res) versions of these images. We are currently planning on deploying those on Thursday 9/29. If your subreddit uses the default thumbnails/icons or has them disabled, you don't need to worry about anything.

If you have customized the icons for either of these elements, you'll need to explicitly set the background-size property on those elements. The high-res images are bundled into a spritesheet (the same way the existing low-res images are) which is then scaled down with background-size and positioned with background-position. The new CSS structure looks roughly like this:

.thumbnail.default {
    background-image: /* url to a spritesheet */
    background-position: /* x and y offset */
}

@media
only screen and (min-resolution: 2dppx),
only screen and (-webkit-min-device-pixel-ratio: 2) {
    .thumbnail.default {
        background-image: /* url to a spritesheet */
        background-position: /* x and y offset after scaling */
        background-size: /* width and height to scale the background image */
    }
}

If you don't use a spritesheet, you'll generally just want to set the background-size property to equal the width and height at which you want your image to display. If you use a spritesheet and don't have hi-res versions of your art assets, you'll probably want to set the background-size property equal to the width and height of the spritesheet itself.

It's important to note that if your computer does not have a high-res display, it's possible that your images could look fine but be broken for other users. If you aren't able to check, leave a comment here and I'd be happy to take a look for you.

You can see the changes right now by adding ?feature=show_new_icons to the end of any URL. I'll post an edit here when the changes have gone out. Thanks!

EDIT: This change has been applied!

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!

TL;DR - Default thumbnail and expando icons are changing now, with hi-res versions coming next week. Update your css if you have custom styles for either of these. Also, there's a new version of the comments page that logged-out users from SEO will see.

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

Hello mods!

In the next few days we will be running an experiment that changes the tagline for 1% of logged in & logged out users.

Here’s what the old tagline and domain look like.

Here’s what the new tagline will look like.

Here are the html change you should be aware of:

<p class="tagline frontpage-tagline-css">
    <a href=“someLink” class="subreddit hover may-blank">r/aww</a> 
    <span class="bullet">•</span>
    <time title="Wed Aug 31 21:02:17 2016 UTC" datetime="2016-08-31T21:02:17+00:00" class="live-timestamp">3h</time>
    <span class="bullet">•</span>
    <a href=“someLink” class="author may-blank id-t2_10f3ur">dogbreathphoto</a>
    <span class="userattrs"></span>
    <span class="bullet">•</span>
    <a href=“someLink” class="new-domain">imgur</a>
</p>

Basically we are just adding a span containing a • in between each item, and adding the frontpage-tagline-css class to the parent <p>.

Though the domain link will not be visible by default, the .domain selector will remain on the page, as well as an <a> tag, so as to not disrupt any css attached to either selector.

We do not anticipate that this will break any custom css, but wanted to announce it anyways! This change will be going live at some point today (09/06/2016).

Edit: spelling.

First, go check out the announcement post over in r/beta.

I'll steal part of the the TL;DR from that post:

• Media previews auto-expand on comments pages
• New user preferences to control media previews
• NSFW interstitial
• New icons

With all of these UI changes come some HTML and CSS changes that may be relevant to your interests.

New styles for expando button

All types of expandos now share the same default styling. The width, height, and margin properties have changed slightly, so if you have custom expando icons, you may need to explicitly declare these properties in your stylesheet.

New type of expando content

We've added a new type of expando content, preview images. Whenever a post links directly to an image, we'll display the image inline in the expando. The big difference here is that the content is not in an <iframe>. The structure for these previews will look something like this

div.expando
  div.media-preview
    div.media-preview-content (used for positioning)
      a (links to source)
        img.preview

New UI for NSFW expandos in non-NSFW subreddits

We've also added some new UI for handling NSFW content. There are currently two user preferences that affect whether or not users will see NSFW content.

1. (over 18) I am over eighteen years old and willing to view adult content
2. (hide NSFW images) Hide images for NSFW/18+ content

The second preference only applies if the first is also enabled. For users that have both of these preferences enabled, we will show a new interstial prompting users to click to expose the NSFW content. This will generally only be shown in non-NSFW subreddits and listing. In other words, if you are in a NSFW subreddit, you won't see this.

We're asking that you do not alter the style of this interstitial.

Let me know if you have any questions regarding these new features!

This is a pretty tiny change. We've added a couple of properties from the upcoming Compositing and Blending module of CSS to reddit's CSS filter.

Happy hacking

If you have previously been using CSS hacks to add custom report reasons for your subreddit, this is for you!

We're currently beta testing a new feature called subreddit rules and we're shipping some updates to the report form along with it. These updates include some changes to the HTML of the report form along with some additional css classes.

What has changed

1. On the form element itself, we've dropped the report-action-form class and added a new subreddit-report-form class.

2. In the top right corner of the new form, there is a new element, an a tag with the action-icon and action-icon-info classes. If a subreddit has rules set up, this will link to their rules page. Otherwise it will link to the reddit content policy page. These css classes are not specific to the report form, so if you do anything with this element, scope the rules to the report form (e.g. .subreddit-report-form .action-icon-info { ... }). Please do not hide this or otherwise make it inaccessible.

3. The reason-prompt element is now a div instead of a span.

4. The ol element containing the report reasons now has the report-reason-list class.

5. Each li element in the list now has the report-reason-item class.

6. The content of each li that appears to the right of the radio inputs is now wrapped in a div with the report-reason-display class. For normal rules this is the text label, but the select menu for subreddit rules and the text input for the Other option are also wrapped in this element, so keep that in mind when applying styles.

7. The buttons at the bottom are now wrapped in a div with the c-submit-group class.

How to test

You can turn on beta testing to see the new report form styles. You can also see the new report form styles without turning on beta by using the beta subdomain, e.g. https://beta.reddit.com

If you have any questions/comments about the new feature, please leave them in the beta announcement post. If you have any questions about the html/css changes, let me know here!

We've added a new class .reddit-infobar that will replace .infobar in certain places. .reddit-infobar will be used to display information at the top of listings pages. For example, the 'archived post' notification uses the .reddit-infobar class.

.reddit-infobar is a visual refresh of the existing .infobar class and gives us the option to display an icon. The goal is to make reddit notifications more understandable and consistent for users.

The .infobar class will continue to be used in places that are not the top of listing pages. Examples include the search expando and comment permalink pages.

###Styling

Our goal is for .reddit-infobar to be a space on the page that we can communicate important messages to users, regardless of the subreddit that they are in. As such we ask that you do not hide or move the .reddit-infobar div and ask that you keep visual styling to a minimum.

We started beta testing a new search page about a month ago, and we're getting close to turning it on for everyone. The page is pretty much completely new, so there's a good chance that it won't inherit many of your styles by default. For more information about the feature, check out this modnews post.

NOTE: For the most part, you probably don't need to worry about subreddit search results unless you are working on a stylesheet intended for use with our reddit-themes gold feature.

If you want to do some stylin' on the new search page, here's some css info you may be interested in:

That's the bulk of it – I probably missed a couple of minor things. Feel free to comment here or shoot me a message with questions, and if you want to leave feedback on the new page, come on over to r/beta!

We're adding a new logged out feature today to post pages that we're calling "Read Next". You can check it out by viewing the comments page of a post while logged out, or by enabling beta mode.

If you want to style the new widget, there are a few classes you may be interested in.

That's a load of new classes to deal with, but one of the things we want to do is make it easier to target styles to specific features like this without accidentally changing things elsewhere.

Please don't use css to hide this feature or disable its functionality. See our rules on subreddit appearance for more info on that. If you have any feedback on the feature, we'd love to hear it in /r/beta (or in the changelog post linked above), and if you have any questions about styling let met know!

If you have not read the annoucnement post or the changelog post, please take a moment to do so.

This change brings in a new optional CSS class of admin_takedown. This class will optionally appear on comments (example: https://www.reddit.com/r/ChillingEffects/comments/35urvq/test_post_please_ignore/cr7z8fp) or self posts (example: https://www.reddit.com/r/ChillingEffects/comments/35urvq/test_post_please_ignore/).

Please do not alter the look or functionality of this new class.

We have re-opened a general beta program for reddit. Read the announcement post here and find more information in /r/beta.

If a user opts into the beta program they will see this flask icon next to their username in the sidebar, as well as help bubblethat appears when hovering on the icon.

If you need to change either of these so they do not conflict with your subreddit style, the following elements have been added at the beginning of the header-bottom-right div.

<div class="beta-hint help help-hoverable">
  <a class="beta-link" href="/r/beta">beta</a>
</div>

The help bubble is added to the bottom of the body element and set to visible when the flask icon is hovered over.

<div id="beta-help" class="hover-bubble help-bubble anchor-top">

The full CSS is visible here.

Please do not hide the beta icon or help bubble from users.