MediaWiki talk:Vector.css

Suggestions for how to improve Vector's css, please.

The ads stay in the picture. Shakespeare got to get paid, son.--caseyweederman (talk) 02:38, 25 February 2015 (UTC)

• I'll start us off! Below changes make the left hand nav panel and the page footer match up with the page background and the gradient at the top of the wiki-content div. Could probably do with further tinkering because the white top of the gradient should really continue to the page top, rather than ending in a sudden transition back to #f6f6f6 grey.

div#mw-panel {margin-top: 1.5em; padding-right: 0.5em; background-color: #f6f6f6; height: 100%;}
#footer {background-color: #f6f6f6;}

also for readability and to match kol's house style I'd suggest amending the general font family used from 'sans-serif' to 'arial, helvetica, sans-serif' and changing mw-body h1 to h6 to inherit font-family. --Darkcodelagsniper (talk) 02:55, 25 February 2015 (UTC)

• • This is done. The header and font parts I copied and pasted from your user css. Please do a hard-refresh to see the changes.--caseyweederman (talk) 04:44, 25 February 2015 (UTC)
• Headlines and the pages' text should use the same font. (Personally, I like Verdana, but I have a hunch font will be a debated topic, so just matching them would be enough for now.)

1. The monobook design featured a light blue background (#CFE3EB) and a darker blue (#6386A8) main frame, that enclosed everything and created some borders between the ads and the pages' content.
2. Then, elements in the content frame (navigation frame & page content) where framed by another of these boxes colored in a gray-ish blue (#EDEDED).
3. Every one of these previous frames had rounder rounded borders.
4. On the lowest levels, elements of the navigation frame (navigation, searchtoolbox & personal tools) as well as page content had a grey border (#999999).
5. Those elements combined made the mainly white theme of the wiki much easier on the eyes than the current theme, especially if you scroll down longer pages.
6. The Log in button (on the Log in page) is colored toothpaste-minty green right now (#00AF89) which looks odd. It's not at all a priority, but I wanted to write it down before I forget about it.

• I apologize for not being able to give better descriptions, but my artistic abilities are rather limited. I'm also sick right now and English isn't my first language, so if something I wrote doesn't make any sense to you, please point this out, and I'll look over it again. --Yatsufusa (talk) 03:39, 25 February 2015 (UTC)
  • These all look like good changes. If anyone can implement this in css, I'd be glad to paste it in. The login page might be tricky. By MediaWiki policy, user-editable css is forbidden from touching any page where you type your password. I might have to hardcode that.--caseyweederman (talk) 04:44, 25 February 2015 (UTC)
    • So I found at least the time to figure the settings for the border-radiuses out. There is one thing, though: Right now, the layout starts with the head part (Login, Edit, etc.) (divs #mw-page-base & #wikiContentContainer). As far as I'm able to tell, there is no reason for that, as the left-most part of that part isn't occupied – at least not where it takes away space. This pushes the navigation frame (Recent changes, Tools, etc.) (div #mw-panel) lower and also separates these two elements with white gap. I suggest that the layout starts with the navigation frame. Said update would involve making a flatter vis_sig.jpg. The following css updates are already coined for this updated wiki layout, but can easily be modified to work with the current layout, if such an update would require more time.
      #container, #p-logo { -moz-border-radius: 12px; border-radius: 12px; } #mw-page-base, #wikiContentContainer { -moz-border-top-right-radius: 12px; border-top-right-radius: 12px; } #mw-panel { -moz-border-top-left-radius: 12px; -moz-border-bottom-left-radius: 12px; -moz-border-bottom-right-radius: 12px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } #wikiContentContainer, #footer { -moz-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px; }
      --Yatsufusa (talk) 10:13, 27 February 2015 (UTC)
      • Added the missing footer border-radius above. --Yatsufusa (talk) 07:49, 28 February 2015 (UTC)

• Below changes make the html background match with the current top page gradient, getting rid of the unsightly grey bar:

#wikiContentContainer{top: 6.25em;} body {background-image: linear-gradient(#fff 8.75em,#f6f6f6 11.25em); background-repeat: no-repeat;}

• I've also made a couple more changes on my vector.css page - adding a border to the right hand side of the wiki content (usually it would be missing because the content would hit the right of the viewport, but that doesn't happen here because of the ad-sidebar). Also getting rid of the odd blue border on the logo. This makes the image white background stand out against the gradient, so I'd recommend giving the logo a transparent bg ( like this: Current logo with transparent bg ). --Darkcodelagsniper (talk) 15:30, 25 February 2015 (UTC)

Unordered List Margins

• This is a parent list using *
  • This is a child list using **
  • With however many entries
• This is a second point on the parent list. You can see the child list to the first line is currently closer to this line than it is to the parent.

This is a result of ul having a top margin and no bottom margin. I would suggest the opposite - unordered lists should have a bottom margin and no top margin. The following change should fix this:

.mw-content-ltr ul {margin: 0 0 .3em 1.6em} --Darkcodelagsniper (talk) 21:42, 27 October 2015 (UTC)

Hmm. Not sure that's an improvement---it just moves the problem around...what is wrong with making the top and bottom margins the same (both 0 seems best to me)? Consider:

bottom margin but no top margin:

• This is a parent list using
  • This is a child list using
  • With however many entries
• This is a second point on the parent list. You can see the child list to the first line is currently closer to this line than it is to the parent.

top and bottom margin:

• This is a parent list using
  • This is a child list using
  • With however many entries
• This is a second point on the parent list. You can see the child list to the first line is currently closer to this line than it is to the parent.

neither top nor bottom margin:

• This is a parent list using
  • This is a child list using
  • With however many entries
• This is a second point on the parent list. You can see the child list to the first line is currently closer to this line than it is to the parent.

--Fig bucket (talk) 01:31, 29 October 2015 (UTC)

Yup, totally removing the margins looks fine to me too. --Darkcodelagsniper (talk) 06:46, 29 October 2015 (UTC)

• Done --Fig bucket (talk) 12:24, 29 October 2015 (UTC)