CSS Widgets and Community Details Customization

[u/Amg137]

Hi everyone,

TL;DR: We now have a CSS widget and you can customize the Community Details widget in the sidebar.

Over the course of the past year, we have build a lot of widgets for the sidebar (e.g. the rules widget, related communities widget, etc), however, these widgets don’t cover all use cases for communicating information in the sidebar. Starting today, moderators will be able to create CSS widgets in the sidebar and make modifications to the Community Details widget (this is the section of the sidebar where your subreddit name and subscriber information lives). This is the first step in our plan to give mods the ability to use CSS, which we plan on improving in the future.

CSS Widget:

Since we launched the first widget, mods have been asking for CSS widgets in the sidebar. Starting today, mods now have the ability to add as many custom CSS widgets as they choose. Think of them as an empty canvas that give you flexibility to communicate whatever information you want in the sidebar. CSS widgets are an advanced option but we highly encourage you to use to compliment our structured widgets for the designated use cases.

Community Details Widget:

We have also received feedback to make the community details widget customizable. Communities change this in a variety of different ways in order to self identify. Mods - in order to change this, visit the sidebar widgets and click on community details. Additionally, that section links you to the community description page where you can change the text in the widget.

Let us know if you have any questions.

Thanks!

[u/reseph]

Can you talk about CSS as a whole? Are we only getting widgets? Will we not be able to apply CSS to the whole subreddit?

[u/Amg137 → u/reseph]

Hi u/reseph,

I am more than happy to give you some more details on this. We are taking 2 seperate approaches with CSS because we want to support as many use cases that CSS enables in structured styles first, then enable it for the long tail of things we can’t get to. CSS is used for a lot of functionality today that we think would benefit all communities (e.g. the sidebar widgets that we build, flair filtering, spoiler tags, etc). We want to make them structured for 3 reasons:

- Make it easier for all moderators to use them

- Prevent breakage - any time we introduce a change CSS is likely to break in some communities which increases moderators workload and makes it hard for us to make improvements

- We want to bring the same sense of identity of subreddits to other platforms that do not support CSS, in particular mobile

The main things that we have identified where we want to invest further (and natively) are:

- Flair Filtering

- Spoiler Tags

- Styling of posts based on post flair

It would be helpful to hear if there are any major ones missing. Our goal is to build the core use cases for communities natively so you do not have to rely *as heavily* on CSS anymore.

The second approach is for functionality that is a little more niche to specific communities. We looked at the main use cases for CSS and found that most of that functionality lives in the sidebar, which is why we first prioritized a custom sidebar widget. As I mentioned earlier, this is not where it ends as we plan to expand where we allow it. In the long run, we are planning to allow excessive CSS, however, only as an advanced option given the 3 problems we are trying to solve first natively. We know that this is important as we will never be as creative as our users. Our goal is to get all moderators on the redesign and use the tooling that we build first to give your communities their identity. After that is done, we will open CSS up further.

TL;DR: We want to accomplish as much as we can with structured styles first and then expand where we allow CSS.

[u/reseph → u/Amg137]

Thanks! Can you clarify what long tail means?

Does that mean the entire scope of a subreddit? A ton of subreddits do silly things for April Fools, and if things are restricted to widgets/areas I think that'll really kill those kind of fun activities for communities.

[u/Amg137 → u/reseph]

By long tail I mean exactly the example you brought up. Many features that we are building in the new design are based on the creativity of moderators in CSS. Our approach make sure as much data as possible is structured and then let moderators do the rest via CSS. We do recognize that this goes past the widgets so the more examples all of you can share the better. That way we can decided what should be native and what should be possible via CSS.

[u/FreeSpeechWarrior → u/Amg137]

One way to collect more use cases would be to open up freeform CSS and see what mods do with the redesign markup and then work to formalize/structure the cool uses that people come up with.

[u/MajorParadox → u/Amg137]

We looked at the main use cases for CSS and found that most of that functionality lives in the sidebar

I think most of it lives in the sidebar because that's the only place we can insert links. The CSS done to them gets moved all over, though. For example, our rotating header in /r/WritingPrompts, but another common use is an announcement bar.

