Fx4* .css tweaks
- _Dexter_
- Posts: 1436
- Joined: August 30th, 2008, 6:54 pm
- Location: Miami
Re: Fx4 .css tweaks
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.
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
-
- Posts: 141
- Joined: August 9th, 2009, 3:57 pm
Re: Fx4 .css tweaks
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
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Fx4 .css tweaks
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- rob64rock
- Posts: 2122
- Joined: November 11th, 2009, 6:16 am
Re: Fx4 .css tweaks
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)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?
"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
- Posts: 48
- Joined: January 21st, 2010, 4:01 pm
- Location: Occupied USA
Re: Fx4 .css tweaks
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
- Posts: 302
- Joined: April 9th, 2010, 9:16 am
Re: Fx4 .css tweaks
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
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Fx4 .css tweaks
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- foxxyn8
- Posts: 48
- Joined: January 21st, 2010, 4:01 pm
- Location: Occupied USA
Re: Fx4 .css tweaks
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
- Posts: 2122
- Joined: November 11th, 2009, 6:16 am
Re: Fx4 .css tweaks
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...
The userstyle has been updated accordingly.
Thanks again for y'all s help...
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Fx4 .css tweaks
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.
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- rob64rock
- Posts: 2122
- Joined: November 11th, 2009, 6:16 am
Re: Fx4 .css tweaks
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.
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???
-
- Posts: 44
- Joined: December 8th, 2008, 2:48 pm
Re: Fx4 .css tweaks
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.
-
- Posts: 1896
- Joined: May 30th, 2004, 5:20 am
Re: Fx4 .css tweaks
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
- Posts: 460
- Joined: April 10th, 2010, 4:39 pm
Re: Fx4 .css tweaks
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
-
- Posts: 1896
- Joined: May 30th, 2004, 5:20 am
Re: Fx4 .css tweaks
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.