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

File:Screenshot of newmessages banner with tweaked color.png

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

File:Screenshot of Wikipedia edit mode boilerplate messages before hiding with usercss.png

File:Screenshot of Wikipedia edit mode boilerplate messages after hiding with usercss.png

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

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

File:6tabs-vector.png

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

File:Screenshot of popups script in use on a watchlist diff.png

File:Popup-preview.png, using the skin Monobook.]]

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

File:Screenshot of history page with username highlighting scripts.png

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.