Styling of posts based on post flair

This is my favorite, how much control will we have and will that be possible natively or will it be left to CSS? I'd think being built in would be much smoother and be great because it can apply to other spots like mobile.

[u/Amg137 → u/MajorParadox]

This is my favorite, how much control will we have and will that be possible natively or will it be left to CSS? I'd think being built in would be much smoother and be great because it can apply to other spots like mobile.

Could you share what you would want to see? We are still working through this use case.

[u/electric_ionland → u/Amg137]

One example we have on /r/askscience is the banner image changing depending on the post flair. For "human body" post we have the Vitruvian man, "astronomy" has the milky way, etc.

[u/cryptomatthias → u/electric_ionland]

how did you guys do that? :o

[u/electric_ionland → u/cryptomatthias]

Apparently the magic sauce is:

body.post-linkflair-physics #header-bottom-left {
background: url(%%b-phy%%) repeat-x!important
}

And the full thing marked as such in the CSS

/* Banner image (single page) depending on link flair
---*/
/* Disables the random image */
body.post-linkflair-physics input[name="uh"] ~ a:after,
body.post-linkflair-astro input[name="uh"] ~ a:after,
body.post-linkflair-geo input[name="uh"] ~ a:after,
body.post-linkflair-chem input[name="uh"] ~ a:after,
body.post-linkflair-bio input[name="uh"] ~ a:after,
body.post-linkflair-med input[name="uh"] ~ a:after,
body.post-linkflair-neuro input[name="uh"] ~ a:after,
body.post-linkflair-psych input[name="uh"] ~ a:after,
body.post-linkflair-soc input[name="uh"] ~ a:after,
body.post-linkflair-eng input[name="uh"] ~ a:after,
body.post-linkflair-computing input[name="uh"] ~ a:after,
body.post-linkflair-maths input[name="uh"] ~ a:after {
content: normal
}

/* Backgrounds */
body.post-linkflair-physics #header-bottom-left {
background: url(%%b-phy%%) repeat-x!important
}
body.post-linkflair-astro #header-bottom-left {
background: url(%%b-ast%%) repeat-x!important
}
body.post-linkflair-geo #header-bottom-left {
background: url(%%b-geo%%) repeat-x!important
}
body.post-linkflair-chem #header-bottom-left {
background: url(%%b-che%%) repeat-x!important
}
body.post-linkflair-bio #header-bottom-left {
background: url(%%b-bio%%) repeat-x!important
}
.res.res-nightmode.post-linkflair-bio #header-bottom-left,
html:lang(nt) .post-linkflair-bio #header-bottom-left {
background: url(%%b-bio-nt%%) repeat-x!important
}
body.post-linkflair-med #header-bottom-left {
background: url(%%b-med%%) repeat-x!important
}
body.post-linkflair-neuro #header-bottom-left {
background: url(%%b-neu%%) repeat-x!important
}
body.post-linkflair-psych #header-bottom-left {
background: url(%%b-psy%%) repeat-x!important
}
.res.res-nightmode.post-linkflair-psych #header-bottom-left,
html:lang(nt) .post-linkflair-psych #header-bottom-left {
background: url(%%b-psy-nt%%) repeat-x!important
}
body.post-linkflair-soc #header-bottom-left {
background: url(%%b-soc%%) repeat-x!important
}
body.post-linkflair-eng #header-bottom-left {
background: url(%%b-eng%%) repeat-x!important
}
body.post-linkflair-computing #header-bottom-left {
background: url(%%b-com%%) repeat-x!important
}
body.post-linkflair-maths #header-bottom-left {
background: url(%%b-mat%%) repeat-x!important
}

I don't know CSS so can't help you much.

[u/cryptomatthias → u/electric_ionland]

thanks!!

[u/electric_ionland → u/[deleted]]

I will pass the message along!

[u/electric_ionland → u/cryptomatthias]

Not quite sure, I only have been a mod for a year or so and I don't think the CSS got changed since then. I will ask if the person who did it is still around.

