Fx4* .css tweaks

[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]

Application tabs:

Code: Select all

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

[mat--]

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

[mistertwol]

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--]

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]

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?

[foxxyn8]

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]

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?

[foxxyn8]

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]

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/

[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]

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:

[foxxyn8]

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

Looks like .panel-inner-arrowcontent

[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]

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:

when maximized everything is fine, but when it's not there's a problem:

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?