-25

As part of implementing the new unified themes across the network, we're gradually rolling out updated site themes for each site. As of today, we have enabled your updated site theme for testing.

If you can't see it right now, that's by design! This is a very early test implementation of your design and we need your help finding issues with it before we make it live for everyone permanently. So, keep in mind, there will be things that need fixing! We'll address those things as we can.

If you'd like to review it, here's how:

How do I enable it?

Click here and check the "Beta test new themes" option. This will turn on the new theme for all sites that have one in testing, including this one. Here's more info on how to opt in. You can uncheck the box to revert to the older theme until the site is live for everyone. Note, while turning it on is immediate, it will take a few minutes to revert to the old view - but it will go through!.

What type of feedback do we need?

On this post: Bugs related to this site's design elements

Please help us look for issues/bugs related to the theme design and how we have mapped the old theme to the new. This needs to be done within the limits of the new unified theme.

This could include colors of sections of the design or text, problems with JavaScript add-ons (if applicable), the logo or top banner appearance or other artwork.

You can also feel free to ask questions about the new layout if you're unsure how to navigate it.

On Meta Stack Exchange: General concerns about left nav or theming

There are some things that are definitely changing everywhere and can't really be adjusted on a per-site basis. A few of them include:

  • Top banner is shorter in height, so some artwork has to be adjusted along with some logos.
  • Left Navigation is active everywhere (but can be collapsed into a menu by visiting your site preferences - instructions here).
  • Responsive layout is active, which lets the site adjust as browser widths change - no side scrolling (some pages haven't been updated, yet, though). For now, if you prefer the scrolling, you can disable this by clicking the "disable responsiveness" link in the footer.
  • Many site elements including tags and voting arrows are standardized across the network.
  • Link underlining is active. In an effort to make links more visible, they are now being underlined.

If you have concerns or issues regarding the left nav or the overall approach we are taking to theming, then this Meta Stack Exchange post is the right place for feedback.

As I mentioned earlier, there are some unique design elements like voting arrows and tags that are being standardized in this process. Keeping these custom elements makes our ability to maintain the sites too complex and, while we're very sad to see them go, we're in a difficult position of needing to make the site designs work together so that we can continue to address feature requests and bugs that will make your Q&A experience better. This is addressed in a Meta Stack Exchange post if you want more detail.

What new themes?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background). To follow along with the rollout of these new themes, go here.

Thanks so much for your constructive feedback!

Oh, Who am I?

If you don't know me, I'm one of the Community Managers here at Stack Exchange. I'm here to listen to your input and convey it to our Design team for responses and fixes to bugs. I'll do my best to respond to your concerns and explain whether changes we've made are bugs that can be changed or if they're by design and why.

