Jump to content

MediaWiki talk:Monobook.css

Page contents not supported in other languages.
From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by Davidgothberg (talk | contribs) at 14:34, 13 September 2007 (Moved top explanations to a notice box and added info about the "Catalogue of CSS classes".). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Notice the space between the horizontal rule and the image frame.

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)[reply]


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)[reply]

Definitely a good idea to color the background. Not sure which colors, though. — Omegatron 02:15, 4 April 2007 (UTC)[reply]

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)[reply]

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)[reply]
.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)[reply]
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)[reply]
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)[reply]
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)[reply]
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)[reply]
.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)[reply]
I love the red dashes! They draw attention to the subtle changes without uglifying the text. —David Levy 22:56, 10 April 2007 (UTC)[reply]
.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)[reply]
Looks nice. --MattWright (talk) 23:58, 10 April 2007 (UTC)[reply]
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)[reply]
This is a fantastic idea. --- RockMFR 14:59, 13 April 2007 (UTC)[reply]

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)[reply]

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)[reply]
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)[reply]
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)[reply]
The content-sub hiding on the Main Page is to get rid of the 'Redirected from' notice on redirects like Main page. --ais523 16:37, 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)[reply]

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)[reply]

Justify

Please, add to CSS-file "Justify" for the all texts. —The preceding unsigned comment was added by 24.168.39.49 (talkcontribs) 13:34, 15 June 2007 (UTC)[reply]

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)[reply]

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 (talkcontribs) 14:21, 15 June 2007 (UTC)[reply]

you can see:

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 (talkcontribs) 02:01, 16 June 2007 (UTC)[reply]

You can register a Wikipedia account and use a user stylesheet. Mike Dillon 02:12, 16 June 2007 (UTC)[reply]
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)[reply]
  • 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)[reply]
  • Mike, did u see that?
Asian Elephant - Justify
-Justify- - nice.))
Yes. Like I said, I don't think it looks better. Mike Dillon 15:53, 16 June 2007 (UTC)[reply]
  • ))) 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)[reply]
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)[reply]
  • "...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)[reply]
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)[reply]
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)[reply]

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))[reply]

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)[reply]

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)[reply]

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)[reply]

Melsaran (formerly Salaskаn) 14:36, 4 August 2007 (UTC)[reply]
Seems uncontroversial. Done. Cheers. --MZMcBride 14:39, 4 August 2007 (UTC)[reply]
Thank you and Melsaran too for the support vote :) .Freestyle 15:15, 4 August 2007 (UTC)[reply]