Page MenuHomePhabricator

Styling for p-personal menu in Vector
Closed, DeclinedPublic

Description

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;

}


Version: unspecified
Severity: enhancement

Details

Reference
bz28835

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:35 PM
bzimport set Reference to bz28835.
bzimport added a subscriber: Unknown Object (MLST).

(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
Screemshot of proposed styling

Attached:

PersonalMenuStyling.png (503×1 px, 151 KB)

(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
Patch file for phase3/skins/vector/screen.css

attachment screen.patch ignored as obsolete

Created attachment 8503
Divider image used by CSS

The patch asumes this file is located in skins/vector/images/

Attached:

personal-break.png (24×1 px, 132 B)

Created attachment 8507
Patch file for phase3/skins/vector/screen.css

Added #pt-anontalk and #pt-newmessages (only used on mediawiki.org).

attachment screen.css.patch ignored as obsolete

Created attachment 8510
Patch file for phase3/skins/vector/screen.css

Grouped #pt- declarations.

attachment screen.css.patch ignored as obsolete

Created attachment 8511
Patch file for phase3/skins/vector/screen.css

Removed #pt-newmessages; should be added to LiquidThreads' CSS file.

attachment screen.css.patch ignored as obsolete

Created attachment 8514
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.

attachment screen.css.patch ignored as obsolete

Created attachment 8515
Patch file for trunk/phase3/skins/vector/screen.css

Fixed typo in code.

Attached:

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.

Withdraing; patch outdated, and skin is in too much flux.