Firefox 29 Remove Back button round, "focus" highlight

edited June 2014 in Style Requests
Is there a way to eliminate (or reduce size) of the round ring around the Back button in Firefox 29? Maybe the same for the square around the Forward button. Then maybe reduce the "extra" Nav bar's background space, above & below the URL box?

I've played around for a good while with all sorts of code to eliminate the large highlight ring, around Back button in Firefox 29. The ring / circle's too large & looks kinda strange w/ the square area around Forward button. The square highlight could stand to be smaller, as well.

I searched through several CSS files from omni.ja, copied 10 - 12 various lines from them that seemed related, into a user style & tried to over ride those rules (various ways). Didn't work. I was able to over ride / change display of some other buttons - like window size control, buttons in Addons Mgr, etc., but not the ring around the back button.

I've used a Vista custom buttons user style for many Fx versions - the large, white-ish ring & somewhat smaller square around nav buttons in Fx 29 didn't exist in earlier Fx versions using the Vista buttons code.
But, I disabled it as a test in Fx 29, which didn't change the large ring around Back button.

Here's the code for the custom back / forward buttons.
Thanks.

/* Custom Vista Style Navigation Buttons (originally for pre-Fx 29-Australis)*/

/*Back Button */

#back-button .toolbarbutton-icon {

list-style-image: url(file:///E:/Temp/Mozilla/Firefox/icons/Buttons/http%25userstyles.org_styles_4231_vista-back-forward-buttons-variation-2-updated/18266.png);
margin-right: -5px
!important;

-moz-image-region: rect(0px 29px 27px 0px);

}

#back-button:not([disabled="true"]):hover .toolbarbutton-icon,

#back-button[buttonover="true"] .toolbarbutton-icon {

-moz-image-region: rect(0px 58px 27px 29px);

}

#back-button[disabled="true"] .toolbarbutton-icon {

-moz-image-region: rect(0px 87px 27px 58px);

}

#back-button:not([disabled="true"]):hover:active .toolbarbutton-icon {

-moz-image-region: rect(0px 116px 27px 87px);

}



/* Forward Button */

#forward-button .toolbarbutton-icon {

list-style-image: url(file:///E:/Temp/Mozilla/Firefox/icons/Buttons/http%25userstyles.org_styles_4231_vista-back-forward-buttons-variation-2-updated/159834.png);
margin-left: -5px
!important;

-moz-image-region: rect(0px 29px 27px 0px);

}

#forward-button:not([disabled="true"]):hover .toolbarbutton-icon,

#forward-button[buttonover="true"] .toolbarbutton-icon {

-moz-image-region: rect(0px 58px 27px 29px);

}

#forward-button[disabled="true"] .toolbarbutton-icon{

-moz-image-region: rect(0px 87px 27px 58px);

}

#forward-button:not([disabled="true"]):hover:active .toolbarbutton-icon{

-moz-image-region: rect(0px 116px 27px 87px);

}


Comments

  • edited June 2014
    Is there a way to eliminate (or reduce size) of the round ring around the Back button in Firefox 29? Maybe the same for the square around the Forward button. Then maybe reduce the "extra" Nav bar's background space, above & below the URL box?
    #back-button#back-button#back-button>image.toolbarbutton-icon,
    #forward-button#forward-button#forward-button>image.toolbarbutton-icon
    {
    background: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    }

    #nav-bar>*{
    margin-top: -6px !important;
    margin-bottom: -9px !important;
    }
    I wasn't able to try it with your images because they're on your computer.
  • freecyber - you're king of the forum. Many Thanks.

    Seems to work perfectly w/ my custom button images (& code) with my install of Firefox 29.

    Curious about the three "#back-button" entries in succession? Why's it needed? Never seen that (though I'm not that experienced).

    I use a light weight theme - doesn't seem to be a problem, w/ your code. I increased the nav bar height a bit in the 2 lines:
    margin-top: -3px !important;
    margin-bottom: -3px !important;
    Others using this can play w/ those values, to adjust Nav bar height. Doesn't seem to affect URL field height. But, depending on your actual URL field height (or text size in that field), may have to increase Freecyber's values.

    I'll have to see if I can adapt the same code to reduce bookmark toolbar height a bit. Guessing there's code to bring Addon Bar back & control it's height?

    #PersonalToolbar {
    margin-top: -3px !important;
    margin-bottom: -3px !important;
    }


    My bookmarks bar (PersonalToolbar) code seems to work OK to reduce wasted height of entire bookmarks toolbar. But, I didn't use three instances of "#PersonalToolbar" in a row.

    I use bookmarks toolbar to place addon icons - at R side of bar, since addon bar went away. But the default bar is much higher than addon or bookmark Icons. Don't want another addon, just to get Addon Bar back.



  • You can't 'bring Addon Bar back' with a css. css changes HOW things look not WHAT they do. You need an extension for that. Like this, for instance. I use Customize Palette Fix by Sonny.
    But since you 'don't want another addon ...' ... good luck!
  • Thanks. Since the bookmark toolbar provides space to place icons, not much diff between it & addon bar (for that).

    I try to avoid addons when possible. To each his own. Usually, the more you have, the more time needed to deal with issues they create w/ one another & w/ Firefox. I try to stick w/ important ones providing something that's not possible any other way.
  • edited June 2014
    Curious about the three "#back-button" entries in succession? Why's it needed? Never seen that (though I'm not that experienced).
    I needed that many ids to provide enough "css specificity" (you can google it) to override Firefox's rules for the back button (which use !important for some reason) in all cases (including disabled, hover, non-hover). Something like #main-window #tab-view-deck #back-button>image.toolbarbutton-icon
    would also work. But if you try it using less than 3 ids (like #tab-view-deck #back-button>image.toolbarbutton-icon), you'll see the circle around the back button appears in some cases.

    I don't know if that was necessary for #forward-button, but it doesn't hurt.

    I do use an extension that restores the addon bar, but icons can also be placed on the menu bar, which can be auto-hidden (normally I have it permanently hidden) - I think that would make the add-on bar unnecessary for me. Someone suggested that recently but I haven't gotten around to it.
  • edited June 2014
    Well, thanks for explanation & the code - it's working well so far. Nice & compact. All icons, buttons still fit & function.
    Thanks makondo for input.

    Three repetitions of an id to over ride Fx rules - really strange. Is that by some CSS design, or more because something Mozilla did (by design, bug or other reason)?
    the menu bar, which can be auto-hidden
    You mean have the menubar hide when not using, then reappear w/ some mouse or keystroke?

    Other than the menubar auto-hide thing, not much diff between using the bookmarks bar or menu to place icons. Unless one fills up the bookmark toolbar completely w/ bookmarks & needs the space.

    I tried adding an icon to menu bar - it'd only let me put one on the far L - beside the Help menu. If dropped near the window sizing buttons, it ziiiiiippped over to the left,near Help.
  • You need to put a flex space to the left of it. But they canceled it in Fx29!!! The smartest thing ever! Now, the Customize Palette Fix i linked above adds the flex space back into the customize palette. Rclick/Customize/drag the flex space to the left of your button(-s) next to the Help (see? addons bar and flex space + more! but since you don't want another ext. ....)
  • Thanks, but no... don't need another addon, when the bookmarks toolbar works to park icons (for me). That doesn't mean someone doesn't want to use the menu bar for icons.
Sign In or Register to comment.