Recommended Posts

Here is my edited code for the add-on bar:

(both maximized/minimized window mode.)

vnck2g.png

#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
        position: fixed;
        bottom: 0;
        left: 0;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
        -moz-appearance: none !important;
        padding: 4px 8px 1px 8px !important;
        margin-bottom: -1px !important;
        border: none !important;
        border-radius: 1.5px 1.5px 0 0 !important;
        margin-right: 0px !important;
        background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
        position: fixed;
        bottom: -7px;
        right: 18px;
        opacity: 0;
        -moz-transition: bottom 0.25s 0.5s ease-in, opacity 0.1s 0.65s ease-in;
}
#addon-bar .toolbarbutton-1 {
        vertical-align: bottom !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar:hover {
        bottom: 0;
        opacity: 1;
        -moz-transition: bottom .25s .25s ease-out, opacity 0.1s 0.25s ease-out;
}

#addonbar-closebutton {
    display: none !important;
}


#FindToolbar {
        border: none !important;
}
#FindToolbar .findbar-container {
        margin-bottom: -2px !important;
        margin-left: -2px !important;
        border-radius: 0 1.5px 0 0 !important;
        background: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
}
#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status, #FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
        padding-right: 5px !important;
}
#FindToolbar .find-status-icon[status="notfound"], #FindToolbar .find-status-icon[status="wrapped"] {
         margin-left: -1px !important;
}
#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
         display: none !important;
}

  • Like 2

How would I make my Firefox look like this?

35FEW.jpg

Just pin your home/startpage and use this about:home favicon script ;)

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

#urlbar [src="chrome://branding/content/icon16.png"], 
tab [src="chrome://branding/content/icon16.png"],
.bookmark-item [src="chrome://branding/content/icon16.png"] { 
  padding-left:16px !important; 
  margin-top: 0 !important;
  -moz-image-region: auto !important;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2goQEiscGAsM7wAAAbZJREFUKM+Nkb1rU2EUxn/vm/fmNokxCY0xSPu2UGgHqYh0qEXokMXJQZxdBJ2E+gGCu4OgUMGCdHJx8C+QzKJth0oVCqWgNS/Y2kJIevNx09v74XAjiZvPdDjnx3k4zxEMyQgskkR4+Doa9MUQIklTpIBPnQa9ASaGkCxjx+mrj1X322uOOaKtQ/4xSpiCuVRdyHy8EJWjzIe1eTNr8iYRT2WMkGfyffnm6sS1GaYZu15ZqRaZJBdjAowiz8TL8bdvps6XsAk54YAfew/u3z2gRlMHwigK6DtXvryYPlvCQhIR0OOI3Xrl4attDA1hzqFvVH4/m1FFkigEISE+Jxyy61588u4zPyVn5m/vPC+rPGlS2NiMMIKNTY5SamN58RYZRftr1do2qUfLo1goJCE+EOC560tEXq3XUTTcT+7495KHRZJTmkAGi1M6OJt02KcrtY9DMyBEImm7K/eeLrWQCAKApna0rwbRCwQtnM29XItCHCBDYQL9mzzAxyckZPDheFMQcUgWwS8gYh+BSx2IPQWAyYmp7FyMO1sikb3crzeo6dZfSJEmhYwvR5Ds1y5dHfB/+gPvmqQZh9ATTAAAAABJRU5ErkJggg==") no-repeat  center  !important; 
}

Just pin your home/startpage and use this about:home favicon script ;)

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

#urlbar [src="chrome://branding/content/icon16.png"], 
tab [src="chrome://branding/content/icon16.png"],
.bookmark-item [src="chrome://branding/content/icon16.png"] { 
  padding-left:16px !important; 
  margin-top: 0 !important;
  -moz-image-region: auto !important;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAAXNSR0IArs4c6QAAAAJiS0dEAP+Hj8y/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2goQEiscGAsM7wAAAbZJREFUKM+Nkb1rU2EUxn/vm/fmNokxCY0xSPu2UGgHqYh0qEXokMXJQZxdBJ2E+gGCu4OgUMGCdHJx8C+QzKJth0oVCqWgNS/Y2kJIevNx09v74XAjiZvPdDjnx3k4zxEMyQgskkR4+Doa9MUQIklTpIBPnQa9ASaGkCxjx+mrj1X322uOOaKtQ/4xSpiCuVRdyHy8EJWjzIe1eTNr8iYRT2WMkGfyffnm6sS1GaYZu15ZqRaZJBdjAowiz8TL8bdvps6XsAk54YAfew/u3z2gRlMHwigK6DtXvryYPlvCQhIR0OOI3Xrl4attDA1hzqFvVH4/m1FFkigEISE+Jxyy61588u4zPyVn5m/vPC+rPGlS2NiMMIKNTY5SamN58RYZRftr1do2qUfLo1goJCE+EOC560tEXq3XUTTcT+7495KHRZJTmkAGi1M6OJt02KcrtY9DMyBEImm7K/eeLrWQCAKApna0rwbRCwQtnM29XItCHCBDYQL9mzzAxyckZPDheFMQcUgWwS8gYh+BSx2IPQWAyYmp7FyMO1sikb3crzeo6dZfSJEmhYwvR5Ds1y5dHfB/+gPvmqQZh9ATTAAAAABJRU5ErkJggg==") no-repeat  center  !important; 
}

