12

I have often thought that it might be useful to have the top bar (with its inbox and review notifications) fixed to the top of the page. This lets you always have a view of your status and items that are coming in, even while reading through lengthy questions/answers.

What is the most efficient way to do this, reaching as many browsers as possible?

3 Answers 3

8

This quick TamperMonkey script can be installed in much the same way as the "select code" block from this question: How to make `select code` work with google chrome?

TamperMonkey is compatible with "Google Chrome, Opera, Chromium and a lot of their derivates like CoolNovo and Rockmelt."

// ==UserScript==
// @name           Makes the top bar "fixed"
// @namespace      http://www.example.com/
// @description    Makes the top bar "fixed"
// @include        http://tex.stackexchange.com/*
// @include        https://tex.meta.stackexchange.com/*
// ==/UserScript==

var $ = unsafeWindow.jQuery;

$("div.topbar").css('position','fixed');   // Fix the topbar
$("div.topbar").css('z-index','5');        // Move it to the top
$("div#header").css('padding-top','25px'); // Pad the rest of the page

To Install...

For Chrome

  1. Install the Tampermonkey Web Extension for Chrome: Link to Web Store

  2. This should enable a new button that appears by your URL bar. Use the "Add a new script..." button to, well, add a new script.

    addnewscript

  3. Copy and paste the code from above into the window that appears.

    pastecode

  4. Be sure to use the "Save" button save (not "Save to Disk" savetodisk) to save and enable the script.

  5. Enjoy! The script is enabled by default only on TeX.SE and Meta.TeX.SE, but it would probably be usable on other 2.0 SE sites with appropriate alterations to the @include lines.

6
  • Can you explain what exactly has to be done with this code? I don't find where to paste it...
    – Dror
    Apr 3, 2014 at 10:26
  • @Dror I added install instructions for Chrome ... let me know if these don't match your experience.
    – cslstr
    Apr 3, 2014 at 13:47
  • It simply didn't cross my mind to click the new icon... Thanks! Thats brilliant!
    – Dror
    Apr 3, 2014 at 20:13
  • Will this work with Firefox? Apr 4, 2014 at 3:00
  • @GonzaloMedina I haven't tested it with Firefox, but it should be compatible "out of the box" with the GreaseMonkey AddOn for Firefox. TamperMonkey was built with the same syntax as GreaseMonkey.
    – cslstr
    Apr 5, 2014 at 2:14
  • @GonzaloMedina: See my answer.
    – Speravir
    Apr 7, 2014 at 15:11
5

While the Tampermonkey code of cslstr should work in Firefox/Seamonkey with Greasemonkey or Scriptish (I didn’t test) it is not necessary, as it effectively executes CSS code. So I rewrote it, see below.

Copy the following code into your userContent.css (cf. Customizing Mozilla) or into Stylish. In first case you will have to restart your browser, in second case it works immediately after saving.

@-moz-document domain(stackexchange.com),
               domain(stackoverflow.com) {
.topbar {
  position: fixed !important;
  z-index: 101 !important;
}
#header {
  padding-top: 34px !important;
}}

Some remarks:

  • In this way it works for all stackexchange.com sites and stackoverflow.com including the meta subsites. It could be easily enhanced for other StackExchange domains by adding them separated with commas.

  • It turned out that z-index: 2 would be enough for ⟨meta.⟩tex.se, but not for the tour-page ⟨meta.⟩tex.stackexchange.com/tour. You need a value of 101 (make a test with 100 …), and if there were changes in future it could be more increased, of course.

  • A look into the original code revealed that the topbar has been defined to have a height of 34px, not 25px as in clstr’s code.


For an additional change – or better: fix – specifically for domain(tex.stackexchange.com) see Bug in the logo appearance with the new black top bar and my comment below this (Bug in the logo appearance with the new black top bar).

4

See Gallery of custom styles and/or scripts for the top-bar; I use the StackExchange™ MultiCollider SuperDropdown™ Fixes together with Stylish for Firefox.

You must log in to answer this question.

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