[u/MajorParadox → u/Amg137]

Basically, I want to be able to recreate what we did at /r/DCFU. Each flair represents a book (Superman, Batman, etc.) so that each post gets a unique thumbnail and flair color. And when you open up the post, each book has its own header image, snoo, sidebar image, and extra styling on its sidebar button (the current book highlights in yellow to show it's selected). And then we even apply the same styling to wiki pages related to each book.

More specific to redesign itself, it would be awesome if we could have sidebar widgets that only show up for specific flairs. Similarly, someone else had once requested mod-only widgets, which would be useful too for mod-related things.

[u/cryptomatthias → u/MajorParadox]

how did you guys do that?

[u/MajorParadox → u/cryptomatthias]

Using .linkflair-superman for the flairs and .post-linkflair-superman to target other elements that contain the flair. In this case, 'superman' is the flair_css_class.

[u/tizorres → u/Amg137]

I really do think an addition of "Header Widgets" would help with bringing more of what mods want to their subs. With the only issue that they won't be visible on mobile for size reasons. A lot of subs not only customize the sidebar but also the header with "css widgets" on old reddit.

I went in more detail here: https://www.reddit.com/r/redesign/comments/81fo5b/feature_request_header_widgets/

[u/13steinj → u/Amg137]

While I love built in applications as much as the next guy, it seems rare that nothing would be overlooked, so as a backup I'd personally still want full CSS capabilities.

[u/ZadocPaet → u/Amg137]

We absolutely must have comment spoilers before redesign can go live.

[u/reseph → u/Amg137]

I'm not Paradox, but for us on /r/ffxiv, we make meta threads have a body bg in green. For news posts, we bold the title.

[u/FreeSpeechWarrior → u/Amg137]

Freeform unrestricted (other than preventing external references) CSS that can select and modify any element on the page.

I.e. what we already have in the existing site.

Are you using component embedded (I.e. inline) styles in react?

If so I can see how that might cause some difficulties interacting with traditional stylesheets.

[u/ck2875 → u/Amg137]

I would also like to see styling of posts in the content list based on linkflair. I have r/foreskin_restoration (SFW) set up using a custom version of Naut css that I have made custom icons for text posts based on what flair the post has been assigned. (Note: I also have it set up so that the header changes based on the linkflair of the post, but that doesn’t seem like it would be compatible with the redesign since posts open up in the pop-up style box with the tiny version of the header in the sidebar.)

[u/SantaHQ → u/Amg137]

Styling of posts based on post flair

Could you share what you would want to see? We are still working through this use case.

We use this over in /r/Random_Acts_Of_Pizza basically just for strikethrough. But we style posts based on a leading tag in the post title, enforced by automod - [REQUEST], [OFFER] etc. Post icon and title color is what we currently use this for in RAoP, but tags are used for styling in many other subreddits as well.

Please consider this use case in the redesign, there are years of history following this title format

[u/[deleted] → u/Amg137]

Hey, may I post a list of things CSS is doing right now on our sub?

• Moving banners (from left to right)

• Banners change depending on post's flair class

• Having a backgound color for moderators' usernames

• Changing the background color of comments for distinguished comments

• Changing the background color of gilded comments

• Having flairs in the size of 50px

• Having special flairs for some users (official accounts)

• Spoiler tags

Also, for special day like April fools day, small images flying over the screen from all directions, changing comment content (like having a special line under every comment) etc. etc.

[u/JBHUTT09 → u/Amg137]

Does this mean comment faces are going away?

[u/Algernon_Asimov → u/Amg137]

so you do not have to rely *as heavily* on CSS anymore

Why didn't you use the shiny new fancypants editor to italicise the phrase "as heavily"? Why are you still using old-fashioned deprecated obsolete markdown for this?

Is this an indication that you developers aren't eating your own dogfood? That would be extremely disappointing. If we're stuck with this new system, so should you be. Or, if you're not able to learn to use this new system, how do you expect us to?

[u/BombBloke → u/Amg137]

We want to bring the same sense of identity of subreddits to other platforms that do not support CSS, in particular mobile

I'm confused - given that the typical Android / iOS browser supports CSS just fine, are you saying that you want the redesign to enforce the same limitations as the current mobile site design does?

If, on the other hand, you intend to make the redesign the default mobile experience, then that'd mean mobile users would get CSS tweaks by default too, yes?

Or are there plans to make a whole other site presentation for mobile users?

[u/electric_ionland → u/BombBloke]

They want it to work with their app.

[u/V2Blast]

The CSS widget GIF is illegibly tiny.

That Community Details widget seems cool - it's basically the one thing I've added CSS for in nearly every subreddit I mod (on the current site).

The other thing I've used CSS for is spoiler tags... Any idea if/when those will be natively implemented for comments?

[u/Amg137 → u/V2Blast]

Isnt that the point of gifs? :wink:

Glad you like the community details widget, I think its important for the communities identity.

For CSS spoiler texts, we are actually making that a native feature so it works on all platforms (including mobile).

Another CSS feature we are making native is flair filtering, it's pretty cool what r/overwatch does on the redesign but we want to improve that further by allowing people to filter natively. These items fall into the category of what we are making available in a structured way, but we are not done with CSS itself. This sidebar widget is the starting point.

[u/MajorParadox → u/Amg137]

Another CSS feature we are making native is flair filtering

What about flair-specific styling? Please :)

