MediaWiki talk:Monobook.css: Difference between revisions
Moved top explanations to a notice box and added info about the "Catalogue of CSS classes". |
No edit summary |
||
Line 1: | Line 1: | ||
{{ |
{{explanation}} |
||
{{notice| |
{{notice| |
||
For the "Monobook" skin, Wikipedia uses the stylesheet http://en.wikipedia.org/style/monobook/main.css . The page here overwrites parts of that. Individual users can customize the skin further for themselves, see [[Help:User style]]. |
For the "Monobook" skin, Wikipedia uses the stylesheet http://en.wikipedia.org/style/monobook/main.css . The page here overwrites parts of that. Individual users can customize the skin further for themselves, see [[Help:User style]]. |
Revision as of 12:41, 14 September 2007
For the "Monobook" skin, Wikipedia uses the stylesheet http://en.wikipedia.org/style/monobook/main.css . The page here overwrites parts of that. Individual users can customize the skin further for themselves, see Help:User style.
Code common to all skins, and not specific to Monobook, was moved to MediaWiki:Common.css. If you want to propose a change to the sitewide CSS that is not specific to a particular skin, please do so at MediaWiki talk:Common.css rather than here. All the stylesheets are documented at the catalogue of CSS classes. Please add any new classes into that catalogue. |
Better rendering for .diffchange in diff's...
Something I run into every so often is trying to locate what has been removed or added in a page change when it is just a period, comma, dash or other very small single character. For instance, take a look at the top changed section in this diff. It takes a little while to realize someone removed the minus sign on the record low temperature. I am suggesting a change in this CSS to add the following two lines to the .diffchange {} CSS selector:
background-color: #FF9999; color: #000000;
I have implemented it on my own monobook.css and it seems to make the above minus sign *much* easier to spot in the diff. --MattWright (talk) 00:15, 4 April 2007 (UTC)
- I like this idea, and I just experimented with some different colors. In my opinion, the best combination that I came across was white text on a dark blue background (the same shade used for our links, so it matches nicely).
.diffchange { background-color: #002bb8; color: #fff; }
—David Levy 01:12, 4 April 2007 (UTC)
Definitely a good idea to color the background. Not sure which colors, though. — Omegatron 02:15, 4 April 2007 (UTC)
Hi David, I'm not too concerned about the specific colors, I just chose the red/black as it appeared to more closely match the pastel look of the yellow/green diff boxes and retain a shade of the red color that .diffchange currently uses, so it's not too stark of a difference for users when they first see it. I'm fine with whatever people prefer and thanks for trying it out! --MattWright (talk) 15:06, 4 April 2007 (UTC)
- MattWright, I don't think you will be able to find consensus on which exactly style to use. And even if you do, after this is implemented a lot of people will come to forums asking to revert. In any case, you're welcome to add your suggestion at WikiProject_CSS. P.S. for me the following is good enough. — Alex Smotrov 22:08, 10 April 2007 (UTC)
.diffchange {border: 1px dotted gray}
- I am sorry, but this diff states how I feel about this proposed alteration. However the idea has merit different colors, let me try ".diffchange {border: 1px dotted gray}". HighInBC(Need help? Ask me) 22:14, 10 April 2007 (UTC)
- I really like ".diffchange {border: 1px dotted gray}", it helps find stuff but is not distracting or ugly. HighInBC(Need help? Ask me) 22:16, 10 April 2007 (UTC)
- May I suggest: ".diffchange {padding: 0px 2px 0px 2px; border: 1px dashed black;}", it is what I have settled on. HighInBC(Need help? Ask me) 22:32, 10 April 2007 (UTC)
- I find that still makes me hunt a little for some really minor edits, but it is better than the existing CSS. I understand consensus on a CSS change is hard, but this functionally improves the site. Before I realized I could change the CSS in this way, I have dismissed some edits that I just couldn't figure out what was changed without a lot of work. I feel that for the casual user who doesn't understand this, they could be passing up on reverts of bad edits such as the one linked above where a serious change was introduced in the article, but it was really hard to tell. --MattWright (talk) 22:42, 10 April 2007 (UTC)
- With the one I suggested, that diff stands out very well, the pixel size could be increased to 2, but it may be overkill. HighInBC(Need help? Ask me) 22:44, 10 April 2007 (UTC)
.diffchange {padding: 0px 2px 0px 2px; border: 1px dashed red;}
- That stands out, making the dots red. HighInBC(Need help? Ask me) 22:46, 10 April 2007 (UTC)
- I love the red dashes! They draw attention to the subtle changes without uglifying the text. —David Levy 22:56, 10 April 2007 (UTC)
.diffchange {padding: 0px 2px 0px 2px; border: 1px dashed red; margin: 0px 1px 0px 0px}
- Adding a margin to the right of 1px stops the box from touching the character to the right of it, see [1] before and after. HighInBC(Need help? Ask me) 23:17, 10 April 2007 (UTC)
- Looks nice. --MattWright (talk) 23:58, 10 April 2007 (UTC)
- Hm. I tend to be partial to dotted, rather than dashed, lines. It could just be a personal aesthetic thing, though. GracenotesT § 20:17, 11 April 2007 (UTC)
- Looks nice. --MattWright (talk) 23:58, 10 April 2007 (UTC)
- This is a fantastic idea. --- RockMFR 14:59, 13 April 2007 (UTC)
Why some stuff is hidden on Main Page?
Compare history page of Main Page with eg. history page of "Wikipedia" article. There is a difference on top - in case of Main Page there is no (among other things) link "View logs for this page". I guess this line:
body.page-Main_Page #contentSub,
is responsible... What is the reason for this? Thanks. Gen. von Klinkerhoffen 23:00, 1 May 2007 (UTC)
- It's to hide the title ("Main Page") from the actual main page. The workaround (as far as I know) would be using javascript, but I don't think that's really necessary. —METS501 (talk) 23:19, 1 May 2007 (UTC)
- Actually, the title is hidden with h1.firstHeading. The contentSub doesn't seem to have anything inside it on article pages, so I too have no idea why it's hidden on the Main Page. P.S. It was Javascript (to hide stuff on Main Page) until a couple of months ago when MediaWiki introduced additional classes for <body> tag. — Alex Smotrov 00:04, 2 May 2007 (UTC)
- I've made a patch that will include a class based on the action parameter, e.g.
action-history
,action-view
(the default). Hopefully it gets accepted. Update: looks like there was already another one. Mike Dillon 00:12, 2 May 2007 (UTC)
- I've made a patch that will include a class based on the action parameter, e.g.
- Actually, the title is hidden with h1.firstHeading. The contentSub doesn't seem to have anything inside it on article pages, so I too have no idea why it's hidden on the Main Page. P.S. It was Javascript (to hide stuff on Main Page) until a couple of months ago when MediaWiki introduced additional classes for <body> tag. — Alex Smotrov 00:04, 2 May 2007 (UTC)
Listifying special page transclusions
Sorry, I meant to put this on MediaWiki talk:Common.css. I'm moving it now. --ais523 16:14, 17 May 2007 (UTC)
Background image
Is this the script that set's the flowery background behind everything? I was thinking about using it on my Wikia, can I? --Steinninn talk 01:10, 1 June 2007 (UTC)
- The flowery image behind everything is an open book, and is set in main.css, which comes with every installation of MediaWiki since 1.5. It will appear in the Monobook skin by default on your Wikia if you have not modified the skin. —Simetrical (talk • contribs) 21:41, 1 June 2007 (UTC)
Justify
Please, add to CSS-file "Justify" for the all texts. —The preceding unsigned comment was added by 24.168.39.49 (talk • contribs) 13:34, 15 June 2007 (UTC)
- That would be a huge change, and (as far as I know) is nowhere near having Consensus. I think it will be opposed by many, including myself, as it makes the text harder to read. —METS501 (talk) 14:10, 15 June 2007 (UTC)
You must to see not have to think.)) Wiki isn't place of text-garbages. We can to do nice for the readers. —The preceding unsigned comment was added by 24.168.39.49 (talk • contribs) 14:21, 15 June 2007 (UTC)
you can see:
- Asian Elephant -
Justify - -Justify- - nice.)) —The preceding unsigned comment was added by 24.168.39.49 (talk • contribs) 15:03, 15 June 2007 (UTC)
- If you have firefox you can add
body{text-align:justify;}
to your userContents.css file, that way all websites you visit will have justified text (unless the author thinks that otherwise). —Dispenser 16:30, 15 June 2007
But... If don't have? —The preceding unsigned comment was added by 24.168.39.49 (talk • contribs) 02:01, 16 June 2007 (UTC)
- You can register a Wikipedia account and use a user stylesheet. Mike Dillon 02:12, 16 June 2007 (UTC)
- Uh-ha, now I remember something that you guys don't ;) There is an option "Justify paragraphs" in Preferences→Misc, making justifying even easier. As for 24.168.39.49, he kind of launched a campaign, requesting global "justify" on several mediawiki projects, although a lot of people already explained to him why this is not such a good idea ∴ Alex Smotrov 04:18, 16 June 2007 (UTC)
- Mike and Alex, my idea is fine, I can explain to you why. The project 'Wiki' not only for the registered members. We are obliged to give to people not only the information in the form of the text and illustrations, but also to show accuracy and beauty. This site not a dust dump. The CSS-file possible to change or correct. Visitors of the 'Wiki' cannot change something in options and add the command "Justify" in options. The registered members can make it only. And if so, the registered members of this site - who does not like alignment of pages and 'Justify", - will disconnect an option at registration.
- I don't agree that justified text looks better and it doesn't seem like anyone else does either. Mike Dillon 15:25, 16 June 2007 (UTC)
- Mike, did u see that?
- Asian Elephant -
Justify - -Justify- - nice.))
- Asian Elephant -
- Yes. Like I said, I don't think it looks better. Mike Dillon 15:53, 16 June 2007 (UTC)
- ))) OK! Allow to ask you a question in another way: who is pleasant to you - a peacock, a paradise bird or a pig in a dirt more?
- Um... Please stop your trolling. Mike Dillon 03:04, 19 June 2007 (UTC)
- Sorry, but I have to agree with Mike. Please stop: no one else wants this change. Also, if you want to go the route of analogies, which looks better to you: a Zen garden, or a massive pile of rocks? The Zen garden is like selectively placed text; the pile of rocks filling the whole container is like justified text. OK, that was a really lame analogy :-) —METS501 (talk) 05:00, 19 June 2007 (UTC)
- Um... Please stop your trolling. Mike Dillon 03:04, 19 June 2007 (UTC)
- "...no one else..."???? Are you all of all people??? Don't "trolling" as a communist russian stupid -- be a self.) The garden is not a dump and you can't live on the peak of the highest mountain (I'll not having told the massive pile of rocks about). ;-p Any person (even the vagabond), as well as animals, search and equip a convenient and beautiful place for a life.
- The little of that that I could read just reinforces Mike's point - you're getting annoying now. Stop trolling - your proposal doesn't have consensus, and consensus is needed to make the change - therefore it's not going to happen. —Vanderdecken∴ ∫ξφ 18:47, 28 June 2007 (UTC)
- You very, very, very much are mistaken! Visitors of the site 'Wiki' are not obliged to be registered and change something as Justify too, but we write here for those who comes to read. Accordingly, for those who comes on this site it should be beautiful, instead of for us - registered here. We should have possibility something to change or tale off Justified text, instead of all those who comes here behind the information! If YOU want to see not justified text, YOU can make an account or just put up with it, like they do everywhere else on the internet BUT NOT those who comes to read here instead of to write something, receiving knowledge and studying in accuracy and beauty.--24.168.39.49 13:15, 29 June 2007 (UTC)
- We are not going to disrespect browser settings for text alignment. If you wish to continue you campaign I'd recommend that you start hitting up the IEBlog and ask them to add a option to justify text. I'd also advise you to read our article on Justification to understand the downsides of doing this. —Dispenser 17:28, 29 June 2007 (UTC)
Rounded corners on interface elements
Could somebody possibley add
/* rounded corners - Mozilla/Firefox only */ .pBody { padding: 0.1em 0.1em; -moz-border-radius-topright: 0.5em; -moz-border-radius-bottomright: 0.5em; } #p-cactions ul li, #p-cactions ul li a { -moz-border-radius-topright: 0.5em; -moz-border-radius-topleft: 0.5em; } #content, .toc { -moz-border-radius-topleft: 0.5em; -moz-border-radius-topright: 0.5em; -moz-border-radius-bottomleft: 0.5em; -moz-border-radius-bottomright: 0.5em; }
for rounded corners on some infoboxes? 77.99.107.117 22:02, 3 July 2007 (UTC) (typos fixed 77.99.107.117 04:42, 4 July 2007 (UTC))
- I strongly oppose this addition! This is an experimental, Gecko-specific feature, and an UGLY one at that. It has no place in the site-wide CSS. —David Levy 22:08, 3 July 2007 (UTC)
Note that this CSS will not do what the original topic said, putting rounded corners on infoboxes. It will put rounded corners on various interface elements, including the main content area, the sidebar boxes, and the content-action buttons at the top of the article. It will also change padding significantly for no apparent reason. Here's a sample, before:
And after:
Applying it to all corners instead of only two, which was probably the intention to start with, and adding rules to work with non-Gecko browsers:
It looks okay, but I don't care much either way. Of course, those will all look identical except in browsers based on Gecko, and maybe Webkit or KHTML, which I think are the only browsers to have even preliminary implementations of the CSS3 border-radius property. If this is implemented, it should be something like
/* rounded corners for browsers that support them */
.pBody
{
-moz-border-radius: 0.5em;
-khtml-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
#p-cactions ul li, #p-cactions ul li a
{
-moz-border-radius-topright: 0.5em;
-moz-border-radius-topleft: 0.5em;
-khtml-border-radius-topright: 0.5em;
-khtml-border-radius-topleft: 0.5em;
-webkit-border-radius-topright: 0.5em;
-webkit-border-radius-topleft: 0.5em;
border-radius-topright: 0.5em;
border-radius-topleft: 0.5em;
}
#content, .toc
{
-moz-border-radius: 0.5em;
-khtml-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
This 1) omits the irrelevant padding change, 2) uses the official property names (which should always be done) as well as the property names for experimental implementations of those engines that I've heard have them, 3) fixes the fact that only two corners of the sidebar boxes are rounded, and 4) condenses some excessively verbose rules. —Simetrical (talk • contribs) 00:26, 4 July 2007 (UTC)
CSS code to remove ugly border around thumb images
{{editprotected}}
I would like to suggest to add the following code:
div.thumb { border: none; } div.tright { border: none; margin: 0.5em 0 0.8em 1.4em; } div.tleft { border: none; margin: 0.5em 1.4em 0.8em 0; }
... to get this instead of this effect (the difference is the ugly white border around the thumb). The code is copied from the German wikipedia. Freestyle 13:02, 4 August 2007 (UTC)
- Melsaran (formerly Salaskаn) 14:36, 4 August 2007 (UTC)
- Seems uncontroversial. Done. Cheers. --MZMcBride 14:39, 4 August 2007 (UTC)
- Thank you and Melsaran too for the support vote :) .Freestyle 15:15, 4 August 2007 (UTC)