User:DragonflySixtyseven/Skin fussiness

Classic skin and CSS (from meta:Tech)[edit]

I've made some extensive lists of features in the Classic skin that I'm trying to replicate in Vector; my css and js have already been substantially modified with the generous help of other users, but there are still problems. Here are some illustrative screenshots.

Note that the font sizes in the top (Classic) are visibly larger than in the bottom (modified Vector). This is not simply an issue of enlarging the text; both Classic and Vector are shown at their default sizes. In fact, the precise sizes which Classic uses do not seem to be available to Vector; even when I enlarge Vector, it stays too small for my legibility, until it abruptly becomes too big and elements of the layout obstruct each other. This is an issue of accessibility. I would like for the font sizes used by the various page elements to be those in Classic, as this is a key component of my ability to use, edit, and maintain Wikipedia.

Another point is the collection of what we might call "interactivity" links: 'edit', 'watch', 'move', 'discuss' (and -- because I'm an admin on en.wiki -- 'change protection' and 'delete'). Note that in Classic, these are arranged in a column in the left sidebar, whereas in Vector, there are "tabs" along the top. I strongly, strongly dislike these "tabs", and would strongly prefer that these be arranged in a column in the left sidebar. Otherwise, it seriously disrupts my workflow -- with the fonts at my optimal size, interactivity links at the top of the page become less than usable. (this particular sub-issue is resolved)

Another issue visible in these screenshots is the separator bar between the sidebar and the main text. Note that in Classic, the separator bar is grey, whereas in Vector, it's blue. I would like this corrected (for every use of the separator bar as a page element). This, I concede, is solely an issue of pickiness, but it should also be much easier to do. Similarly, I'd like the text in pulldown menus to not have serifs. The text on pages should have serifs, the text in edit windows should have serifs, but not the text in pulldown menus. And I would like the color for links to other-language Wikipedias (either directly, or via Wikidata) to be the color of external links, not internal links.

There are various other layout problems (circled) shown in the third screenshot: specifically, there should be a separator bar below the language links, and another separator bar below the Wikiglobe; also, there should be "Main page / Recent changes / etc" in the upper left corner; also, the user-specific links (userpage, talk, preferences, logout) should be all on the right side of the top, not spread out along the middle.

I look forward to these issues being speedily resolved. With enough eyeballs, all bugs are shallow. DS (talk) 21:12, 13 April 2013 (UTC)

Oh, and when I look at my list of contributions, I would rather there not be any separator bar at all, thanks. DS (talk) 21:19, 13 April 2013 (UTC)

Try w:User:PiRSquared17/vector.js and w:User:PiRSquared17/vector.css for some more fixes. PiRSquared17 (talk) 18:00, 14 April 2013 (UTC)

Almost. The interactivity elements are now in a vertical column, yes, but they're still at the top of the page where they overlap the article. I'd like them over at the left side of the page, please. DS (talk) 17:22, 18 April 2013 (UTC)

That's because you didn't copy w:User:PiRSquared17/vector.js ... PiRSquared17 (talk) 17:40, 18 April 2013 (UTC)

┌─────────────────────────────────┘
Oops. Okay, next, can I have the 'new messages' notifier at the top of the page (next to the search box)? DS (talk) 12:03, 19 April 2013 (UTC)

Also - the cluster of links in the sidebar (Main page - Contents - Featured content - Current events - Random article - Donate to Wikipedia - Wikimedia Shop)? I'd really appreciate if that also included with links to the individual's contributions and watchlist. DS (talk) 13:52, 19 April 2013 (UTC)

I welcome suggestions from other users. I can't figure out how to do some of this, but I'll try some more after I get a certain global message delivered. PiRSquared17 (talk) 16:46, 23 April 2013 (UTC)

┌─────────────────────────────────┘
Also, I've realized that I'm missing the "current revision" link for when I view a page history. DS (talk) 21:58, 23 April 2013 (UTC)

You can fix the blue border by putting div#content{border-color: grey;} in your CSS file. Writ Keeper (talk) 02:24, 7 May 2013 (UTC)

Skin issues (from enwiki/Village Pump (technical)[edit]

I'm trying to replicate the appearance of the Classic skin within Vector, and would appreciate some guidance in customizing my (already-heavily-modified) css and js files. I was getting some help on meta:Tech, but that seems to have dried up for now. Note that I didn't write these modifications; other people very generously wrote them for me. Current issues include:

I'd like a "my contributions" link on all pages.
I'd like a "Watchlist" link on all pages.
I'd like a "current version" link on pages where I compare two diffs.
I'd like the "new messages" notifier to be at the very top of the page, rather than at the top of the article. Note that I already have modifications to remove the orange bar, because the orange bar is hideously ugly.
The vertical separator bar is an ugly shade of light blue. I'd like it to be a pleasant gray (RGB: 128, 128, 128). I know how to change most of the font colors already (and am actively doing it because the colors that Vector uses are ugly), but not the separator bar colors.
On a related point, the vertical separator bar goes too far down. It should stop just past the first four lines of the article (or equivalent). And no horizontal separator bar at the very bottom of the page, thank you.
The relative font sizes of the various elements are wrong. Currently, the font size of article text is (X), but the font size of text in the edit window is (Y). I would like these to be inverted. I would also like the text in the sidebar to be (X) rather than (Y). RESOLVED, MOSTLY
I would like the sidebar to be somewhat narrower - like how it was in Classic.
I would like to completely eliminate all use of the "star" icon as it pertains to the "watch page" function.
There's an unsightly empty space at the top of the page (see File:Classic vs heavily-modified Vector (skin comparison) 1.jpg, File:Classic vs heavily-modified Vector (skin comparison) 2.jpg, and File:Classic vs heavily-modified Vector (skin comparison) 3.jpg -- but it's present in unmodified Vector too, just smaller). I'd like it refilled with the links shown in the comparison jpgs.

Thank you in advance for any advice or suggestions you can provide. DS (talk) 02:23, 27 April 2013 (UTC)

More from meta:Tech[edit]

Font sizes and css[edit]

(Goodness, Vector is certainly a non-intuitive interface.)

I'm currently having some difficulty with the customized Vector.css and Vector.js that have been prepared for me, so that I can simulate the appearance of Classic within Vector. One problem is the font sizes; I've prepared a screenshot to properly illustrate what I want. (Yes, Classic has been removed, but I still have some pages open that have newpage backlog from before it was removed, so I was able to screenshot those.) Ideally, the text in the "article body" should be somewhat (1 point?) larger than the text in the "sidebar"; currently, it is somewhat (1 point?) smaller.

Another problem is that I'm not sure I have the proper vocabulary to describe this; this is why my attempts to change the css myself have not succeeded. I've tried using DOM inspectors, etc, and all I get is information that I can't parse. I've annotated the screenshot in hopes that it will be more understandable.

Thank you in advance for any help you can provide. DS (talk) 16:44, 29 April 2013 (UTC)

<MatmaRex> okay, so you have this rule in https://en.wikipedia.org/wiki/User:DragonflySixtyseven/vector.css :
<MatmaRex> div#mw-panel div.portal div.body ul li { font-size: 15px; }
<MatmaRex> this sets the size for your sidebar
<MatmaRex> if you want it to look the same as the body text, replace it with this one:
<MatmaRex> div#mw-panel div.portal div.body ul li { font-size: 0.8em; line-height: 1.5em; }
<MatmaRex> (you might want a smaller line-height, though, but i'll leave that for you :) )
<MatmaRex> and if you want to make the font smaller or larger globally, use this:
<MatmaRex> body { font-size: 16px; } (or course change the "16" to your liking - 16px appears to be the default size for me)
<MatmaRex> (also, you can paste what i said here on the meta page, for posterity :) )
<Dragonfly6-7> one moment
<MatmaRex> ah, and if you want the body to be larger, use:
<MatmaRex> #bodyContent { font-size: whatever; }
<Dragonfly6-7> you do understand that the sidebar contains the "tab" elements, yes?
<Dragonfly6-7> so I hope that your suggestion takes that into account

Dragonfly6-7 tries it

<MatmaRex> hmmm, yes, this should include them as well
<Dragonfly6-7> thank you
<MatmaRex> :)
<Dragonfly6-7> div#mw-panel div.portal div.body ul li { font-size: 0.8em; line-height: 1.5em; }
<Dragonfly6-7> thank you
<Dragonfly6-7> that worked
<MatmaRex> great :)
<Dragonfly6-7> at least it's not *larger* than the article text, which was a problem. I'd *like* it to be marginally smaller, but if that can't be done, I'll live with it.
<Dragonfly6-7> so, to make it one point size *smaller* than the body text, what do I do?
<MatmaRex> you can use body { font-size: 16px; } to change the base size, #bodyContent { font-size: whatever; } to change the article font size, and div#mw-panel div.portal div.body ul li { font-size: whatever; } to change the sidebar size [gah, that rule is ugly]
<MatmaRex> where the 'whatever's can also be percentage values
<Dragonfly6-7> by the way, for "rule" I believe you mean "line" ?
<MatmaRex> e.g. #bodyContent { font-size: 200%; } will make the body font twice as big as the base font
<Dragonfly6-7> so "base size" applies to all the text on the page, regardless of element.
<Dragonfly6-7> yes?
<MatmaRex> in general, yes. some page elements may be overriden so that it doesn't apply to them, though
<MatmaRex> but i don't think vector does that anywhere
<MatmaRex> (they are usually styled with percentage sizes)
<Dragonfly6-7> so I can leave "body content" as is, and put div#mw-panel div.portal div.body ul li { font-size: 95%; }
<Dragonfly6-7> for instance
<Dragonfly6-7> yes?
<MatmaRex> yes, that should work

