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
[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]![](http://upload.wikimedia.org/wikipedia/en/thumb/2/21/Screenshot_of_newmessages_banner_with_tweaked_color.png/220px-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
[edit]![](http://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Screenshot_of_Wikipedia_edit_mode_boilerplate_messages_before_hiding_with_usercss.png/220px-Screenshot_of_Wikipedia_edit_mode_boilerplate_messages_before_hiding_with_usercss.png)
![](http://upload.wikimedia.org/wikipedia/en/thumb/9/94/Screenshot_of_Wikipedia_edit_mode_boilerplate_messages_after_hiding_with_usercss.png/220px-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
[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]![](http://upload.wikimedia.org/wikipedia/commons/1/1b/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
[edit]![](http://upload.wikimedia.org/wikipedia/en/thumb/b/b1/Screenshot_of_popups_script_in_use_on_a_watchlist_diff.png/220px-Screenshot_of_popups_script_in_use_on_a_watchlist_diff.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Popup-preview.png/220px-Popup-preview.png)
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]![](http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Screenshot_of_history_page_with_username_highlighting_scripts.png/220px-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
[edit]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
[edit]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
- Wikipedia:Customisation
- Help:User style (outdated)
- Wikipedia:Skin