20
  • 7
    Unchecking the Beta-test button doesn't seem to have any effect. I'm still seeing the "updated" version of the site
    – Valorum
    Commented Sep 18, 2018 at 21:25
  • 1
    Having seen some of the fiascos this redesign caused on other sites ... honestly, I was expecting/fearing much worse. I'm looking for things to complain about, but so far all I've got is that the site name in the header looks awful cramped now. The other bad stuff (no custom voting arrows to accompany the custom badge shapes, no direct link to badges page, hard to find the Ask Question button) are things I've more or less got used to from seeing them on other sites.
    – Rand al'Thor Mod
    Commented Sep 18, 2018 at 21:26
  • 15
    @Valorum It literally says right there in the post you're commenting on: "Note, while turning it on is immediate, it will take a few minutes to revert to the old view - but it will go through!."
    – Rand al'Thor Mod
    Commented Sep 18, 2018 at 21:26
  • 16
    Wait, if this is a rollout, do we actually get a say? Like, it sounds to me that the plan is to go ahead, especially given that the rest of the network is happening anyway. What actual changes can happen given our feedback (if at all)? Small things, big things, rejection of the whole thing? (Serious question).
    – Möoz
    Commented Sep 18, 2018 at 22:03
  • 1
    @Kevin It's caching. It will take a few hours for it to update. The box can hold up to four meta posts at a time.
    – Catija StaffMod
    Commented Sep 18, 2018 at 22:49
  • 8
    Can we get the starfield (patterned black background) back at least? As it is, the only piece of individuality left to our site is half of the old header image.
    – Kevin Mod
    Commented Sep 18, 2018 at 23:27
  • 1
    @kevin For the header and the footer, possibly! Put it in an answer?
    – Catija StaffMod
    Commented Sep 19, 2018 at 0:35
  • 1
    I am satisfied with the top header image/banner and footer images. Especially the footer images, as I find them much more visible, whereas on the current theme they're a little more hidden behind the content.
    – user31178
    Commented Sep 19, 2018 at 2:09
  • 3
    I'd really like to have our stars back.
    – SQB
    Commented Sep 19, 2018 at 15:13
  • 1
    @Catija I meant for the sides, like there are now several posts here and individually for.
    – Kevin Mod
    Commented Sep 19, 2018 at 16:52
  • 1
    There doesn't seem to be an easy way to get from the meta site back to the main site. In fact, there doesn't seem to be any way to do so short of editing your address bar or using a bookmark. Am I blind? Do other people not want to have links between the meta and the actual site?
    – Martha
    Commented Sep 19, 2018 at 23:18
  • 1
    @Catija, Didn't that used to be accessed by clicking the site name? I don't remember it being on the far right. Also, it looks like it ought to lead to chat, not any sort of menu.
    – Martha
    Commented Sep 20, 2018 at 0:32
  • 1
    @Martha It's been the way it currently is since October of last year. Prior to that, it was accessed behind the "Stack Exchange" text in the upper left of the top bar. As far as I'm aware, the site name - if you mean the "Science Fiction and Fantasy" logo has never switched the site to meta.
    – Catija StaffMod
    Commented Sep 20, 2018 at 0:42
  • 1
    @Catija and I'm still irritated by it. A year later I still click there almost every time because it's where it makes sense to be. Did they record analytics for it like I said they should?
    – Kevin Mod
    Commented Sep 20, 2018 at 17:32
  • 1
    @JackBNimble How would that have read in the original Klingon? ;)
    – Catija StaffMod
    Commented Oct 8, 2018 at 16:27

15 Answers 15

Reset to default
29

My initial feedback with the style is that it's in general far too bright, turning into a stark contrast with the current theme's color scheme.

I did a very simple mock-up changing two colors, the body background and the left sidebar background, that I believe conveys what I think is a more appropriate transition:

enter image description here

The background is pure black here, and the left sidebar gray color is what the current design's main color rgba(255,255,255,.95) samples to, which is rgb(242,242,242). That's actually lighter than the beta's body background color (which is also the sidebar), so it may be better to keep the darker one.

As this screencap shows, the sidebar active link text is still black and legible, as well as the grey text of inactive links.

This change only affects full-screen users, as the black wouldn't show up until your screen width exceeds 1260px (in my testing). On the smaller screens, the top bars and grey sidebar dominate more to lessen the effect of the stark white content background.

Also, this would work the same for meta.

It was brought to my attention that the collapsed sidebar might pose other issues, but it looks like it would still take just the body background color (black) and it looks great:

enter image description here

5
  • 4
    +1, I like the way this looks, but you might as well bring back the full star field effect from the old theme, since it's clearly not going to clash with the left nav under this proposal.
    – Kevin
    Commented Sep 19, 2018 at 5:51
  • 1
    @Kevin Aiming low. Pretty much asking for the least work possible to get this done.
    – user31178
    Commented Sep 19, 2018 at 14:24
  • @Kevin (CC WebHead) check out SQB's answer proposing bringing the stars back.
    – TheLethalCarrot Mod
    Commented Sep 19, 2018 at 15:19
  • I should note that Role-playing Games seems to have gotten a "real" background on their new theme; if they can do it, we should be able to as well - but at a minimum, the basic background color should be black, not grey.
    – Jeff Zeitlin
    Commented Sep 21, 2018 at 11:51
  • @JeffZeitlin A few other sites still have a background with the theme and Catija has said it is possible for us to have one, just not a dark one. See my question on it if you haven't already.
    – TheLethalCarrot Mod
    Commented Sep 21, 2018 at 12:34
24

One thing I miss is our field of stars background image.

Now I've noticed that the Mathematics Stack still has its background image, even though it already has the new theme.

Can we please have our stars back?

The left-nav is in black, so that would need another colour for it work against such a dark background, of course.

19

My main gripe with the new theme is that once the site header has scrolled out of view, there is no stylistic indication of which Stack I'm on, and the only indication at all is the place holder in the search bar.

