SO-Site Bar (Minimalistic) [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

This question does not appear to be about the software that powers the Stack Exchange network, within the scope defined in the help center.

Closed 2 years ago.

Improve this question

Download Source:

http://www.sampsonresume.com/labs/so-sites_minimal.user.js

Description

Greasemonkey script for linking the SO-Sites together. Jeff rightly pointed out that a mere clone of the footer-list takes up a bit too much space, so I thought this would eliminate that problem, or at least minimize that problem.

Each site is represented by a 10x10 colored box. The color of the box of course is associated to the color-scheme of that particular site. The black cube is the blog.

Related (non-Minimalistic version) meta.stackexchange.com/questions/882/… — dbr, Commented Jul 5, 2009 at 18:02
this is very nice, Jonathan, and something we are looking at very closely for inclusion in the site — Jeff Atwood, Commented Jul 13, 2009 at 5:55
This script will work in opera if "unsafeWindow = window;" is added as the first line in the GM_wait() function. Not sure if this then borks firefox, but I thought you might like to know. — RobS, Commented Nov 16, 2009 at 22:13
Hmm, it works in superuser and serverfault, but not meta or SO.... — RobS, Commented Nov 16, 2009 at 22:16
@Lance: This was later implemented in the footer of all sites. — Sampson, Commented Mar 10, 2010 at 2:26
yes, and it drives me crazy to have to scroll down a huge page to click on the other links, please keep your script up so I can have the buttons on the top. @Jeff — Lance Roberts, Commented Mar 10, 2010 at 15:14
@Jonathan, I just noticed that the script is causing my search box to disappear sometimes. I haven't been able to figure out exactly when yet. It may be caused by a conflict with another gm script. I also get a little letter h appearing below the title bar, again it may be a conflict with another gm script. I'm thinking I'll have to learn some greasemonkey. — Lance Roberts, Commented Mar 10, 2010 at 17:05
Looking at the scripts, I'm sure the problem is with the other one (so-gold-plated) since your script is pretty simple. — Lance Roberts, Commented Mar 10, 2010 at 17:22
@Lance The search box is being forced onto a new line likely because of the length of your name + the buttons + badges etc. This happens to me even without this script enabled (as a result of having a long name + badges). Click the letter "h," you'll see that it's actually the last letter of the search box peeking out from behind the Stack Overflow logo. To fix this, change the width of the element within the script. $(":input[name='q']").width(50) to make it 50px. — Sampson, Commented Mar 10, 2010 at 18:57
Hi there. Does it have a colored box for programmers? Can we add one? tx. — DrBeco, Commented Mar 27, 2011 at 18:29

a cat · Accepted Answer · 2012-04-03 11:26:57Z

24

Not too sure about pinning it to the top of the window (position:fixed), aside from that it looks quite nice, if a little unintuitive at first ("What are these three little coloured boxes?!")

An alternative idea, using each site's favicon.ico in the toolbar:

Using favicons in toolbar

Code:

(function(){
  function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
    } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
    }
  }
  GM_wait();
  function letsJQuery() {
    $("<span></span>")
      .append("<span class='link-separator'>|</span>")
      .append("<a href='http://www.stackoverflow.com'><img src='http://stackoverflow.com/favicon.ico' title='StackOverflow' style='padding:1px'></a>")
      .append("<a href='http://www.serverfault.com'><img src='http://serverfault.com/favicon.ico' title='Visit ServerFault' style='padding:1px'></a>")
      .append("<a href='http://meta.stackoverflow.com'><img src='http://meta.stackoverflow.com/favicon.ico' title='Visit Meta Stack Overflow' style='padding:1px'></a>")
      .appendTo("#hlinks");
  }
})();

Should probably hide the current site's icon..

edited Apr 3, 2012 at 11:26

a cat

16.1k4 gold badges58 silver badges84 bronze badges

answered Jul 5, 2009 at 18:10

dbr

23.1k10 gold badges66 silver badges86 bronze badges

Yeah; I had actually suggested icons when I responded to Jeff at first. Not considering the favicons, I just went with three solid boxes :) Unintuitive? I prefer 1337-geeky ;)
– Sampson
Commented Jul 5, 2009 at 18:18
2

I don't think they're that unintuitive - they just rely on the user learning what the colours mean (which would probably be quite fast, cos we're all geeks here ;)
– Ant
Commented Jul 10, 2009 at 16:10
1

you may want to update your answer to include superuser.com .append("<a href='superuser.com'><img src='superuser.com/favicon.ico' title='Visit SuperUser' style='padding:1px'></a>")
– Bobby
Commented Jul 16, 2009 at 5:31
I answered quite similarly- not seeing your answer... I definitely prefer favicons over solid colors ;-) Anyway I added a style='display:inline-block;position:relative;top:4px' to make the images look more aligned (default is too high to my taste) Also consider adding superuser.com ;-)
– cadrian
Commented Jul 17, 2009 at 12:02

Add a comment |

Jeff Atwood · Accepted Answer · 2010-08-03 07:13:18Z

7

Pre-emptively marking this completed, as we'll roll something like this out soon.

Current mockups:

http://img826.imageshack.us/img826/1889/segenuwinebranding.png

answered Aug 3, 2010 at 7:13

Jeff Atwood

311k107 gold badges889 silver badges1.2k bronze badges

