Aris wrote:Here is a small tweak to get curved/colored non-selected tabs.
Small
Aris wrote:Here is a small tweak to get curved/colored non-selected tabs.
malliz wrote:My comment was more on how many lines of code it takes to do anything at all with Firefox now although Franks new theme is only 49k.
Frank Lion wrote:Challenge - Using Australis, separate the Stop and Reload buttons and move both of them outside and to the left of the urlbar and to the left or right (your choice) of the Forward and Back buttons, with correct spacing on all parts.
Rules - no experienced themers/coders allowed.
Caspid wrote:This topic seems educational.
Code: Select all
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {
/* no large icons for back, forward and panelui buttons available */
#nav-bar :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="toolbar"] {
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #home-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 128px, 32px, 96px) !important;
}
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 160px, 32px, 128px) !important;
}
#nav-bar #bookmarks-menu-button[starred][cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 192px, 32px, 160px) !important;
}
#nav-bar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon{
padding-top:9px !important;
padding-bottom:9px !important;
}
#nav-bar #history-panelmenu[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 224px, 32px, 192px) !important;
}
#nav-bar #downloads-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 256px, 32px, 224px) !important;
}
#nav-bar #downloads-indicator-icon {
width:32px !important;
height:32px !important;
background: -moz-image-rect(url("chrome://browser/skin/menuPanel.png"),
0, 256, 32, 224) center no-repeat !important;
}
#nav-bar #add-ons-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 288px, 32px, 256px) !important;
}
#nav-bar #open-file-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 320px, 32px, 288px) !important;
}
#nav-bar #save-page-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 352px, 32px, 320px) !important;
}
#nav-bar #sync-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 384px, 32px, 352px) !important;
}
#nav-bar #feed-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 416px, 32px, 384px) !important;
}
#nav-bar #social-share-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 448px, 32px, 416px) !important;
}
#nav-bar #email-link-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 448px, 32px, 416px) !important;
}
#nav-bar #email-link-button[cui-areatype="toolbar"] > image {
transform: scale(-1, -1) !important;
}
#nav-bar #characterencoding-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 480px, 32px, 448px) !important;
}
#nav-bar #new-window-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 512px, 32px, 480px) !important;
}
#nav-bar #new-tab-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 544px, 32px, 512px) !important;
}
#nav-bar #privatebrowsing-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 576px, 32px, 544px) !important;
}
#nav-bar #find-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 640px, 32px, 608px) !important;
}
#nav-bar #print-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 672px, 32px, 640px) !important;
}
#nav-bar #fullscreen-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 704px, 32px, 672px) !important;
}
#nav-bar #developer-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 736px, 32px, 704px) !important;
}
#nav-bar #preferences-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 768px, 32px, 736px) !important;
}
#nav-bar #switch-to-metro-button[cui-areatype="toolbar"] {
list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png) !important;
}
/* extra buttons from CTR add-on*/
#nav-bar #ctr_stop-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 96px, 32px, 64px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #ctr_reload-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 64px, 32px, 32px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #ctr_history-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 224px, 32px, 192px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
/* star icon instead of old bookmarks icon */
#nav-bar #ctr_bookmarks-button > .toolbarbutton-icon,
#nav-bar #ctr_bookmarks-menu-toolbar-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 160px, 32px, 128px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
}
Code: Select all
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {
#nav-bar :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button)[cui-areatype="toolbar"] {
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #back-button > .toolbarbutton-icon{
transform: rotate(90deg) !important;
background:none !important;
border: none !important;
box-shadow: none !important;
}
#nav-bar #forward-button > .toolbarbutton-icon{
transform: rotate(90deg) scale(1, -1) !important;
margin-top: -4px !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
#nav-bar #forward-button{
-moz-image-region: rect(0px, 256px, 32px, 224px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #back-button{
-moz-image-region: rect(0px, 256px, 32px, 224px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #home-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 128px, 32px, 96px) !important;
}
#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 160px, 32px, 128px) !important;
}
#nav-bar #bookmarks-menu-button[starred][cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 192px, 32px, 160px) !important;
}
#nav-bar #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon{
padding-top:9px !important;
padding-bottom:9px !important;
}
#nav-bar #history-panelmenu[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 224px, 32px, 192px) !important;
}
#nav-bar #downloads-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 256px, 32px, 224px) !important;
}
#nav-bar #downloads-indicator-icon {
width:32px !important;
height:32px !important;
background: -moz-image-rect(url("chrome://browser/skin/menuPanel.png"),
0, 256, 32, 224) center no-repeat !important;
}
#nav-bar #add-ons-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 288px, 32px, 256px) !important;
}
#nav-bar #open-file-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 320px, 32px, 288px) !important;
}
#nav-bar #save-page-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 352px, 32px, 320px) !important;
}
#nav-bar #sync-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 384px, 32px, 352px) !important;
}
#nav-bar #feed-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 416px, 32px, 384px) !important;
}
#nav-bar #social-share-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 448px, 32px, 416px) !important;
}
#nav-bar #email-link-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 448px, 32px, 416px) !important;
}
#nav-bar #email-link-button[cui-areatype="toolbar"] > image {
transform: scale(-1, -1) !important;
}
#nav-bar #characterencoding-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 480px, 32px, 448px) !important;
}
#nav-bar #new-window-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 512px, 32px, 480px) !important;
}
#nav-bar #new-tab-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 544px, 32px, 512px) !important;
}
#nav-bar #privatebrowsing-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 576px, 32px, 544px) !important;
}
#nav-bar #find-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 640px, 32px, 608px) !important;
}
#nav-bar #print-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 672px, 32px, 640px) !important;
}
#nav-bar #fullscreen-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 704px, 32px, 672px) !important;
}
#nav-bar #developer-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 736px, 32px, 704px) !important;
}
#nav-bar #preferences-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 768px, 32px, 736px) !important;
}
#nav-bar #switch-to-metro-button[cui-areatype="toolbar"] {
list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png) !important;
}
/* extra buttons from CTR add-on*/
#nav-bar #ctr_stop-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 96px, 32px, 64px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #ctr_reload-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 64px, 32px, 32px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
#nav-bar #ctr_history-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 224px, 32px, 192px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
/* star icon instead of old bookmarks icon */
#nav-bar #ctr_bookmarks-button > .toolbarbutton-icon,
#nav-bar #ctr_bookmarks-menu-toolbar-button > .toolbarbutton-icon{
-moz-image-region: rect(0px, 160px, 32px, 128px) !important;
list-style-image: url(chrome://browser/skin/menuPanel.png) !important;
}
/* remove back/forward buttons clipping */
#nav-bar * {
clip-path:none !important;
}
/* urlbar tweaks */
#nav-bar #urlbar {
border-left: 1px solid #b2c1cf !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
#nav-bar #urlbar[focused="true"] {
border-left: 1px solid #72c0fe !important;
}
#nav-bar .searchbar-textbox{
padding-top: 2px !important;
padding-bottom: 2px !important;
}
}
Aris wrote:Very large icons from panel menu for navigation toolbar...
(no large icons for back, forward and panelui buttons available)
Code: Select all
/******* DEATH TO SWOOPY *********/
.tab-background,
.tab-background *,
.tab-background *::before,
.tab-background *::after {
background: unset!important;
}
#TabsToolbar > toolbarbutton,
#TabsToolbar tabs toolbarbutton[onmouseover],
.tabbrowser-tab {
-moz-appearance: tab!important;
color: -moz-dialogText!important;
}
.tabs-newtab-button {
margin: unset!important;
width: 30px!important;
}
patrickjdempsey wrote:Here's a fun one for your school Frank. It's clean and simple and works.
The magic:
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
Steve196 wrote:As a semi-experienced coder, I'm still quite green when it come to CSS...
Code: Select all
/*frank mystery snippet...put ABOVE the namespace line in userChrome.css...*/
::-moz-selection {
-moz-appearance:none !important;
background:#6B7E8F;
color: white;}
Frank Lion wrote:Not an easy one this, as you've seen there are around 12 or so invisible boxes in the urlbar area. Maybe try moving other areas around using ordinal-group and leaving the Stop/Reload where they (think they are) are and see what happens.
smsmith wrote:Besides trying to reorder the boxes (which I, too, have been able to accomplish), is there a way using just CSS to move one of the inner boxes outside of the outer boxes, or are we limited to just moving the boxes within the outer boxes?
Code: Select all
#urlbar {
border:unset!important;
background:unset!important;
}
#urlbar .autocomplete-textbox-container {
-moz-appearance:textfield!important;
}