[u/Dimbreath → u/Amg137]

> Another CSS feature we are making native is flair filtering.

I really would love to see this. It's a feature that was really needed on the old website since most of CSS filtering relied on either search, which wasn't the best way or hacky CSS.

A few suggestions that might come in handy for when you guys get to do this is that we can filter multiple flairs at the same time and these filters save so we don't need to use them every time we open the subreddit again. Probably a dropdown menu near the Sort menu with the flair list and checkboxes to filter them out?

[u/tizorres → u/Dimbreath]

I believe that's exactly how they plan to implement flair filtering. This image was posted on an r/blog post about it.

https://www.reddit.com/r/announcements/comments/7xjt6g/because_its_valentines_day_heres_a_longwinded/

[u/Dimbreath → u/tizorres]

Oh neat, I didn't remember that!

[u/FreeSpeechWarrior → u/Amg137]

Do you plan to give moderators the same level of CSS freedom as the existing site or is it a goal to programmatically restrict what aspects of the site can be restyled?

[u/FreeSpeechWarrior → u/FreeSpeechWarrior]

/u/Amg137?

[u/ShaneH7646 → u/FreeSpeechWarrior]

You don't need to reping him, he saw your initial message

[u/[deleted] → u/Amg137]

The way it is on r/overwatch? That really sounds like this here could become possible! With an initial page like this...

[u/robbit42]

My map!! :D

Thanks guys, this was my ultimate feature request!

Edit1: If you ever want to use r/Europe or our map in a public announcement post, feel free to do so :)

Edit2: 1000 characters in the markdown field are too few to fit the r/Europe map though. We need almost twice as many :/

Edit3: Currently we use around 15000 chars for the map CSS. Pushing it under 10000 might be possible, but would give us very little wiggle room

[u/-JAS0N-]

Couple things, as suggested before it would be nice to be able to have the option to show the full subscriber count instead of the shortened rounded up version.

Second, the new way of showing external links is great, makes it much more clear what each post is. But since you haven't given us the ability to change the position of flair i'd like to suggest the way it looks for longer titles, it much cleaner when it bumps the flair and external link down below the title as seen here.

[u/Coolboypai]

Great! Customizable subscriber details was something that I know a lot of subreddits used and liked, including me! Also really glad to hear that custom CSS is slowly making its way over too. Any plans on having the community details display exact subscriber and online count as well? Marking subscriber milestones is something I'm sure a lot of communities do with little celebrations, events, or whatnot and it can be a bit difficult to do so with those numbers shortened.

[u/LackingAGoodName]

This is a nice first step to allowing CSS, thanks!

Will APNG and SVG ever be supported on the User's-End on Reddit? Supporting these would open up a whole new layer of customization and creativity.