Edit: okay, and the badge shapes if visible.

While I understand the reasons behind the changes, this is a severe loss of Stack identity.

11
  • "the only indication at all is the place holder in the search bar" - and the badge shapes! :-P
    – Rand al'Thor Mod
    Commented Sep 19, 2018 at 19:04
  • @Randal'Thor aren't those supposed to go away too, though?
    – Jenayah
    Commented Sep 19, 2018 at 19:47
  • 2
    @Jenayah No, we'll get to keep the custom badge shapes, thanks to this request on main meta. (Even though they won't let us keep other custom things defined in the same image resource, such as voting buttons.)
    – Rand al'Thor Mod
    Commented Sep 19, 2018 at 19:50
  • @Randal'Thor oh yeah, saw that too. Well, these comments aren't the place for my opinion - back to SQB's post though, you don't see badges as long as you're not actually reading a post, though.
    – Jenayah
    Commented Sep 19, 2018 at 19:55
  • @Jenayah Your user statistics are pinned to the top of the page. As long as you have a badge you can see it no matter where you are. And since you can get a badge by simply filling out your profile or taking the tour, there shouldn't be any problem of someone not having any badges.
    – Alex
    Commented Sep 20, 2018 at 5:14
  • @Alex the problem isn't for frequent/already registered users, who are likely to know where they landed; rather for users who don't have an account
    – Jenayah
    Commented Sep 20, 2018 at 6:13
  • 1
    @Jenayah Oh this is about people who show up by accident? I was thinking of people who have five tabs open with all different sites and need to know which one they're on at the moment.
    – Alex
    Commented Sep 20, 2018 at 6:18
  • 1
    @Alex well it's about both but when you design a site I guess what you want is all users (especially not yet registered ones) to think "yeah, that design reflects what the site is about" and be able to remember what site they went to; the current beta theme, with all it's blank spaces and absolutely no customization, makes SFF look like any other Q/A site.
    – Jenayah
    Commented Sep 20, 2018 at 6:22
  • 2
    Consider this whilst having left nav hidden and the top bar not sticky. Once scrolling there are no style elements custom to our stack that are visible.
    – TheLethalCarrot Mod
    Commented Sep 20, 2018 at 9:45
  • Related: meta.stackexchange.com/questions/315780/…
    – Alex
    Commented Sep 23, 2018 at 4:31
  • @SQB That's a good point. Technically, there are also a few color differences, but they don't identify the site uniquely, they're not always visible and they're hard to notice anyway. That said, I don't like the custom background, and I'm already patching away the annoying chat room background with a user-style. So I'm not sure what the best way to distinguish the site from other sites would be.
    – b_jonas
    Commented Sep 29, 2018 at 13:30
12

Note that this was an issue with the old theme too but seeing as this is a theme change we might as well address it now.

Using the same search from this answer I see the following results on default view.

Search results page, accepted answer colours for answers

The colour difference between an accepted answer result and just an answer result is so minimal it is next to impossible to see. Can we style this differently so it is easier to see whether the answer is accepted or not?

One option would be to style it like questions when they show they have an accepted answer.

Search results page, accepted answer colours for questions

Or box the numbers like is shown on the profile page.

Profile page, answers and questions tabs

1
  • 3
    This is a larger, network-wide, accessibility issue that we really do need to address. We're going to be focusing on improvements to accessibility either later this year or early next year and this will be one of the items we work on fixing.
    – Catija StaffMod
    Commented Oct 2, 2018 at 20:11
12

The meta footer doesn't have the site design.

Meta footer:

enter image description here

Main-site footer:

enter image description here

And like most of the others I also feel the header bar is way too thin.

9

The buttons in the review queues are just too light, I initially saw them in the Low Quality Post queue and was trying to work out why they were all disabled.

Late Answer review from mobile

It looks like this issue may only be affecting mobile as I just did a First Post review on the main site on desktop and it looked fine.

Low Quality Post review from desktop

The buttons on mobile should match those on desktop.

4
  • RPG.SE is experiencing the same thing in its beta theme -- rounded gradient buttons in review -- and it's only affecting mobile for us too.
    – doppelgreener
    Commented Sep 19, 2018 at 17:28
  • I'm guessing this is related to Safari, specifically? Or is it on other mobile browsers?
    – Catija StaffMod
    Commented Sep 24, 2018 at 20:20
  • @Catija tested in chrome for iOS only.
    – TheLethalCarrot Mod
    Commented Sep 24, 2018 at 20:41
  • Hmmm, so probably iOS related, not Safari specific.
    – Catija StaffMod
    Commented Sep 24, 2018 at 20:42
