Recommended Posts

I have two buttons positioned at the extreme left side of the toolbar. From left to right, one is for new tab and the second is for the "home page". Both buttons are png files stored in a local directory:

toolbox[iconsize="small"] #new-tab-button > .toolbarbutton-icon { list-style-image: url("file:///e:/Pics/newtab.png") !important; padding-top: 9px !important; padding-left: 4px !important; }

toolbox[iconsize="small"] #home-button > .toolbarbutton-icon { list-style-image: url("file:///e:/Pics/home.png") !important; -moz-image-region: rect(0px,18px,16px,1px) !important; padding-bottom: 2px !important; }

The thing that I cannot understand is why it seems that this part, "-moz-image-region: rect(0px,18px,16px,1px) !important;", is necessary for the home button png to be displayed. Omitting it gives me a blank space (which is still functional in that clicking on the blank space sends me to the home page). There is no other image in the rectangle and the png in question is 19x17 px. I have tried fiddling with various padding settings, left, right, bottom, and top with no success.

I have no problem with the new tab png.

I have two buttons positioned at the extreme left side of the toolbar. From left to right, one is for new tab and the second is for the "home page". Both buttons are png files stored in a local directory:

The thing that I cannot understand is why it seems that this part, "-moz-image-region: rect(0px,18px,16px,1px) !important;", is necessary for the home button png to be displayed. Omitting it gives me a blank space (which is still functional in that clicking on the blank space sends me to the home page). There is no other image in the rectangle and the png in question is 19x17 px. I have tried fiddling with various padding settings, left, right, bottom, and top with no success.

I have no problem with the new tab png.

Try using this instead.

-moz-image-region: auto !important;

Thanks, Soapy, that works just perfectly :) .

(But what is special about the home button that is requiring specifying "-moz-image-region" at all? Why don't I need it for the new tab?)

All the toolbar buttons are already given a list-style-image and -moz-image-region. If you try to point it to a new list-style-image it will still use the old -moz-image-region value. Setting -moz-image-region: auto just tells it to use the whole image. Hope that makes sense.

All the toolbar buttons are already given a list-style-image and -moz-image-region. If you try to point it to a new list-style-image it will still use the old -moz-image-region value. Setting -moz-image-region: auto just tells it to use the whole image. Hope that makes sense.

Okay, thanks for the explanation :)

In other words, a standalone png (like the new tab one) wouldn't need the moz-image-region but the various pngs that are normally part of toolbar.png will. I hope I got that right!

Okay, thanks for the explanation :)

In other words, a standalone png (like the new tab one) wouldn't need the moz-image-region but the various pngs that are normally part of toolbar.png will. I hope I got that right!

https://developer.mozilla.org/en/CSS/-moz-image-region

http://browsers-dox.net/Que-Firefox.and.Thunderbird-/0789734583/ch15lev1sec3.html

Foxxyn8, thanks for those links. I had referred to the first one when I wanted to point to a specific button in the multibutton image. My confusion arose after I reduced the multibutton image to a single button image with Gimp. But all is well (for) now.

Hi is there a way to have the download window work like it does in this mockup.

44d20844e231f85e5364b11c1c7d4b7e4ebf0deb.png

My God that mockup is so beautiful. Someone needs to make it a reality.

Also I believe there were a couple of test builds that actually have that functionality. you click the download button and that download window pops up exactly like in the preview. It never made it into the RC though.

Follow-up requests!

Is there a way to style the buttons?

Can I get rid of the "opacity effect" on the rest of the page?

to style just those buttons start with this and add the selectors and properties you want to change:

tabmodalprompt button {
-moz-appearance: none !important;

get rid of overlay :

tabmodalprompt {
background: none !important;
}

Could someone please help me hide the "Bookmarks Toolbar w/separator" & "Unsorted Bookmarks w/separator" from the menu button > bookmarks menu.

I was using this code in FF3 but it no longer works:

/* Hide Bookmarks Toolbar Folder */

#bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu+menuseparator {display: none !important;}

Could someone please help me hide the "Bookmarks Toolbar w/separator" & "Unsorted Bookmarks w/separator" from the menu button > bookmarks menu.

I was using this code in FF3 but it no longer works:

/* Hide Bookmarks Toolbar Folder */

#bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu+menuseparator {display: none !important;}

This will hide those items in all 3 bookmark menus

#BMB_bookmarksToolbar,
#BMB_bookmarksToolbar + menuseparator,
#appmenu_bookmarksToolbar,
#appmenu_bookmarksToolbar + menuseparator,
#bookmarksToolbarFolderMenu,
#bookmarksToolbarFolderMenu + menuseparator,
#BMB_unsortedBookmarks,
#appmenu_unsortedBookmarks,
menuseparator.hide-if-empty-places-result {
        display: none !important;
}

Thx Foxxy! That was perfect.

Now that I think of it, I'd like to also remove "Bookmark This Page" since I only use the icon in the locationbar for that.

Thanks again!

#BMB_bookmarkThisPage,
#appmenu_bookmarkThisPage,
#menu_bookmarkThisPage {
        display: none !important;
}