Looks cool! :) ...
– Daniel Vassallo
Commented Aug 3, 2010 at 8:44

Add a comment |

a cat · Accepted Answer · 2012-04-03 13:52:39Z

I agree with dbr that I don't like the position:fixed, but also I thought the favicons were a little too cluttered for the site's simplistic layout. My solution? Combine both ideas. Also I added link-titles and a link to super user since it will be opening soon.

(function(){
  function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
    } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
    }
  }
  GM_wait();
  function letsJQuery() {
    $('#hlinks')
      .append('<span class="link-separator"> | </span>')
      .append("<a href='http://stackoverflow.com' style='display:inline-block;width:10px;height:10px;background:#f60;margin-right:5px' title='Stack Overflow'><span style='display:none'>stackoverflow</span></a>")
      .append("<a href='http://superuser.com' style='display:inline-block;width:10px;height:10px;background:#00ADED;margin-right:5px' title='Super User'><span style='display:none'>superuser</span></a>")
      .append("<a href='http://serverfault.com' style='display:inline-block;width:10px;height:10px;background:#c99;margin-right:5px' title='Server Fault'><span style='display:none'>serverfault</span></a>")
      .append("<a href='http://meta.stackoverflow.com' style='display:inline-block;width:10px;height:10px;background:#ccc;' title='Meta'><span style='display:none'>meta.stackoverflow</span></a>");
  }
})();

Edit: The light maroon color for the Server Fault link made it seem inferior, so I used to bright Red from the logo. Also added the 1px fix (thanks Jonathan).

(function(){
  function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { 
      window.setTimeout(GM_wait,100); 
    } else { 
      $ = unsafeWindow.jQuery; letsJQuery(); 
    }
  }
  GM_wait();
  function letsJQuery() {
    $('#hlinks')
      .append('<span class="link-separator"> | </span>')
      .append("<a href='http://stackoverflow.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#f60;margin-right:5px' title='Stack Overflow'><span style='display:none'>stackoverflow</span></a>")
      .append("<a href='http://superuser.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#00ADED;margin-right:5px' title='Super User'><span style='display:none'>superuser</span></a>")
      .append("<a href='http://serverfault.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#E8272C;margin-right:5px' title='Server Fault'><span style='display:none'>serverfault</span></a>")
      .append("<a href='http://meta.stackoverflow.com' style='display:inline-block;position:relative;top:1px;width:10px;height:10px;background:#ccc;' title='Meta'><span style='display:none'>meta.stackoverflow</span></a>");
  }
})();

Very nice! I think that will replace my current configuration. The only thing I might change is the amount of space above the cells...needs to be greater IMHO. Nice work. — Sampson, Commented Jul 9, 2009 at 19:07
Thanks! The pixel offset, now that I noticed it, is driving my OCD nuts. If I get some time later I'll fix it. — TJ L, Commented Jul 9, 2009 at 19:25
position:relative;top:1px; I believe is what I added to each. I might have increase (slightly) the margin-right. The only thing I don't like is how it pushes all of my content over when it loads...kinda distracting. — Sampson, Commented Jul 10, 2009 at 15:23
I've updated the original post with code-changes and a new screenshot. — Sampson, Commented Jul 10, 2009 at 15:31

John Rasch · Accepted Answer · 2009-08-13 01:40:57Z

Here are the updated colors to match the footer:

$('#hlinks')
      .prepend('<span class="link-separator"> | </span>')
      .prepend("<a href='http://blog.stackoverflow.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#444;margin-right:1px;' title='Blog'><span style='display:none'>blog</span></a>")
      .prepend("<a href='http://meta.stackoverflow.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#969696;margin-right:7px;' title='Meta'><span style='display:none'>meta.stackoverflow</span></a>")
      .prepend("<a href='http://www.superuser.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#00AFEF;margin-right:7px' title='Super User'><span style='display:none'>superuser</span></a>")
      .prepend("<a href='http://www.serverfault.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#E8272C;margin-right:7px' title='Server Fault'><span style='display:none'>serverfault</span></a>")
      .prepend("<a href='http://www.stackoverflow.com' style='position:relative;top:1px;display:inline-block;width:10px;height:10px;background:#FE7A15;margin-right:7px' title='Stack Overflow'><span style='display:none'>stackoverflow</span></a>")

mcottle · Accepted Answer · 2011-10-13 08:57:18Z

1

I thought this was what I was looking for then I saw the date. I've just got accounts on several extra SE sites and what I'd like is to have the "Stack Exchange v" menu give me a quick link to all of the sites that I currently have an account in.

It's pretty difficult to navigate through 5 different sites of the SE network...

answered Oct 13, 2011 at 8:57

mcottle

1193 bronze badges

1

stackexchange.com/users/64194?tab=accounts
– agf
Commented Oct 13, 2011 at 9:02

Add a comment |

Stack Exchange Network

SO-Site Bar (Minimalistic) [closed]

Download Source:

Description

5 Answers 5

Not the answer you're looking for? Browse other questions tagged
feature-request
status-completed
userscript
.

Linked

Hot Network Questions

SO-Site Bar (Minimalistic) [closed]

Download Source:

Description

5 Answers 5

Not the answer you're looking for? Browse other questions tagged feature-requeststatus-completeduserscript.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
feature-request
status-completed
userscript
.