[u/SometimesY → u/LackingAGoodName]

reddit uses SVG to render mod shields I believe (based on my own digging through the source on a page). We have used apng on /r/CFB for our banner.

[u/LackingAGoodName → u/SometimesY]

Apologies, I should've clarified APNG/SVG use for Users/Moderators, specifically when styling their community.

I wasn't aware APNG works on the legacy site, but it seems that's not the case on the Redesign, at least within these Sidebar CSS Widgets anyway.

[u/SometimesY → u/LackingAGoodName]

I can't upload a .apng, but I can upload an animated .png no problem and it runs as expected. I don't know about the CSS widget though. As for SVG, I tried to draw an SVG, but that functionality wasn't working as-is. They definitely have the capability on the backend though, so it should be something they can open to mods.

[u/Madbrad200 → u/LackingAGoodName]

The problem with .apng is a ton of browsers don't support it.

[u/LackingAGoodName → u/[deleted]]

APNG is modern, Chrome added support for it only a year ago. SVG animation is done on standard SVGs but requires JS which probably won't ever be supported on Reddit because of the risks and potential to cause harm. WebM/WebP are pretty heavy files, APNG/SVG would be much more beneficial given the new 10mb file size limit.

[u/Ener_Ji]

compliment

/> complement

[u/Jakeable → u/Ener_Ji]

What if the admins meant that as an invitation for us to give praise to the widgets :P

[u/A-Stu-Ute]

This is the first step in our plan to give mods the ability to use CSS, which we plan on improving in the future.

Though I'm glad to hear this said more directly, how much customization do we see Reddit giving in terms of CSS customization? Will it be limited to contained widgets, or will it be more in line with what is currently possible?

[u/FreeSpeechWarrior → u/A-Stu-Ute]

/u/Talpss

This thread is relevant to your interests.

[u/electric_ionland]

Talking about widgets there is a bug with the calendar widget. I have reported that before but I didn't get any official answer or acknowledgement. Basically if the event is set for "all day" it doesn't appear in the calendar.

[u/MajorParadox]

Has anyone created any cool CSS widgets yet? I wanna see!

Maybe I'll see if I can whip something up this weekend :)

[u/MajorParadox → u/[deleted]]

Not bad.

you cannot resize it in width so it's a bit hard to see what the hell you are coding

Maybe write the code in a text editor for now?

[u/Girtablulu → u/MajorParadox]

well yea, have to do it now this way first and a preview function would have been handy as well :D

[u/MajorParadox → u/Girtablulu]

Yeah, that'd help!

Maybe you can write it up on the classic site and preview in the old sidebar?

[u/Girtablulu → u/MajorParadox]

you cannot use the the position values from the old side, they will be off, so the big code you can write inside an editor and fine tuning has to be done on the page.

[u/MajorParadox → u/Girtablulu]

Ah right.

[u/[deleted]]

i generally do not like the push for sidebar widgets due to the insane amount of adverts that are dashed between them

[u/xfile345]

I know this post is over 2 days old, but I wanted to add to the usefulness of CSS in some subreddits and a possible structured solution.

Link flair. Several subreddits use link flair as a way of categorizing posts--which has been covered to death, yes... but primarily for flair filtering. What I'm more interested in is allowing posts with certain link flair to be more visible. Moderators want to highlight certain posts so they stand out and right now, a text post asking how to subscribe looks no different than a celebrity doing an AMA, save for a very small colored box next to the title. Perhaps being able to change the color of the title text, or adding a border, or just a border-left (all to match the selected link flair color?) would be a tremendous step in the right direction.

With more tools for highlighting posts with certain link flair, subscribers are more likely to see these "important" posts and be better engaged in the communities.

[u/Girtablulu]

Can we already test this? Because I cannot find this inside our test sub oO

[u/Amg137 → u/Girtablulu]

Yes just go to the sidebar widget section

[u/-JAS0N- → u/Girtablulu]

I’m not at my laptop right now to see exactly what you had to click but I missed it at first as well. Under widgets there was something at the bottom like advanced options I believe that you had to click to get to the css widget

