user style for Camino 2

[phiw13]

Some custom styling for Camino 2:

1. additional styling for ftp directory listings, including a 10.5 style folder icon

Usage: at the top of your usercontent.css, include a link to ftp.css
like so:
@import 'ftp.css';

And remember, nothing can come before an @import declaration, only a @charset declaration.

Or you could copy/paste the whole block into your usercontent.css, starting from the comment.
---

2. form controls: some more preventing of author styling

* always use the default font(size/family/style) for all controls (yes I find a submit button using a serif font ugly and totally misplaced !)
* small margins around textfields, checkboxes and radiobuttons - brings them more in line with WebKit based browsers.

---
download link, for your pleasure.

[8-bit]

Phiw - I'll give a round of golf claps, since no one is giving you any love in this thread.

[cleanhead]

download link, for your pleasure.

And a pleasure it is. Thanks!

[phiw13]

Thanks

I realised late last night that I could have added a folder.tiff replacement file (used on bookmarks bar, bm manager, etc.). I updated the package now; the image is also available separately, here.

[davedit]

Nice, thanks for these phiw13, I totally missed this thread. Any chance of an updated groupbookmark icon?

[phiw13]

Ooh… did I forgot to include that one ? My bad – package now updated with both a folder.tiff and a groupbookmark.tiff

(heavy medicine playing havoc with my brain)

[davedit]

Thanks, looks great.

[thom-22]

Philippe, Maybe this is obvious to everyone else (Sorry, I'm not very userContent-savvy ), but how do you install the form-controls part? Copy the text into userContent.css, like with the ftp part; or put the whole file in the chrome folder?

Also, does anyone have an URL for a page where the change in form-controls style will be really noticeable, so I can test to make sure I got it right?

[phiw13]

Philippe, Maybe this is obvious to everyone else (Sorry, I'm not very userContent-savvy ), but how do you install the form-controls part? Copy the text into userContent.css, like with the ftp part; or put the whole file in the chrome folder?

Same way as with the ftp.css, or copy paste in userContent.css.

Also, does anyone have an URL for a page where the change in form-controls style will be really noticeable, so I can test to make sure I got it right?

Try a bugzilla page. You should see more vertical spacing between form controls. Or try this page: http://dev.l-c-n.com/forms/widgets-defaults.html

edit
Here is a sample usercontent.css that mixes an @import and full css code
http://dev.l-c-n.com/camino/misc/usercontent_sample.txt

[thom-22]

Okay, since I didn't already have a userContent.css file, I just copied the form-controls.css into the chrome folder and renamed it userContent.css -- that seems to have done it. One last question: Will I break anything if I add my own comments, between /* and */, to the end of the file? (I just want to make a note of what I did and why, because 3 months from now I'll have no recollection of what that file's doing there, such is the state of my brain. ) Thanks, Philippe!

[phiw13]

One last question: Will I break anything if I add my own comments, between /* and */, to the end of the file? (I just want to make a note of what I did and why, because 3 months from now I'll have no recollection of what that file's doing there, such is the state of my brain. ) Thanks, Philippe!

Sure, you can add comments anywhere in the file, except before the first line (@charset)

Code: Select all

@charset "utf-8";
/* my clever comment */

25% of my userContent.css are comments - what's left of my brain is getting old ! .

[thom-22]

Philippe, I think the form controls .css is breaking GameSpot pages. There's supposed to be a popup menu toward the top right, but it gets misplaced and its height shrinks to a few pixels when I have the form controls .css in my userContent.css file; here's a screenshot in case you're not seeing it. Is there some way to fix this, or just prevent the .css from applying to pages in the gamespot domain?

GameSpot's layout is also broken when I have the minimum font size set to > 11. That issue is entirely independent of the form controls issue above, and I also see it in Firefox 3 & 3.5 where I don't have any user .css. Is there any way to override the minimum font size setting for a single domain with .css?

Thanks for any help, ideas, etc.

[phiw13]

Philippe, I think the form controls .css is breaking GameSpot pages. There's supposed to be a popup menu toward the top right, but it gets misplaced and its height shrinks to a few pixels when I have the form controls .css in my userContent.css file; here's a screenshot in case you're not seeing it. Is there some way to fix this, or just prevent the .css from applying to pages in the gamespot domain?

Add this in the stylesheet:

Code: Select all

@-moz-document domain(gamespot.com) {
   select { margin: 0 !important; }
}

GameSpot's layout is also broken when I have the minimum font size set to > 11. That issue is entirely independent of the form controls issue above, and I also see it in Firefox 3 & 3.5 where I don't have any user .css. Is there any way to override the minimum font size setting for a single domain with .css?

Thanks for any help, ideas, etc.

Hmm, front-page displays fine with my 12px minimum font-size. Oh, I see, the inside pages. It is that grey bar at the top with some kind of promotion.

Depending on if you care about those or not, one of the two rules below:

Code: Select all

@-moz-document domain(gamespot.com) {
   /*#site_promos { display: none !important;}*/
   #hotslot { overflow: hidden !important;}
}

The first one (commented out while I was testing) hides the whole shebang, the second one prevents the thing from growing to big and pushing everything else around.
(you can put them together with the block mentioned above, of course.)

That layout really defines pixel precision...

[thom-22]

Yes! Those rules totally fix the site for me. Thanks much!