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.
User CSS
Open Special:Mypage/skin.css in a new tab, and copy&paste the boxed-text from below, to achieve the described effect.
Once you click "save", you have to do a full-refresh of the webpage, in order to reload your css (ctrl-F5 or apple-R). Images of examples are shown.
New messages - less orange
[[File:|thumb|New message color, tweaked.]] 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 ;)
/* Hide stuff - icons and 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 */
#footer {display:none} /* Hide - distracting 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 notice */
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 Wikipedia:WikiProject User scripts/Scripts/Six tabs to your user.js]