Fx4* .css tweaks

[_Dexter_]

All of the Bing search engine icons in the searchbar are the same unlike Google which has a different icon for each feature (maps, images, videos, etc.)

Has anyone made or found some css code to change the Bing icons to reflect what they are? They would have to be different than Google's icons.

Thanks.

[mpurna77]

@mpurna77

Adjusted to normal tab height:

Code: Select all

#TabsToolbar[tabsontop="true"] .tabbrowser-tab[selected="true"]:not([pinned]) {
  margin-bottom: 0px !important;
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  opacity: 1 !important;
  margin-left: -2px !important;
  margin-right: -10px !important;
  position:relative !important;
  z-index: 10 !important;
  -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAZCAYAAACsGgdbAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAKxSURBVFhHxZdLaxpRGIZNCu2mdNWuuip0027yBwpdZVXotn+i20JXXRX6GwpdKoI3RBGxoKIoGsT7/TZSxPuFrIRC4PR9hSOTVDMzcTIRDphwzvs8831zzow2m4FPtVp9z+mBQEC43e5bh8vlEnJwLr9zHdcj59wAVv/UQqHwAZBNKpUS/X5frNdrw4PruB45l8h7rZ+uY2alUjlH8N98Pi8Wi4VYLpditVoZHlzH9cxBXhe5L3Tgtac0m83HuPpuIpEQs9lsCzl2MId5yL1gvraFxoxyufzV4/EIhIn5fH60IC+QOcxjLqr54yjJdrv9MplMbuLxuJhMJqZKMo+5yL8E5+mdRbELv3i9XtFqtUxrtbxV2HLmMh+cz3eWzGQyxUgkYmoVpSRbzmoyP5vNdjudziPDorhn3oZCIdFoNEyvorqazCcHvI+GJYvF4ncewKPR6F4lmU8OeL8NS+KI+GP2hrl5dMmWkwPeVbfbfaVbFC145/P5BBaJ6XR6cFcfOpL0HlWcx3xyyAP3m25JPBF+8nk7Ho+vtVoN3yfC/6mHepOoq6hey11ODnngKoPB4ERTtNfrnUaj0RWfsdx9DLkJN/Nv5pNDHrgC/Geakthln3gjY/Ku1WZK7ctiy8kjF3yHpmQul4uy9HJX37cg81lN8sgFf3OrJF6lTsLh8FU6nd4d4FZIyl1OLvjbd86Dn3q9fuZ0OgVuXstaLYvAlpNLfq1We35QElei8FlqZaulpGw5+fC42CvJXe33+7cvpPKNx6pWSw655MPjCj5P/hMtlUqK3W4Xw+HQ8larW04+PeDz65okNwzfRmKx2O4At7qKcpfzYKcHfeB1uhXFlzd4uAuHwyEURXmwKqqrSQ/6wGvFAtpozPI+ROW0mPSC39wWDAZN+d1y7I+zQ+vp9w9UTA8Mbi94nwAAAABJRU5ErkJggg==") 0 16 0 16 !important;
}

.tabbrowser-tab:not([pinned]) {
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  padding: 1px 0px 0px 0px !important;
  background: transparent !important;
  border-top-width: 0px !important;
  border-right-width: 15px !important;
  border-bottom-width: 0 !important;
  border-left-width: 15px !important;
  border-bottom: 0 !important;
  margin-left: -1px !important;
  margin-right: -10px !important;
  position:relative !important;
  z-index: 5 !important;
  -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAZCAYAAACsGgdbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAAC3UlEQVRYR82XTWsaQRzGhUAhkFOhp54COfUzFAqFQCBQ6LWnfoBeC1USX6tFja+I0aTRBN9BfFeM0A+QUz+AIPRaCOQkFITp8yyMbGR1Z22UBoZdd/7zPL+Z//5nJzabhb/Ly8s3DPd4POL09HRlOzk5EbIxlvccx/HQObRgqx56fn5+DJNpNBoV5XJZjEYjcXt7qzXeL/5e7GM/x3E8dB6gd6DurhB5cXFxCOE/EBaDwUAMh8O1G8dTB3pj6L5QsDcPub6+fobZj8/OzkSn0xH9fl8D5VXeG/3mM/l88Uod6kH3jvrmFCYRmO0Xp9MpICZ6vZ4h3CpoORn9lTrUoy70v/0T5M3NzctIJDINh8Oi3W7PAY2M9Su7ql/2UY+60H+Az97aoKjCzy6XS5t1t9tVglQBZAz1qEt9+HxaGzKRSPwMBALKq6gKqF9N6ieTyXGhUNixDJrP51/5fD6Ry+XmBWMVwiyeBUR9+sDvnWXITCbzlRtwo9F48lRLeKac+vSB38gyJLaIX1YKxmzVlvXLAoLfDCnfVwZFCl7zhcagjaVaQjPl9KEffJ3KkPgiZPm9bTabG0u1PuX0oV86nZ5UKhXzAioWi7vBYPCe39hWq7UVSPrQD74C/m9NVxNV9oEvMoI3nmp9yulHX/iXTCFTqdSPbaXaKOXwn1ar1d2loDhK7fv9/lk8Htc2cP23et3qVRlHH/rRF/6iVCodLYW8urryOBwOgZd3a6nWp5y+9AeH8aGjVqvtxGKxCbeCp6xqmQ2zrHBjpy/9wXFnuJJ4cY/dbrd2IGW1mYnKFVgWpzper0Nf+oNjBp7nj0Dr9fpeNpud2O12gft5qlUAFmOMxvCZbMvOl3zOjZ3+5ADP90eQKJg0TyOhUGiear2w2T0NzGJU+mXKyUEecL3XQFFJH/Fx1+j5jxJnoyK4qRj6k4M84LoH34GNxHygslVsO4Zc4Ptt83q94n9vfwGxgRpZBWGziQAAAABJRU5ErkJggg==") 0 16 0 16 !important;
}

