Fx4* .css tweaks

Discussion of general topics about Mozilla Firefox
Locked
Harlequin99
Posts: 432
Joined: August 24th, 2007, 11:02 am

Re: Fx4 .css tweaks

Post by Harlequin99 »

I got the code below to show the tab title in the title bar from someone on this forum. It works well except when in print preview mode when the tab title is shown across the toolbar. I am using Win7 with aero. Does anyone know how to fix the print preview issue?

Code: Select all

#main-window[chromehidden=""]:after
   {content: attr(title) !important; 
    pointer-events: none !important; 
    position: fixed !important;   
    top: 5px !important;   
    left: 120px !important;
    max-height: 1em !important; }

#main-window[sizemode="maximized"]:after
   {top: 12px !important; }

#main-window:-moz-system-metric(windows-classic):after
   {font-weight: bold !important;   
    left: 110px !important;   
    top: 6px !important; }

#main-window:not(:-moz-system-metric(windows-compositor)):after
   {color: CaptionText !important;
    text-shadow: none !important; }

#main-window:-moz-window-inactive:not(:-moz-system-metric(windows-compositor)):after
   {color: InactiveCaptionText !important; }

#main-window:-moz-system-metric(windows-compositor):not(:-moz-lwtheme):after
   {text-shadow: white 0 0 6px,
                   white 0 0 9px,
                   white 0 0 9px,
                    rgba(255, 255, 255, 0.4) 0 1px 0 !important; }
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

Application tabs:

Code: Select all

.tabbrowser-tab[pinned]
{ background: red !important;
min-width: 32px !important; }
Last edited by makondo on January 11th, 2011, 9:12 pm, edited 1 time in total.
mat--
Posts: 669
Joined: May 20th, 2010, 8:12 am

Re: Fx4 .css tweaks

Post by mat-- »

Anyone knows how to remove the border of back/forward and home buttons to make them look like on Chrome?
User avatar
mistertwol
Posts: 425
Joined: June 14th, 2010, 9:23 pm

Re: Fx4 .css tweaks

Post by mistertwol »

mat-- wrote:Anyone knows how to remove the border of back/forward and home buttons to make them look like on Chrome?


http://userstyles.org/styles/42200
mat--
Posts: 669
Joined: May 20th, 2010, 8:12 am

Re: Fx4 .css tweaks

Post by mat-- »

mistertwol wrote:
mat-- wrote:Anyone knows how to remove the border of back/forward and home buttons to make them look like on Chrome?


http://userstyles.org/styles/42200

Thank you, sir!
tekstr1der
Posts: 69
Joined: November 23rd, 2004, 6:02 pm
Location: New Hampshire

Re: Fx4 .css tweaks

Post by tekstr1der »

makondo wrote:Application tabs:

Code: Select all

.tabbrowser-tab[pinned]
{ background: red !important;
min-width: 32px !important; }


Thanks for this! I wanted to make it slightly larger, and this was the ticket. I'd also like to change the color, not of the regular tab itself, but when it recognizes titlebar text change (new email, for instance). It takes on a light blue hue by default which, when combined with its small default size, is difficult to spot without specifically staring at it.

Where can I find the full default CSS for the pinned app tab?
User avatar
foxxyn8
Posts: 48
Joined: January 21st, 2010, 4:01 pm
Location: Occupied USA

Re: Fx4 .css tweaks

Post by foxxyn8 »

tekstr1der wrote:
makondo wrote:Application tabs:


Where can I find the full default CSS for the pinned app tab?


I think this is what you want. It's the default for title change on a pinned tab:

Code: Select all

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
  background-image: -moz-radial-gradient(40% 3px, circle cover, rgba(255,255,255,1) 2%, rgba(186,221,251,.75) 25%, rgba(127,179,255,.5) 50%, rgba(127,179,255,.25));
}
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 50%),
                    -moz-radial-gradient(40% 3px, circle cover, rgba(255,255,255,1) 2%, rgba(186,221,251,.75) 25%, rgba(127,179,255,.5) 50%, rgba(127,179,255,.25));
}
tekstr1der
Posts: 69
Joined: November 23rd, 2004, 6:02 pm
Location: New Hampshire

Re: Fx4 .css tweaks

Post by tekstr1der »

Thanks so much. That's definitely it. It's been years since I needed a userChrome modification. Is the default FF chrome CSS only discoverable with DOM inspector, or is there some up-to-date documentation available?
User avatar
foxxyn8
Posts: 48
Joined: January 21st, 2010, 4:01 pm
Location: Occupied USA

Re: Fx4 .css tweaks

Post by foxxyn8 »

tekstr1der wrote:Is the default FF chrome CSS only discoverable with DOM inspector, or is there some up-to-date documentation available?


I don't know that it's "only discoverable" , but DOMi definitely makes it easier. As far as documentation goes this is a good start: https://developer.mozilla.org
Juiced
Posts: 76
Joined: August 21st, 2010, 5:16 am

Re: Fx4 .css tweaks

Post by Juiced »

You can also look at the mozilla-central source directly and work from that, but it can take some time getting used to... http://mxr.mozilla.org/mozilla-central/source/
User avatar
dickvl
Posts: 54146
Joined: July 18th, 2005, 3:25 am

Re: Fx4 .css tweaks

Post by dickvl »

You can open CSS (and JS and XUL/XML) files that are part of Firefox with the chrome protocol directly via the location bar.
chrome://browser/content/browser.css
chrome://browser/content/tabbrowser.css
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

Could somebody tell me where i can find the doorhangers (i know it's tooltips and that's what i can't find). TIA!

EDIT: i'm looking for the border of the inset tooltip, seen as the white border here:
Image
User avatar
foxxyn8
Posts: 48
Joined: January 21st, 2010, 4:01 pm
Location: Occupied USA

Re: Fx4 .css tweaks

Post by foxxyn8 »

makondo wrote:EDIT: i'm looking for the border of the inset tooltip, seen as the white border here:


Looks like .panel-inner-arrowcontent
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

Nope, doesn't work, but thanks anyway!

EDIT: looks like it's one level higher. Where did you get that one?

EDIT: I got it! it's actually box shadow, not a border:

.panel-arrowcontent
{ -moz-box-shadow: none !important; }
warul
Posts: 12
Joined: December 9th, 2010, 12:39 pm

Re: Fx4 .css tweaks

Post by warul »

i'm using the following code to get bookmarks on top:

Code: Select all

#main-window[sizemode="normal"] .chromeclass-directories {
   top: 2px !important;
   height:30px;
}

.chromeclass-directories {
   position: fixed !important;
   top: 5px !important;
   left: 130px !important;
   background-color: transparent !important;
   border-width: 0 !important;
   margin-right: 115px !important;
}

result:
Image
when maximized everything is fine, but when it's not there's a problem:
Image
bookmarks overlap the adressbar.
Is there a way to fix this. It would be great if I could just drag the bookmarks there under customize, but I can't
Help?
Locked