That little bitty bookmark star - any tool for that?

[zorro6204]

Is anyone aware of a tool, and add-on maybe, that can change the appearance of Firefox tool bar items? Like pumping up that tiny girly man bookmark star into a decent size button?

[morat]

Are you talking about the bookmarks menu button?

Are you talking about the star in the location bar?

Try this:

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#bookmarks-menu-button {
  border-color: red !important;
  border-style: dashed !important;
  list-style-image: url("button.png") !important;
  -moz-image-region: auto !important;
}

#star-button {
  fill: lime !important;
}

#star-button[starred] {
  fill: magenta !important;
}

http://kb.mozillazine.org/UserChrome.css

You would need to download a button.png image to the chrome folder for the style to work correctly.

Example image
http://forum.mozilla-russia.org/uploade ... button.png

[zorro6204]

"Are you talking about the bookmarks menu button? Are you talking about the star in the location bar?"

There's two stars, one is for bookmarking a page, it's bigger and doesn't have a line underneath it, and then there's the one that shows your bookmarks, that's a tiny little star with a line under it. There's no "button", but a big fat rectangular one that says "bookmarks" on it would be nice. No little star needed or wanted, of whatever color.

[Frank Lion]

... but a big fat rectangular one that says "bookmarks" on it would be nice. No little star needed or wanted, of whatever color.

Well, find an image that looks like you want and use that. It's not going to change the code above, which will still work.

Alternatively, you can increase the size of the existing image with different .css code.

[zorro6204]

I see. Okay, well I'll give it a shot, thank you.

[dickvl]

You can find some builtin SVG icons here:
resource:///chrome/browser/skin/classic/browser/

For use in userChrome.css you can use this chrome URI as a shortcut:
chrome://browser/skin/bookmark-star-on-tray.svg

[morat]

You can find some builtin SVG icons here:
resource:///chrome/browser/skin/classic/browser/

Here is a thumbnail viewer bookmarklet to view icon files that were unzipped from the omni.ja archive into a local folder.

e.g. unzip.exe -n -j -q "C:\omni.ja" *.gif *.jpg *.png *.svg -d "C:\Icons"

-n : never overwrite existing files
-j : junk paths (do not make directories)
-q : quiet mode
-d : extract files into directory

Code: Select all

javascript:(function () {
  var uid = "__unique_identifier_thumbnail_viewer";
  if (typeof window[uid] == "undefined") {
    window[uid] = 1;
  }
  switch (window[uid]) {
    case (1):
      var as = document.querySelectorAll("a.file[href]");
      for (var i = 0; i < as.length; i++) {
        var img = document.createElement("img");
        img.alt = "not available";
        img.src = as[i].href;
        img.title = as[i].href.split("/").pop();
        img.width = "100";
        img.height = "100";
        as[i].parentElement.insertBefore(img, as[i]);
        if (as[i].firstElementChild) {
          as[i].firstElementChild.style.visibility = "hidden"; /* Firefox */
        } else {
          as[i].style.background = "none"; /* Chrome */
        }
      }
      window[uid] = 2;
      break;
    case (2):
      var as = document.querySelectorAll("a.file[href]");
      document.body.innerHTML = '<div style="display: flex; flex-wrap: wrap;"></div>';
      document.body.style = "font-family: Tahoma; font-size: 16px;";
      for (var i = 0; i < as.length; i++) {
        var figure = document.createElement("figure");
        figure.style = "margin: 5px; text-align: center;";
        var img = document.createElement("img");
        img.alt = "not available";
        img.src = as[i].href;
        img.title = as[i].href.split("/").pop();
        img.style = "max-width: 960px;";
        var figcaption = document.createElement("figcaption");
        figcaption.textContent = as[i].href.split("/").pop();
        figure.appendChild(img);
        figure.appendChild(figcaption);
        document.body.firstElementChild.appendChild(figure);
      }
      window[uid] = 3;
      break;
    default:
      location.reload();
      break;
  }
})();

Bookmarklet Builder
http://subsimple.com/bookmarklets/jsbuilder.htm

Click the bookmarklet once to view images with a 100 x 100 size constraint, click twice to view images normally and click thrice to reload the page. There are some SVG icons that can't be viewed without the anchor part (#) of the url.

Example
http://dxr.mozilla.org/comm-esr52/raw/m ... oolbar.svg
http://dxr.mozilla.org/comm-esr52/raw/m ... .svg#reply
http://dxr.mozilla.org/comm-esr52/raw/m ... svg#delete