Thank you.

trying to change tab color using new image but its not working please have a look

Code: Select all

.tabbrowser-tab:not([pinned]) {
  font-family: "Segoe UI Semibold" !important;
  height:25px !important;
  min-height:25px !important;
  max-height:25px !important;
  padding: 1px 0px 0px 0px !important;
  background: transparent !important;
  border-top-width: 0px !important;
  border-right-width: 15px !important;
  border-bottom-width: 0 !important;
  border-left-width: 15px !important;
  border-bottom: 0 !important;
  margin-left: -4px !important;
  margin-right: -15px !important;
  position:relative !important;
  z-index: 5 !important;
  -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAZCAYAAACsGgdbAAAABGdBTUEAALGPC/xhBQAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmKOAAAAKESURBVFhHzZbraupAFEbjD99UH8Ki1gstaL0jXlovlWqrUGy9gj7AearCPlkDI6kmzqTHytkQTMzM963Ze3aSiLjhWEav13Pi8biTzWadr6+vs7O8spFIxOE6Go06t7e3ztPTkxOLxSxd3WFA2kS73RYXTiqViry+vsp+v5fdbqcOzo+vj+9xn3nMRwc927CCfHx8PAhvt1spZEfH8zXC0bXJoyQz8PavWlUkmWy6WCw2iz2aiDcy+4vvb+r+rX6Xj6qGLvimMkKw2nU4rsfV6fcigH4RegCnb6KCHrk02z0KORiMpl8vy8PAgi8XCqsQmQL1V0EMXfXzOxVlItwvF7Ua16tVqZQVpu1RQxd9fH4MWaX5f7+3jqLtoDebKLfaDTk5eUlkDMwk8PhUPL5vAwGg0PDhIUwjaeB0McHv6AIhOx0OpJMJmU+n1+81BqekqOPD36hIXlEhGkYU9aC7usGwi+o5L6ZpARsaCbpZ+NPIUzz0McHP3z9wheSN0IqlZKPj49fK7W35Pjg12q15O3t7YTzBHI8HkuhUFBvg8/Pz6tA4oMfvvgfxwkkXcZGZvBvl1pnEx/88PXr8hPIZrN5tVL7lRz/6XT6LZnfIPmUuru7k1qtph7g3ne1qQH+9T5++OI/mUyCIfv9vtzc3KjNe61Se0uOL5weOOQydlsJtVqVT0KLtnVuhqmqvBgxxdOHwh2biZTEZ9kNJtJlFTecPOZzy+6MLh7XKVyff3d+l2u2oA55SaD1oTyCXv44cv/olEQvHoUJA0DF8jxWLxoqUOuwj9OQgHPHARDp3Eyx16/rx2wwQtBB644HMg5o+wq77GeLjgc3K5nPzvx19F+t/GD0SWxQAAAABJRU5ErkJggg==") 0 16 0 16 !important;
}

[patrickjdempsey]

All of the Bing search engine icons in the searchbar are the same unlike Google which has a different icon for each feature (maps, images, videos, etc.)

Has anyone made or found some css code to change the Bing icons to reflect what they are? They would have to be different than Google's icons.

Thanks.

Have you strolled through MyCroft? It's easy enough (once you get the hang of it) to make your own custom search plugin with your own icons. I've had to do that for some sites where the icons weren't right for me.

[rob64rock]

Thanks! Since you seem to be quite familiar with Stylish, I would like to ask you for some help.

I would like to add the following features:

1) Move the "x" to the left of the tab.
2) Keep the favicon on the left of the tab and only make "x" appear when I hover over the favicon with my mouse (otherwise "x" would be hidden under the favicon).

Would that be possible?

Add this css code: ***Important***(This style is compatible with Tab Mix Plus extension just make sure TMP setting Display, Tab, Show on Tab, "Close tab button" - "on all" and "Place on left side" is selected)

"Firefox 4 Combine Tab Icon and Tab Close Button"

Code: Select all

    /* hide tab close button */
    tab .tab-close-button {
      visibility: collapse !important;
    }
    /* display close tab button on tab hover */
    tab:hover .tab-close-button {
      visibility: visible !important; margin-right:3px !important;
    }
    /* Move close tab button on left */
    .tab-throbber { -moz-box-ordinal-group: 3 !important;}
    .tab-icon-image { -moz-box-ordinal-group: 2 !important; margin-left:2px !important;}
    .tab-text { -moz-box-ordinal-group: 4 !important; margin-left:2px !important;}
    .tab-close-button { -moz-box-ordinal-group: 1 !important; margin-left:2px !important;}
    /* hide tab icon on tab hover */
    tab:hover .tab-icon-image {
      display: none !important;
    }


Let me know if that works for you...

Thanks for the idea and I will be uploading the css code above has a userstyle shortly with the name "Firefox 4 Combine Tab Icon and Tab Close Button"

[foxxyn8]

"Firefox 4 Combine Tab Icon and Tab Close Button"

Code: Select all

    /* hide tab icon on tab hover */
    tab:hover .tab-icon-image {
      display: none !important;
    }


That part needs to be

Code: Select all

    tab:not([pinned]):hover .tab-icon-image {
      display: none !important;
    }

[T0morrow]

Out of curiosity.How many lines are in your userChrome and userContent files combined? (excluding empty lines but including comment lines).Just checked and i have 214.

[patrickjdempsey]

Try this... a little less verbose:

Code: Select all

.tabbrowser-tab:not([pinned]):hover .tab-throbber, 
.tabbrowser-tab:not([pinned]):hover .tab-icon-image, 
.tabbrowser-tab:not(:hover) .tab-close-button { visibility: collapse !important;}
.tabbrowser-tab:not([pinned]):hover .tab-close-button { display: -moz-box !important;}

.tab-text { -moz-box-ordinal-group: 3 !important;}

.tab-close-button { margin-left: 2px !important; margin-right: 1px !important;}


[foxxyn8]

I use this to turn the favicon into a close button when hovering over it:

Code: Select all

.tabbrowser-tab:not([pinned="true"]) .tab-icon-image:hover {
       -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-close-tab-button") !important;
       list-style-image: url(chrome://global/skin/icons/close.png) !important;
       -moz-image-region: rect(0 32px 16px 16px) !important;
}

.tabbrowser-tab:not([pinned="true"]) .tab-icon-image:active {
       -moz-image-region: rect(0 48px 16px 32px) !important;
}

.tabbrowser-tab:not([pinned="true"]) .tab-close-button {
        visibility:hidden !important;
}


[rob64rock]

Thanks Foxxyn8 and Patrickjdempsey for the css help with fixing the problems with APP Tabs(Pinned tabs) with my style above.
The userstyle has been updated accordingly.

Thanks again for y'all s help...

[patrickjdempsey]

A few notes on that, foxxy's commands will fail on non-default themes, and my style will fail with Tab Mix Plus (if it still has the left close-button option). There's a workaround to disable part of the style if TMP is detected, but I'm being lazy.

[rob64rock]

A few notes on that, foxxy's commands will fail on non-default themes, and my style will fail with Tab Mix Plus (if it still has the left close-button option). There's a workaround to disable part of the style if TMP is detected, but I'm being lazy.

Thanks for that info...
I had a problem at first with that userstyle mentioned above with TMP, but I got it to work with TMP after almost giving up on it.

I still can't get my other "combined/throbber/close tab button on right side of tab" style to work with TMP though.

I really wanted to separate the tab-throbber from favicon, so the close tab button would be combined with the favicon on the left and tab-throbber would appear on the right side of tab, would that even be possible???

[newtr0n]

How can the minefield orange button be transformed into a tiny button with just the firefox logo, and right next to it, the back forward and url bar? And also, turn off the transparency.

[GTK66]

How can the minefield orange button be transformed into a tiny button with just the firefox logo, and right next to it, the back forward and url bar? And also, turn off the transparency.

Use the extension Stylish and install this style:

Firefox 4 Appmenu Button Icon Only

[ajnauron]

I prefer to use the Movable Firefox Button addon, by the maker of Personal Menu.

[GTK66]

I prefer to use the Movable Firefox Button addon, by the maker of Personal Menu.

Different strokes. I prefer to fool around with CSS.