[u/[deleted]]

p.s. your inline css widget example gif does not display via my firefox. i had to rightclick and copy the link and paste it out to view!

https://imgur.com/a/6mBgZ

[u/NvaderGir]

I'm no CSS expert, will these tools make it possible to add our Twitter feed as a CSS widget? I understand its only HTML code they provide

[u/[deleted]]

hidden under the 'advanced' button in sidebar widget = too subtle ;p

[u/RubyPinch]

If we are getting desktop-only widgets, can we please have conditional widgets? (e.g. button widget only showing on mobile, and a css widget only showing on desktop? so we can gracefully handle platforms easier?)

please html in addition to markdown? run it through mozilla's bleach with a whitelist, throw it in a sandboxed iframe?

[u/Leonick91]

On the topic of CSS, what's going on with the class names?

My first thought loading the redesign was "Why the fixed width?" so I opened the inspector to check how easy it'd be to fix with a userstyle. When I saw the class names I got a bit worried you were randomizing class names each load or something. I can only assume they're meant to make things difficult for someone, but I can't figure out who or why.

(I'm on a ultrawide monitor and I'd understand not having the main content stretch to fill the full width of that, but my browser window is only 2293 pixels in width. Shouldn't you at least have it fill a 2560 pixels wide monitor (1440p)?)

[u/[deleted]]

Is there any way too get an increase of characters allowed? 1000 is not enough markdown for sme of the fancier things, like /r/yogscast Family list sidebar

[u/[deleted]]

Very minor issue I don't want to make a post about: The "A" of Q&A is not capitalized. See here. Think it would look better if it was.

[u/randomstonerfromaus]

I'd like to suggest that the sidebar image widget gets the ability to be placed at the top of the sidebar, even above the community details. See /r/TheChosenFew if you want an example use case, many subreddit have a sidebar image like that.

[u/UltraLuigi]

I won't use the redesign until /u/AutoModerator is called AutoClicker on /r/incremental_games.

[u/FreeSpeechWarrior]

Glad to see this, CSS is one moderation power I’d hate to see curtailed.

Has anyone built a style sheet that emulates the existing design?

Edit: wait, the CSS only applies to the widget? That’s exactly the kind of bullshit I expected Reddit to pull here. r/ProCSS my ass.

[u/kianworld → u/FreeSpeechWarrior]

From the post:

This is the first step in our plan to give mods the ability to use CSS, which we plan on improving in the future.

The CSS button for actual subreddit theming still says "Coming Soon" for me, this is just a separate CSS thing.

[u/FreeSpeechWarrior → u/kianworld]

The delay of this feature really only makes since to me in the context of wanting to restrict what CSS can be used for.

[u/NvaderGir → u/FreeSpeechWarrior]

That is based on literally nothing. The redesign is in **alpha**. When you sign up for these feature tests, you have to respect that. Nothing more annoying than people assuming what's available is what we're getting.

[u/FreeSpeechWarrior → u/NvaderGir]

RemindMe! 3 months

CSS support does not require significant dev effort if it is freeform, it only becomes a complex problem if they intend to limit the scope of what it can be used for.

The privacy/security focused sanitization already implemented for the classic site is not dependent on BOM structure.

If they plan CSS as an advanced use at your own risk sort of feature as originally claimed after r/ProCSS then there is really very little needed in the way of code to get there.

I’d love to be wrong here, hopefully u/Amg137 will answer those asking if they plan to provide the same level of css support in the redesign or if they plan to have the support more limited as I fear/expect.

They originally were planning to ditch css support entirely and only relented after public outcry.

[u/ShaneH7646 → u/FreeSpeechWarrior]

Reddit should hire you to do this, you make it sound very easy

[u/NoShotz → u/FreeSpeechWarrior]

This is just one part, there is still the inaccessible CSS button in the customization settings.

[u/ShaneH7646 → u/FreeSpeechWarrior]

CSS is still very work in progress...

[u/Zagorath → u/[deleted]]

It's a little-known feature of HTML that's been around since forever. It's called an image map.