Last modified: 2013-05-04 11:58:58 UTC
I like Vector, but the personal links look too much like the old Monobook links (no seperator whatsoever) and there is no styling to speak of that really integrates them into the Vector skin, as is the case in other skins. So I tried 'vectorizing' them. First I tried up-side-down tabs, but that required rewriting the HTML. As the best solution is ususally the simplest, I came up with simple CSS that inserts a thin fading line between the links ([[File:Portal-break-v-vector.png]], inspired by Portal-break.png used in the left sidebar). This really makes the links part of the skin, without becoming obtrusive in any way. Changes required in skins-1.17/vector/main-ltr.css: BEGIN PATCH /* Personal */ #p-personal { CHANGE: right: 0.75em; TO: right: 0.25em; } /* This one flips! */ #p-personal li { REMOVE: margin-left: 0.75em; margin-top: 0.5em; ADD: margin: 0; padding: 0.5em; } /* Icon for Usernames */ #pt-userpage, #pt-anonuserpage, #pt-login { CHANGE: background: url(images/user-icon.png?1) left top no-repeat; TO: background: url(images/user-icon.png?1) no-repeat left; ADD: #pt-mytalk, #pt-preferences, #pt-watchlist, #pt-mycontris, #pt-logout { background: url("http://upload.wikimedia.org/wikipedia/commons/8/8a/Portal-break-v-vector.png") no-repeat left; /* Upload to bits.wikimedia.org! */ } END PATCH To preview this styling, put the following in your personal vector.css: /* Personal menu styling preview */ #p-personal { right: 0.25em; } #p-personal li { margin: 0; padding: 0.5em; } #pt-login, #pt-userpage, #pt-anonuserpage { background-position: left; } #pt-mytalk, #pt-preferences, #pt-watchlist, #pt-mycontris, #pt-logout { background: url("http://upload.wikimedia.org/wikipedia/commons/8/8a/Portal-break-v-vector.png") no-repeat left; }
(Note that Bugzilla adds unwanted linebreaks in the background rules.)
Could you attach an actual patch file? That would be much easier for us to work with. A screenshot of the new styling would also be useful.
Is there any software to create such a patchfile, or is there any formatting document I can look into to create one? Screenshot attached.
Created attachment 8501 [details] Screemshot of proposed styling
(In reply to comment #3) > Is there any software to create such a patchfile, or is there any formatting > document I can look into to create one? > > Screenshot attached. Under Linux, diff -u screen.css-from-SVN screen.css-with-your-changes will do it (note that main-ltr.css is called screen.css in MediaWiki 1.17), as will svn diff if you have an SVN checkout. Under Windows, TortoiseSVN can generate diff/patch files for local changes to an SVN checkout.
Created attachment 8502 [details] Patch file for phase3/skins/vector/screen.css
Created attachment 8503 [details] Divider image used by CSS The patch asumes this file is located in skins/vector/images/
Created attachment 8507 [details] Patch file for phase3/skins/vector/screen.css Added #pt-anontalk and #pt-newmessages (only used on mediawiki.org).
Created attachment 8510 [details] Patch file for phase3/skins/vector/screen.css Grouped #pt- declarations.
Created attachment 8511 [details] Patch file for phase3/skins/vector/screen.css Removed #pt-newmessages; should be added to LiquidThreads' CSS file.
Created attachment 8514 [details] Patch file for trunk/phase3/skins/vector/screen.css Optimized even further. No longer requires seperate CSS for extensions (like LiquidThreads) that inject their own menu items. This should be the last modification to the patch. Comments welcome. Hoping this makes it into 1.17 final.
Created attachment 8515 [details] Patch file for trunk/phase3/skins/vector/screen.css Fixed typo in code.
New code for testing/previewing to put in your personal vector.css file: /* Personal menu dividers */ #p-personal { right: 0.25em; } #p-personal li { margin: 0; padding: 0.5em; background: url("http://upload.wikimedia.org/wikipedia/commons/6/6c/Personal-break-vector.png") no-repeat left; } li#pt-login, li#pt-userpage, li#pt-anonuserpage { background: url(/skins-1.17/vector/images/user-icon.png) no-repeat left; } (Mind the linebreaks.)
Vector's design was mostly about removing the majority of the lines from the Monobook skin. Adding these lines goes against that goal in my opinion. Earlier designs of what eventually became vector actually collapsed most of the user tools into a hover-to-open menu (like how the actions menu works), but early feedback indicated that was a bridge to far for users who had developed strong habits involving the user tools, so we left them be. Nonetheless, I'm in favor of reducing the number of initially visible symbols/lines/words/icons/etc in the top of the page. Again, a view that's contrary to this patch.
Unassigning default assignments. http://article.gmane.org/gmane.science.linguistics.wikipedia.technical/54734
Withdraing; patch outdated, and skin is in too much flux.
