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.
  • Posts

    • Thanks, Sony and Nintendo, you effectively killed platform-agnostic gaming. Long gone are the days when you could wish to play a specific game on whatever platform you were. Now, you have to buy the hardware just to play that single game. What, you're only interested in THAT game and nothing more? Bad luck, suck it and buy our console.
    • The AI data centers need it more than us so...let them gobble it all up at that price!
    • "CRAZIER than ever!" Crazy Taxi: World Tour is officially coming soon by Pulasthi Ariyasinghe Sega announced it is working on bringing back some of its classic franchises in 2023, and while it has taken some time, the company finally gave fans a look at one of these new projects at the Xbox Games Showcase today, which turned out to be a brand-new Crazy Taxi entry. Watch the debut trailer above, which has snippets of gameplay in between the cinematic bits while blasting a track from The Offspring. Dubbed Crazy Taxi World Tour, this installment is aptly being described as being "CRAZIER than ever!" The director behind the original, Kenji Kanno, is helming this new entry as well, which will come with access to five new cities to drive in, competitive multiplayer modes, a vehicle customization system, and more. Axel is returning as a protagonist as well, but this time a mystery driver is offering him the opportunity to take his adventures to the streets in other countries. This will involve Axel chasing down masked villains that have somehow stolen his taxi, which means even more extreme missions and challenges to overcome. "From transporting passengers at top speed to tackling unique side missions and odd jobs across dynamic maps, there are countless ways to drive crazy and rake in big money," says Sega about this new installment after over 20 years. "Perform outrageous drifts, catch insane air, and drive at crazy speeds across five different cities as you work to deliver passengers and complete a variety of missions and challenges." The studio has even confirmed an in-game Arcade Mode that players will be able to access containing the original games for plenty of nostalgic action. Crazy Taxi: World Tour is currently slated to release sometime in 2027 across PC, Xbox Series X|S, PlayStation 5, and Nintendo Switch 2.
    • This and Crazy Taxi are the two games that interested me the most from this showcase.
  • Recent Achievements

    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done
    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      492
    2. 2
      PsYcHoKiLLa
      248
    3. 3
      Steven P.
      71
    4. 4
      +Edouard
      69
    5. 5
      ATLien_0
      67
  • Tell a friend

    Love Neowin? Tell a friend!