(transcribed with permission) DS (talk) 19:47, 29 April 2013 (UTC)

Stuff taken from 'skin pickiness.txt' on my desktop[edit]

problems with Cologne Blue

it has no serifs
it has no Wikiglobe in the upper left corner
it has an ugly blue stripe at the top of every page
the toolbox links are boldfaced - only 'Edit page' should be boldfaced
the color of internal wikilinks is wrong - it should be blue, not bluegrey
the color of external wikilinks is wrong - it should be bluegrey, not greengrey
the Creative Commons legal boilerplate at the bottom should be in much smaller type
there should be a link to the userpage, and the user talk, at the upper right of the page, just above the search box. There should be a search box in the upper right corner of the page.
the links at the top of the page should be like this:

there should *not* be a search box in the left column. Just one at the top, and one at the very bottom.

problems with Vector

All the text on the page should have serifs, not just the body content
get rid of the little 'person' icon next to the userpage link
get rid of the "star" interface for the watchlist
for non-article pages, the placid yellow tone should be the background on the entire page, not just the body content
categories should be listed at the top, not the bottom
the relative font sizes for the various elements should be those used by Classic
the thin line that separates sections in the toolbar from each other is too blue. It should be greyblack.
there should not be a separator line between (page title) and "from Wikipedia, the free encyclopedia"
there should be a separator line above the page title
the language links should be up top
"View history', "Move", "protect', and "delete" should be off on the left side of the page, not concealed in a little dropdown box up top. The order should be Edit, Watch, Move, Delete, Protect, Discuss, History, What Links Here, related changes.
the New Messages notice should be at the very top of the page, with *no* colored bar whatsoever, thusly:

Main Page | Recent changes Printable version | Disclaimers | Privacy policy | You have new messages (last change).

Even after implementing the css and js changes, there are still problems

the placid yellow background should be in every namespace *except* articles. Those should be white. FIXED
bluelinks should be bright blue, not greyblue FIXED
the font sizes of the various elements are wrong
the box containing the categories should have a transparent background, not a grey one (and no border!) FIXED
same for the box containing the language links FIXED
the links "edit / watch / move / delete / protect / discuss / history" should be on the left sidebar, not on the top. If they must be enclosed in a box, that box should also have a transparent background with no border
text in pulldown menus should be serifless (sorry!) FIXED

========MORE========[edit]

I want:

the upper left corner of the screen filled like it was before
the font sizes that Classic used
the vertical separator bar being gray (R G B - 128, 128, 128) not blue
the vertical separator bar should not go further down than the article title

Article font size should not be smaller than any metatext font sizes I need proper 'current version' link. proper 'watchlist' link. proper 'my contributions' link.

when text is unformatted due to an initial space at the beginning of a line... Vector surrounds it with a grey box. I don't like that grey box, and would like it to not be displayed.

~~Text in the edit window and the sidebars is of (font X, size Y). I would like the text *in articles* to be of (font X, size Y).~~ NOT FIXED, BUT CLOSE ENOUGH, I GUESS