Thanks for that! Is it possible to make the orange firefox button in the above style?

Isn't that what you wanted? Or do you mean the position of it?

I should have been a bit more clearer in my original post.

Currently I have the moved the orange button to the same row as my tabs.

Instead of it being orange I want it to look like another tab as in this mockup I've thrown together below:

DafnQ.jpg

Here is my edited code for the add-on bar:

(both maximized/minimized window mode.)

vnck2g.png

#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
        position: fixed;
        bottom: 0;
        left: 0;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
        -moz-appearance: none !important;
        padding: 4px 8px 1px 8px !important;
        margin-bottom: -1px !important;
        border: none !important;
        border-radius: 1.5px 1.5px 0 0 !important;
        margin-right: 0px !important;
        background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
        position: fixed;
        bottom: -7px;
        right: 18px;
        opacity: 0;
        -moz-transition: bottom 0.25s 0.5s ease-in, opacity 0.1s 0.65s ease-in;
}
#addon-bar .toolbarbutton-1 {
        vertical-align: bottom !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar:hover {
        bottom: 0;
        opacity: 1;
        -moz-transition: bottom .25s .25s ease-out, opacity 0.1s 0.25s ease-out;
}

#addonbar-closebutton {
    display: none !important;
}


#FindToolbar {
        border: none !important;
}
#FindToolbar .findbar-container {
        margin-bottom: -2px !important;
        margin-left: -2px !important;
        border-radius: 0 1.5px 0 0 !important;
        background: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
}
#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status, #FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
        padding-right: 5px !important;
}
#FindToolbar .find-status-icon[status="notfound"], #FindToolbar .find-status-icon[status="wrapped"] {
         margin-left: -1px !important;
}
#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
         display: none !important;
}

Nice, using this (Y)

Here is my edited code for the add-on bar:

(both maximized/minimized window mode.)

vnck2g.png

#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
        position: fixed;
        bottom: 0;
        left: 0;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
        -moz-appearance: none !important;
        padding: 4px 8px 1px 8px !important;
        margin-bottom: -1px !important;
        border: none !important;
        border-radius: 1.5px 1.5px 0 0 !important;
        margin-right: 0px !important;
        background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
        position: fixed;
        bottom: -7px;
        right: 18px;
        opacity: 0;
        -moz-transition: bottom 0.25s 0.5s ease-in, opacity 0.1s 0.65s ease-in;
}
#addon-bar .toolbarbutton-1 {
        vertical-align: bottom !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar:hover {
        bottom: 0;
        opacity: 1;
        -moz-transition: bottom .25s .25s ease-out, opacity 0.1s 0.25s ease-out;
}

#addonbar-closebutton {
    display: none !important;
}


#FindToolbar {
        border: none !important;
}
#FindToolbar .findbar-container {
        margin-bottom: -2px !important;
        margin-left: -2px !important;
        border-radius: 0 1.5px 0 0 !important;
        background: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset !important;
}
#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status, #FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
        padding-right: 5px !important;
}
#FindToolbar .find-status-icon[status="notfound"], #FindToolbar .find-status-icon[status="wrapped"] {
         margin-left: -1px !important;
}
#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
         display: none !important;
}

Very nice (Y)

Hmm seeing as Audioboxer's code is the same as mine but my bar looks different I guess my Windows theme (Soft7) is interfering. Is there any way to over-ride this?

When kilara1988 asked me if I was using a theme on the other FF thread I assumed they meant a Firefox theme, but maybe they meant a Windows one.

Hi! I've been using this code to make the tab bar smaller :

#TabsToolbar{
   height: 24px !important;
}

 .tabbrowser-tab, .tabs-newtab-button {
   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 3 2 3 / 4px 3px 2px 3px repeat stretch !important;
border-radius:4px 4px 4px 4px !important;
 }

It worked fine till today when i updated to the latest nightly build 4.2a1pre.

Now it's doesn't work as it should so I'd be very grateful if someone could post an updated version.

How would I go about deleting the top portion of the bookmarks menu?

DMRtA.jpg

for just the bookmark menubutton:

#BMB_viewBookmarksToolbar,
#BMB_bookmarksShowAll,
#BMB_bookmarkThisPage,
#BMB_subscribeToPageMenuitem,
#BMB_subscribeToPageMenupopup,
#BMB_bookmarksToolbar,
#BMB_bookmarksPopup > menuseparator:nth-child(2),
#BMB_bookmarksPopup > menuseparator:nth-child(4),
#BMB_bookmarksPopup > menuseparator:nth-child(8),
#BMB_bookmarksPopup > menuseparator:nth-child(10) {
        display: none !important;
}

Is there a way to move the page loading status poput at the bottom left of the screen? I want it a few pixels up and few to the right, so there's just a little gap.

statuspanel { position: fixed; top: 456px; min-width: 25% !important; max-width: 90% !important; pointer-events: none !important; }

brings it near the middle of my screen, height-wise. Increasing the "top" value will lower it further.

I don't know of a way to move it to the right.

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

    • No registered users viewing this page.