MozillaZine


Fx4* .css tweaks

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

Post Posted January 6th, 2011, 2:18 pm

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

Post Posted January 11th, 2011, 2:00 pm

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

Post Posted January 11th, 2011, 8:24 pm

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

mistertwol

User avatar
 
Posts: 425
Joined: June 14th, 2010, 9:23 pm

Post Posted January 11th, 2011, 8:42 pm

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

Post Posted January 11th, 2011, 10:31 pm

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

Post Posted January 12th, 2011, 11:04 am

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?

foxxyn8

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

Post Posted January 12th, 2011, 11:16 am

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

Post Posted January 12th, 2011, 11:41 am

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

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

Post Posted January 12th, 2011, 12:52 pm

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

Post Posted January 12th, 2011, 4:24 pm

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

User avatar
 
Posts: 53278
Joined: July 18th, 2005, 3:25 am

Post Posted January 12th, 2011, 8:58 pm

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

Post Posted January 12th, 2011, 9:30 pm

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

foxxyn8

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

Post Posted January 12th, 2011, 10:38 pm

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

Post Posted January 12th, 2011, 11:05 pm

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

Post Posted January 15th, 2011, 10:37 am

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?

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 1 guest