MozillaZine

That little bitty bookmark star - any tool for that?

User Help for Mozilla Firefox
zorro6204
 
Posts: 52
Joined: November 10th, 2004, 4:19 pm

Post Posted September 1st, 2018, 9:10 am

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
 
Posts: 2867
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 1st, 2018, 9:19 pm

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
 
Posts: 52
Joined: November 10th, 2004, 4:19 pm

Post Posted September 1st, 2018, 11:09 pm

"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

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted September 2nd, 2018, 3:40 am

zorro6204 wrote:... 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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

zorro6204
 
Posts: 52
Joined: November 10th, 2004, 4:19 pm

Post Posted September 2nd, 2018, 8:28 am

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

dickvl

User avatar
 
Posts: 52416
Joined: July 18th, 2005, 3:25 am

Post Posted September 2nd, 2018, 12:40 pm

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
 
Posts: 2867
Joined: February 3rd, 2009, 6:29 pm

Post Posted September 6th, 2018, 9:21 am

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

Here is a thumbnail viewer bookmarklet to view image files in a local folder.

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/mail/themes/shared/mail/icons/mail-toolbar.svg
http://dxr.mozilla.org/comm-esr52/raw/mail/themes/shared/mail/icons/mail-toolbar.svg#reply
http://dxr.mozilla.org/comm-esr52/raw/mail/themes/shared/mail/icons/mail-toolbar.svg#delete

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 5 guests