User:Quiddity/User style customization tutorial

From WikiProjectMed
Jump to navigation Jump to search

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

Before, and after color tweak.

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

before
after

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

With icons, or with text.

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')

Popups

Popups for a watchlist diff.
An example of popups over the link Wikipedia, 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

Example of a history page with username highlighting and admin name highlighting. It works in talkpages, too!

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.

See also

Some of the very popular scripts are made available in Preferences->Gadgets, whereas others need to be manually copied to your user.js file (as above). See Wikipedia:WikiProject User scripts/Scripts for a large list of tested scripts.

See also
Retrieved from "https://mdwiki.org/wiki/User:Quiddity/User_style_customization_tutorial"