User:Quiddity/User style customization tutorial

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 in edit mode - boilerplate messages*/
 * 1) minoredit_helplink {display:none}  /* hide - minor edit help link */
 * 2) wpSummaryLabel {display:none}  /* hide - edit summary help link  */
 * 3) editpage-copywarn, #editpage-copywarn2, #editpage-copywarn3 {display:none}  /* hide - copyright warnings */
 * 4) mw-wikimedia-editpage-tos-summary {display:none}  /* hide - terms of service summary */

/* Hide stuff elsewhere - icons and boilerplate messages*/ body {background: #f9f9f9}  /* hide - the large page background image. */ li#pt-userpage {background:none}  /* hide - the tiny 'person icon' by your username */
 * 1) footer {display:none}  /* Hide - page-footer (copyleft/disclaimers/banner icons) */
 * 1) feed-atom {display:none}  /* hide - rss icon */
 * 1) 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 WikiProject User scripts/Scripts/Six tabs to your user.js]

Popups
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 Tools/Navigation popups 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.

To your user.js file, add this snippet: // Highlight admin names – color tweaked in user.css importScript('User:ais523/adminrights.js'); // User:ais523/adminrights.js

The default is a cyan background. To customize the color, add this snippet to your user.css file, and tweak the color as wanted: /* Tweak the color of the highlight-admin-names script - pink admins on parade! */ .ais523_adminrights_admin, .mw-userlinkais523_adminrights_admin {background-color:#F2CEE0 !important;} See User:Ais523/adminrights for further details.