Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.
Sign up to join this community
I am aware that Monica Cellio suggested the Top(bar) Hat. When compared with the current actual top bar, the icon positions of achievements and review are interchanged. Even in Monica Cellio's suggested image, it was in the correct order.
Were the icon positions changed purposely or is there any other reason behind that?
Screenshot showing the actual top bar and top bar hat:
I did the opposite of @WELZ; I made a userscript which reorders the top bar icons so that they match the positions on the hat:
// ==UserScript==
// @name Stack Exchange Top Bar Winter Bash 2018 edition
// @namespace https://github.com/Glorfindel83/
// @description Reorders top bar items to match the order on the Top(bar) Hat
// @author Glorfindel
// @version 0.1
// @match *://*.stackexchange.com/*
// @match *://*.stackoverflow.com/*
// @match *://*.superuser.com/*
// @match *://*.serverfault.com/*
// @match *://*.askubuntu.com/*
// @match *://*.stackapps.com/*
// @exclude *://api.stackexchange.com/*
// @exclude *://blog.*.com/*
// @exclude *://chat.*.com/*
// @exclude *://data.stackexchange.com/*
// @exclude *://elections.stackexchange.com/*
// @exclude *://openid.stackexchange.com/*
// @exclude *://stackexchange.com/*
// @grant none
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==
(function () {
"use strict";
$("li.review-button-item").insertBefore($("li.review-button-item").prev());
$("li.site-switcher-item").insertBefore($("li.help-button-item"));
// The Winter Bash icon is loaded asynchronously
waitForKeyElements("li.-item", function(jNode) {
if (jNode.next().hasClass("site-switcher-item") &&
!jNode.children().first().hasClass("js-achievements-button")) {
jNode.insertAfter($("li.help-button-item"));
}
});
})();
I fixed up the SVG with the icons in the correct order.
Run the snippet below to view it.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" width="480">
<path fill="#294CCC" d="M126.001,138.1c-29.6-5.299-59.701-5.299-89.301,0C33.4,101.3,30.1,64.4,26.6,27.6
c-0.5-4.9,2.8-9.7,7.3-10.4c31.5-4.8,63.299-4.8,94.8,0c4.501,0.7,7.8,5.4,7.301,10.4C132.6,64.5,129.3,101.3,126.001,138.1z"/>
<path fill="#0A1C60" d="M126.001,138.1c-29.6-5.299-59.701-5.299-89.301,0c-1.1-12-2.1-24.099-3.3-36.299
c31.9-5.601,64.1-5.601,96,0C128.1,114,127.099,126,126.001,138.1z"/>
<path fill="#030920" d="M35.5,126.4l1.1,11.9c29.6-5.3,59.701-5.3,89.301,0l1.099-11.9C96.9,132.5,65.7,132.5,35.5,126.4z"/>
<path fill="#294CCC" d="M3.4,125c50.6,11.5,105.201,11.5,155.799,0C159.299,160.199,3.4,160.199,3.4,125z"/>
<path fill="#FFFFFF" d="M97.601,113.8L94,117.4l-1.299-1.3c-0.3-0.3-0.701-0.3-1.001,0l-1.5,1.5c-0.299,0.3-0.299,0.7,0,1l2.001,2
h-4.7c-0.801,0-1.4-0.599-1.4-1.399v-8.6c0-0.8,0.599-1.4,1.4-1.4h8.6c0.8,0,1.4,0.601,1.4,1.4L97.601,113.8z M94.7,113.5h-7.2v1.4
h7.2V113.5z M96.1,110.6h-8.6v1.4h8.6V110.6z M87.5,116.3v1.4h2.2v-1.4H87.5z M99,116l-5,5l-2.899-2.9l1.1-1.099L94,118.8
l3.901-3.9L99,116z"/>
<path fill="#FFFFFF" d="M56.3,109.4h-7.6c-0.6,0-1.1,0.4-1.3,1l-2,6.1v3c0,0.8,0.6,1.399,1.4,1.399h11.5c0.8,0,1.4-0.599,1.4-1.399
v-3l-2.1-6.1C57.5,109.701,56.9,109.3,56.3,109.4z M56.1,116.5l-1.4,1.4h-4.3l-1.4-1.4h-2.1l1.7-5.2c0.1-0.3,0.4-0.5,0.7-0.5h6.5
c0.3,0,0.6,0.2,0.7,0.5l1.7,5.2H56.1z"/>
<path fill="#FFFFFF" d="M105.8,117.6c0,0.8,0.601,1.4,1.399,1.4h5.701v2.2l2.2-2.2h0.701c0.8,0,1.399-0.6,1.399-1.4v-1.4H105.7v1.4
H105.8L105.8,117.6z M115.9,109h-8.601c-0.8,0-1.399,0.601-1.399,1.4v1.4H117.4v-1.4C117.299,109.601,116.6,109,115.9,109z
M105.8,112.6h11.499v2.9H105.8V112.6z"/>
<path fill="#FFFFFF" d="M77.2,110.1v-0.7h-8.6v0.7h-2.2v2.9c0,1.1,1,2.2,2.2,2.2v0.7c0.3,1.101,2.2,1.901,3.6,2.2v1.401H70
c0,0-0.7,1.099-0.7,1.399h7.2c0-0.3-0.701-1.399-0.701-1.399h-2.2V118c1.4-0.3,3.3-1.1,3.6-2.201v-0.7c1.1-0.1,2.2-1,2.2-2.2V110
L77.2,110.1z M68.6,113.7c-0.4,0-0.701-0.4-0.701-0.7v-1.4H68.6V113.7z M74.6,115.5l-1.7-1.1l-1.699,1l0.7-1.901l-1.9-1.199h2.2
l0.7-1.901l0.701,1.901h2l-1.599,1.299L74.6,115.5z M77.9,112.9c0,0.399-0.4,0.7-0.7,0.7v-2.2h0.7V112.9z"/>
</g>
</svg>Here's a PNG preview:
Were the icon positions changed purposely or is there any other reason behind that?
Yes, there is an esoteric meaning behind the change. Also a purpose for designing the hat in that way. In fact, multiple meanings.
The hat icons are present in this order : Inbox, Reviews, Achievement and then Hamburger.
This implies that the website prefers communication with users and are ready to listen to the feedback posted. This is a reflection of Welcome Wagon and improvement of New User experience. Could we please be a bit nicer to new users?
Then there is review icon. This represents moderators and moderation process. Moderators play a crucial role in the functioning of Stack Exchange that too voluntarily. They are given importance in designing the hat. Related Could we please be a bit nicer to moderators?
Keeping reputation after moderation implies that users should give importance to moderation over earning reputation and badges for own self.
Finally, putting Stack Exchange hamburger icon shows that they are generous and selflessness.
When the new top bar was launched, there were many requests and bugs. Many are taken into consideration and improved based on the feedback. The change i the hat design implies that there is still scope for improvement in the future.
They forgot the top bar design. The designer made the hat with one design out of hundreds of proposed designs he remembers during the discussions. The final one we have currently and the one designer remembered didn't match. Hence we have the current design. [Just for fun]
