There's a lot of attention paid to extensions but very little to the tweaking of user.css.

I hope people can contribute tips that may even make use of certain extensions redundant.

To start off, for those with specific visual needs, the text and background colour of all pages can be specified in the user.css. In which case, if one is constrained for RAM, extensions such as PlainClothes or Change Colors aren't necessary.

One can even specify a particular font and size.

Another trick which I just came across seems to solve a particular irritation apparently unique to Chrome expressed here (http://www.google.com/support/forum/...196be1&hl=en):
On loading a new page, there is often a "white flash". In other cases, a white strip (of any width) appears at the bottom of certain pages. This has been reported here (http://www.chromeboard.com/showthrea...ed=1#post83504)
I had this problem (vertically) in this forum as well with the "default forum width". As one may guess, I don't like to see a lot of white on my screen!

Adding this line in your user.css solves the problem of white flashes, white spaces at the bottom or white spaces due to the forum width:
html, body { background-color: #colour; }
where colour is the colour in hex code that you like.

What seems to be the solution was provided by xybre in the same thread.

In edit:

Google Chrome calls it "custom.css" and not user.css. On my PC, it's located here: E:\PortableApps\GoogleChromePortable\Data\profile\Default\User StyleSheets

Does anyone know where I can learn what elements there are and how I can change them? I guess I should learn a bit of CSS, but how do I know what elements there are? (I think elements is the right word...)

Hi this is for beginners...
The CSShark Answers FAQs - Your CSS Tutorial
The CSS Know-How Site
http://www.mako4css.com/

I finally got around to playing with the custom.css and tried this because Ive allways hated the flash.
It worked great except it made my ntp background pic to dissapear and be only the colour.
Here's some code that will avoid that....

Code:

html:not([bookmarkbarattached]), html:not([bookmarkbarattached]) body { background-color: #000; }

Another thing thats cool is changing the scroll bars.....

Code:

::-webkit-scrollbar {
    height: 12px;
	width: 12px;
	background: #000;
    }
::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
    background: #000;
}

...thats the simplest code Ive seen to make scrollbars, you should see how much it takes to do them fully. Just try changing the colours to see whats what.

Since this css gets applied to the NTP you can do things to it you normally couldn't....

...you can see the scrollbar on the right aswell.
Here's the code to make it look like that....

Code:

html[bookmarkbarattached]>body>div#main #recently-closed {
background: -webkit-gradient(linear, left top, left bottom, from(rgba( 0, 0, 0, 0)),to(rgba(64,64,64,0.1)));
}

html[bookmarkbarattached]>body>div#main .thumbnail-container {
  opacity: 0.33;
}
html[bookmarkbarattached]>body>div#main .thumbnail-container:hover {
  opacity: 1;
}
html[bookmarkbarattached]>body>div#main  .attribution{
  opacity: 0.0;
}
html[bookmarkbarattached]>body>div#main{
background-image:url('') !important;
}
html[bookmarkbarattached]>body>div#main #top-bar{
opacity: 0.0;
}
html[bookmarkbarattached]>body>div#main #most-visited-section h2{
opacity: 0.0;
}
html[bookmarkbarattached]>body>div#main #recently-closed h2{
display: none !important;
}

Well thanks for that it helped make my browser nice and dark
And I learnt abit about css selectors which is gotta be a good thing.

EDIT: Here's one for dimming all your webpages (ya background needs to be black i think, like above).....

Code:

html:not([bookmarkbarattached]) { opacity: 0.75; }
html:not([bookmarkbarattached]) body { opacity: 0.95; }

PAEz, no offence, but you've jumped into the deep end of the pool!

If you don't mind, could you please post your entire custom.css? If you provide comments that would be wonderful.

Then, by trial and error and with reference to your post here, I, and other beginners, can understand things a bit better by doing a bit of reverse-engineering.

This is my custom.css to get a boring grey background, blue links (unvisited) and purplish links (visited).
I understand that the asterisk (*) at the beginning of the first two lines ensures that the background colour and text colour are applied everywhere.
Sites that use a lot of background images may get mangled.
Removing text-decoration: none will result in links being underlined.

Code:

* { background-color: #808080 !important; }
* { color: black !important; }
:link { color: blue !important; text-decoration: none; }
:visited { color: #800080 !important; text-decoration: none; }

Originally Posted by PAEz

...
...thats the simplest code Ive seen to make scrollbars, you should see how much it takes to do them fully. Just try changing the colours to see whats what.
...

Good stuff! In my quest to make my Chrome as minimal as possible, I dropped a couple of things from your scrollbar code. So now my custom.css looks like this:

Code:

* { background-color: #808080 !important; }
* { color: black !important; }
a:link { color: blue !important; text-decoration: none; }
a:visited { color: #800080 !important; text-decoration: none; }
a:hover { background-color: #505050 !important; }

::-webkit-scrollbar { height: 12px; width: 12px; background: gray !important; }
::-webkit-scrollbar-thumb { background: black !important; }

When I get some more courage, I'll try a bit more of the stuff you've provided.

I found these sites helpful as well:
http://www.yourhtmlsource.com/styles...roduction.html
http://www.veign.com/reference/css3-guide.php

Where is everyone who's anyone?????????

Came across this:
https://chrome.google.com/extensions...fgdgohlhegamnm

This extension is a modification of the userContent extension. The original allowed a user editable stylesheet to be injected into pages. This modification adds regexp URL filtering and user editable javascript injection.

Originally Posted by PAEz

I finally got around to playing with the custom.css and tried this because Ive allways hated the flash.
It worked great except it made my ntp background pic to dissapear and be only the colour.
Here's some code that will avoid that....

Code:

html:not([bookmarkbarattached]), html:not([bookmarkbarattached]) body { background-color: #000; }

Another thing thats cool is changing the scroll bars.....

Code:

::-webkit-scrollbar {
    height: 12px;
	width: 12px;
	background: #000;
    }
::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
    background: #000;
}

How exactly do I do something like this in Chromium(for Ubuntu). I'm completely new to .css and I really need to make my scroll bar a darker color.

Thanks for any help. It will be appreciated.