8

Hamburger Hell

Whilst I've seen it pointed out on SO meta since the left nav was launched a few times it seems even worse on the other sites. This is because we also have the hamburger icon for the StackExchange network button. To make this slightly less hellish could the hamburger for this button be removed?

For reference I am talking about this one:

Top bar - hamburger hell

2
  • 1
    I'm pretty sure that removing the logo of the entire network ... isn't going to happen. It's not a hamburger. It's just a(n unfortunate) coincidence that our logo looks like one.
    – Catija StaffMod
    Commented Oct 2, 2018 at 20:13
  • @Catija I know it isn’t one but with all four hamburgerish icons together it’s just too much. I’m not entirely sure the best option but I thought this was a decen fix to minimise it slightly.
    – TheLethalCarrot Mod
    Commented Oct 2, 2018 at 20:48
7

The one-winged angel thingy is very small and hard to see.

Can we please blow it up a bit, maybe crop the image to make it wider?

The left and right columns clash badly with the header and footer.

We were previously told that those columns were stylable. Can we please keep the starfield there?

On meta, the header background does not match the header image.

enter image description here

4
  • 1
    They're style-able to an extent. The text in the sidebar still has to be black, so they have to be pale enough for the black text to be legible, which wouldn't be possible with the star field.
    – Catija StaffMod
    Commented Sep 18, 2018 at 22:48
  • 4
    @Catija: "The text in the sidebar still has to be black" - That is most unfortunate.
    – Kevin
    Commented Sep 18, 2018 at 23:29
  • 2
    -1 for cropping the Angel of Death to make it wider, +1 for keeping the old colour scheme in the sidebars. Maybe you should split these suggestions into different answers? (Or I guess you could remove the middle point, since it's already covered in Web Head's answer.)
    – Rand al'Thor Mod
    Commented Sep 19, 2018 at 7:13
  • The footer background is even worse on Meta.
    – Jenayah
    Commented May 30, 2019 at 23:58
5

The ask question button seems to float alongside the question title and ends up conflicting with long question titles.

enter image description here

2
  • I'm not sure why that counts as “conflicting”. The two don't overlap, and the space for the title is already wide enough.
    – b_jonas
    Commented Sep 29, 2018 at 13:31
  • The ask button is very close to the question rather than in its own enclosure.
    – Valorum
    Commented Sep 29, 2018 at 13:33
4

The hyperlink colours on /review and /tools is quite low in contrast. It could do with being a bit closer to what we used to have. Comparing side by side there doesn't appear to be too much of a difference so it might just be me but the old colours definitely appear to have more contrast.

New theme: rgb(85, 157, 182)

/review new theme

Old theme: rgb(78, 172, 205)

/review old theme

6
  • I think this is the same for the links all over the site, they all seem a little washed out.
    – TheLethalCarrot Mod
    Commented Sep 19, 2018 at 11:45
  • 2
    The low contrast between grey & aqua link colors is going to be a significant impediment for people with poor vision or mild color blindness.
    – doppelgreener
    Commented Sep 19, 2018 at 17:31
  • Has this changed for you? When I look, that's not what I see at all. :( i.sstatic.net/2aPGs.png
    – Catija StaffMod
    Commented Sep 24, 2018 at 20:23
  • @Catija away all week from PC will check when back
    – TheLethalCarrot Mod
    Commented Sep 24, 2018 at 20:42
  • Any update? I'm still not seeing this for me.
    – Catija StaffMod
    Commented Oct 2, 2018 at 20:19
  • @Catija Still seem the same, Win 10, Chrome v69.
    – TheLethalCarrot Mod
    Commented Oct 3, 2018 at 7:58
4

The main content is intentionally locked at a max width and the empty space is there only on that view. Compare that section to a search results page, or tag page for example. We want the elements to be in the same place on all of the various questions/results pages as much as possible. – Catija♦ yesterday

If this is the case there is a bug with the Info pages for tags because the tab switcher box moves around on moving between Info and the other tags.

Discussion tag page showing bug

