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

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

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

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 in edit mode - 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 */

/* Hide stuff elsewhere - icons and boilerplate messages*/
#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[edit]

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

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

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

Popups for a watchlist diff.

A powerful link-preview script. I find it very useful for going through my watchlist, without having to open every diff in a new tab.

For any normal 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[edit]

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

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