MozillaZine


Fx4* .css tweaks

Discussion of general topics about Mozilla Firefox
_Dexter_

User avatar
 
Posts: 1436
Joined: August 30th, 2008, 6:54 pm
Location: Miami

Post Posted February 9th, 2011, 11:02 am

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.
Intel i7 Core Quad @ 4.25Ghz | Cooler Master Hyper 212 Plus | 12GB PC3-16000 RAM | ASUS HD6970 2GB - 12.3 CATS | ASUS PA246Q IPS 24" LCD 16:10 | OCZ AGILITY-EX SSD SLC | Windows 7 SP1 x64 Ultimate

mpurna77
 
Posts: 141
Joined: August 9th, 2009, 3:57 pm

Post Posted February 9th, 2011, 11:55 am

mpurna77 wrote:
ajnauron wrote:@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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted February 9th, 2011, 4:20 pm

streetwolf wrote: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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

rob64rock

User avatar
 
Posts: 2122
Joined: November 11th, 2009, 6:16 am

Post Posted February 10th, 2011, 10:34 pm

goldyn chyld wrote: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... :D

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

User avatar
 
Posts: 48
Joined: January 21st, 2010, 4:01 pm
Location: Occupied USA

Post Posted February 11th, 2011, 12:24 am

rob64rock wrote:
"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

User avatar
 
Posts: 302
Joined: April 9th, 2010, 9:16 am

Post Posted February 11th, 2011, 12:58 am

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

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted February 11th, 2011, 1:01 am

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;}
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

foxxyn8

User avatar
 
Posts: 48
Joined: January 21st, 2010, 4:01 pm
Location: Occupied USA

Post Posted February 11th, 2011, 1:46 am

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;
}
Last edited by foxxyn8 on February 11th, 2011, 2:22 am, edited 2 times in total.

rob64rock

User avatar
 
Posts: 2122
Joined: November 11th, 2009, 6:16 am

Post Posted February 11th, 2011, 2:00 am

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... :D

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted February 11th, 2011, 3:13 am

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. :P
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

rob64rock

User avatar
 
Posts: 2122
Joined: November 11th, 2009, 6:16 am

Post Posted February 11th, 2011, 3:41 am

patrickjdempsey wrote: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. :P

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??? :-k

newtr0n
 
Posts: 44
Joined: December 8th, 2008, 2:48 pm

Post Posted February 11th, 2011, 4:17 pm

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
 
Posts: 1896
Joined: May 30th, 2004, 5:20 am

Post Posted February 11th, 2011, 6:12 pm

newtr0n wrote: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

User avatar
 
Posts: 460
Joined: April 10th, 2010, 4:39 pm

Post Posted February 12th, 2011, 2:35 pm

I prefer to use the Movable Firefox Button addon, by the maker of Personal Menu.
Intel Core i3-2310M | NVIDIA GeForce GT 540M | 16GB G.SKILL DDR3 1333MHz PC3-10666 | Western Digital 750GB 5400RPM | Windows 7 SP1 x64

GTK66
 
Posts: 1896
Joined: May 30th, 2004, 5:20 am

Post Posted February 12th, 2011, 3:23 pm

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


Different strokes. I prefer to fool around with CSS.

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 1 guest