Basic user style customization tutorial. Copy these code snippets, in order to re-style different aspects of the site.

I've given quick links below, but links to your user.css and user.js files can always be found in Preferences->Appearance.

Note: Once you click "save" after adding any of these, you have to do a full-refresh, in order to load the new version on top of your browser-cached version (press Ctrl-F5 or Apple-R).

See my pages, for in-use examples: User:Quiddity/vector.css and User:Quiddity/vector.js

User CSS

Open Special:Mypage/skin.css in a new tab, and copy&paste the boxed-text from below, to achieve the described effect.

New messages - less orange

A more gentle message-notification, than the terrifying orange default.

/* Calmer "You have new messages" alert - green instead of orange */
.usermessage {background-color: #cef2e0; border: 1px solid #a3bfb1; }

Hide the boilerplate text

To make your screen a little less cluttered, you can hide some of the recurring banners and notices, such as the page-footer, and various copyright warnings. (Log-out occasionally, to re-read them ;) Copy any or all of these lines to your user.css

/* Hide stuff - icons and boilerplate messages*/
#minoredit_helplink {display:none}   /* hide - minor edit help link */
#wpSummaryLabel {display:none}   /* hide - edit summary help link  */
#editpage-copywarn, #editpage-copywarn2, #editpage-copywarn3 {display:none}   /* hide - copyright warnings */
#mw-wikimedia-editpage-tos-summary {display:none}   /* hide - terms of service summary */
#footer {display:none}   /* Hide - page-footer (copyleft/disclaimers/banner icons) */
body {background: #f9f9f9}   /* hide - the large page background image. */
#feed-atom {display:none}   /* hide - rss icon */
li#pt-userpage {background:none}   /* hide - the tiny 'person icon' by your username */
#pt-prefswitch-link-on, #pt-prefswitch-link-anon {display:none}   /* hide - new skin notices */

Watchlist tweaks

Simplify your watchlist, with these tweaks:

/* limits the highlights on the N, m, b information to bolding and a tooltip */
abbr.newpage, abbr.minor, abbr.bot {border-bottom: none; cursor: auto;}

User Javascript

Open Special:Mypage/skin.js in a new tab, and copy&paste the boxed-text from below.

6 tabs - to see all the tabs together, at once

For icons, use this code:

// user:js/6tabs-vector
importScript('user:js/6tabs-vector.js')

For text, use this code:

// user:js/6tabs-vector
sixTabsNames={'edit':'edit', 'viewsource':'Source', 'history':'history', 'addsection':'+'};
importScript('user:js/6tabs-vector.js');

Note: You can change the value for each word, as desired. ('variable' : 'value')

[Note: If you're still using the old Monobook skin, then instead you should copy the code that is at Wikipedia:WikiProject User scripts/Scripts/Six tabs to your user.js]

Popups

A powerful link-preview script. For any link your mouse-cursor hovers over, it shows the first two sentences, and provides many meta-links. The standard version is available as a gadget, but I change the delay (from the default of 0.5), to make it slightly more relaxed. Other customizations are available, see Wikipedia:Tools/Navigation popups#Options for details.

// User:Lupin/popups.js
importScript('User:Lupin/popups.js');
popupDelay=1.5;

Highlight your username

You can highlight all instances of your own username (no need for a custom signature!), with this script.

To your user.js file, add this snippet:

// Highlight your own username – color tweaked in user.css
importScript('User:ais523/highlightmyname2.js'); // User:ais523/highlightmyname2.js

The default is a red background. To customize the color, add this snippet to your user.css file:

/* Tweak the color of the highlightmyname script */
span.ais523hmn {background-color:#82D9AD !important}

See User:Ais523/highlightmyname2 for further details, including how to change the word that is highlighted, and alternate color examples.

Highlight admin names

You can highlight links to admin's userpages (avoid arguing with our admins!), with this script.