Hey, I'm not very good with my CSS syntax, but is there a way to apply a style to all toolbars EXCEPT for the navigation bar? For example, #navigator-toolbox {} lets me adjust settings for all toolbars simultaneously, but I'd like to exclude the navigation bar from this set. Thank you.

Hey, I'm not very good with my CSS syntax, but is there a way to apply a style to all toolbars EXCEPT for the navigation bar? For example, #navigator-toolbox {} lets me adjust settings for all toolbars simultaneously, but I'd like to exclude the navigation bar from this set. Thank you.

#navigator-toolbox > toolbar:not(#nav-bar) {
}

to style just those buttons start with this and add the selectors and properties you want to change:

tabmodalprompt button {
-moz-appearance: none !important;

get rid of overlay :

tabmodalprompt {
background: none !important;
}

Thanks, foxxyn8!

I got the buttons sorted out. But a comment about the "background: none !important;" bit. On my net-banking site, when I use "background: none !important;" the modal dialog box (if that's the phrase) appears a bit transparent with the contents of the page underneath the box being somewhat visible. Changing it to "background: black !important;" wipes out the rest of the page until I close the box by hitting "OK" so I'm going with "background: black !important;".

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Dude get a clue, LTSC is Enterprise, not even legal for consumers, and ESU is not mainstream support cycle, just an extended security updates period.
    • Nvidia is your issue more so than linux itself. I did used it for a while with an old 1060 3gb, but using propietary drivers was kind of messy.
    • Qmmp 2.3.3 by Razvan Serea Qmmp (Qt-based MultiMedia Player) is a free, open-source audio player that delivers a classic music listening experience with a modern foundation. Inspired by the legendary Winamp, Qmmp features a familiar, customizable interface that supports both Winamp and XMMS skins, making it instantly recognizable to long-time users. It handles a wide variety of audio formats including MP3, OGG Vorbis, FLAC, WAV, AAC, and many others, ensuring smooth playback across diverse music libraries. In addition to basic playback, Qmmp offers advanced features such as a 10-band equalizer, crossfading, gapless playback, and audio visualization plugins. Users can manage playlists efficiently, create and save multiple lists, and even enable streaming from online sources. Plugin support extends the player’s capabilities, allowing integration of features like lyrics display, ReplayGain, and more. Built with the Qt framework, Qmmp runs smoothly and efficiently, making it ideal even for older systems. 10 great QMMP features you might not know: Global Hotkeys Support – Control playback using customizable system-wide keyboard shortcuts. CUE Sheet Support – Automatically detects and plays tracks from CUE files for full album playback. Last.fm Scrobbling – Integrated support for sending playback data to Last.fm. Audio CD Playback – Play music directly from audio CDs. Command Line Interface – Control Qmmp via command-line options for scripting or automation. System Tray Integration – Minimize to and control playback from the system tray. MPRIS Support – Integration with desktop media player controls via the MPRIS (Media Player Remote Interfacing Specification) interface. Spectrum Analyzer and Oscilloscope – Built-in visualizations for real-time audio feedback. Configurable Notifications – Custom pop-ups for track changes and playback status. Multiple Output Backends – Support for ALSA, PulseAudio, JACK, and more, offering flexible audio routing. Qmmp 2.3.3 changelog: fixed build with PipeWire versions less than 0.3.50; fixed settings dialog layout; fixed default CUE encoding; fixed possible null pointer dereference; fixed tracks order when added using drag and drop (2.3.3 only); fixed uninitialized structure usage; improved sid plugin: added libsidplayfp 3.0 support; added feature to build without residfp engine; fixed memory leak; fixed displaying audio information; updated Japanese translation (2.3.3 only). Download: Qmmp 64-bit | 24.0 MB (Open Source) Download: Qmmp 32-bit | 24.1 MB View: Qmmp Homepage | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • BATorrent 3.0.3 is out.
  • Recent Achievements

    • Rookie
      moog19 went up a rank
      Rookie
    • Mentor
      grik went up a rank
      Mentor
    • Dedicated
      JKR earned a badge
      Dedicated
    • One Year In
      CHUNWEI earned a badge
      One Year In
    • Conversation Starter
      FBSPL earned a badge
      Conversation Starter
  • Popular Contributors

    1. 1
      +primortal
      496
    2. 2
      PsYcHoKiLLa
      270
    3. 3
      Skyfrog
      75
    4. 4
      Steven P.
      68
    5. 5
      FloatingFatMan
      63
  • Tell a friend

    Love Neowin? Tell a friend!