2
  • Are you talking about the horizontal motion or the info section expansion? The tag info is the full content of the page, so it goes below the tabs, otherwise the tabs would potentially be half-way down the page. For example: scifi.stackexchange.com/tags/harry-potter/info
    – Catija StaffMod
    Commented Sep 24, 2018 at 20:26
  • @Catija I meant that the tabs move up and down
    – TheLethalCarrot Mod
    Commented Sep 24, 2018 at 20:43
3

The users page under the new theme looks a bit lost. Elements appear to be floating around. Part of this issue seems to be caused by having no horizontal rule anymore and so no definite definition between the switchers and the user cards. The tab switchers moving to the new look also seems to be causing this problem as they aren't "attached" to anything now but floating in their own space. Compare the two pages:

New theme

Users page, new theme

Old theme

Users page, old theme

2
  • I’m not seeing a warning sign, and if there was, I’m not sure why a user needs to clarify what their userscripts do as long as they’re not harmful.
    – Edlothiad
    Commented Sep 19, 2018 at 9:45
  • @Edlothiad I don't care what his userscripts do; I was more concerned that it might be a weird bug with the new design.
    – Rand al'Thor Mod
    Commented Sep 19, 2018 at 12:31
2

On a different note, and posting here because I don't know how much is theme/per site related, there is a lot of unused space. Most of which can be easily used up with what is currently on the page.

Unused space screenshot

The unused space to the left and right of the screen can easily be used up by expanding the main content to fit with the whole screen. If this isn't an option that you want to go with then the top bar can be moved in to be the same width as the main screen; at the moment it is quite charring to have two different content widths.

The area in the middle top of the screen is mostly whitespace. This can be easily solved by moving the active/featured/etc switcher in line with the heading and ask button. At the same time the Ask Question button could also be moved to be on the top banner.

It is also jarring to have 4 different areas on the left hand side of the screen all start in different places. I can't imagine it is that hard to align them again.

Homepage alignment issue

8
  • 1
    This probably isn't site-specific enough for them to even consider here; better to post it on main meta, I'd guess.
    – Rand al'Thor Mod
    Commented Sep 19, 2018 at 8:57
  • @Randal'Thor Probably, I'm sure it's been said on main a few times though. I'll leave it here and if I get time later to look for dupes on main I'll post or not.
    – TheLethalCarrot Mod
    Commented Sep 19, 2018 at 8:59
  • The main content is intentionally locked at a max width and the empty space is there only on that view. Compare that section to a search results page, or tag page for example. We want the elements to be in the same place on all of the various questions/results pages as much as possible.
    – Catija StaffMod
    Commented Sep 19, 2018 at 11:51
  • 1
    @Catija While fair enough is it possible to lock the top bar at this width too? It feels odd to have two different view ports. The old site kept everything at the same narrower width.
    – TheLethalCarrot Mod
    Commented Sep 19, 2018 at 11:53
  • The top bar width is locked for me. The content never gets wider than the width between the left and right sidebars. Is this still not working for you? It's possible something odd happened but I'm not having the same experience you are. If it's still a problem, maybe check any scripts you might have?
    – Catija StaffMod
    Commented Sep 20, 2018 at 1:17
  • @Catija With all scripts disabled the top bar width is still the width of the browser window (full screen 1280x1024) whilst the main content is slightly narrower. This is with left nav hidden too. Running on Windows 10 and Chrome 68.
    – TheLethalCarrot Mod
    Commented Sep 20, 2018 at 7:57
  • I've just poked at it a bit. The top bar width is maxed out at the page width that includes left navigation. If you disable the left nav, it will stick out slightly but it will not increase indefinitely. It's still a fixed max.
    – Catija StaffMod
    Commented Sep 24, 2018 at 20:30
  • @Catija personally I think it’s be better if the top bar and main content were the same width with left hav disabled.
    – TheLethalCarrot Mod
    Commented Sep 24, 2018 at 20:44
1

The tag box in a custom advanced search looks a bit odd. The left and top borders appear to be double the width of the other two and the box is right up against the left margin. It probably wants a bit of padding on each side. You should be able to see this affect with this search user:58193 [the-last-jedi] is:a

Search results page new theme

Note that on the old theme the box isn't pushed up against the borders, this could also be due to the watch/ignore tag change.

Search page old theme

1

Screenshot of the logo

The swashes are too thin and noticeably pixelated at a regular pixel density.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .