Admin Forum:A few monobook questions

This Forum has been archived

Visit the new Forums!

Forums: Admin Central Index → General Questions → A few monobook questions

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4057 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I've got a few MonoBook questions that I would like to ask:

1. Major Tools

Here at Central, I've noticed using the MonoBook version the few links just above the main article (circled in the image) has a green border with border radius and also turns green during hover. What CSS are used for that, I can't find anything similar to that in MediaWiki:Monobook.css.

2. Background Linear

Why does Community Central using the Monobook version see a from dark blue fading to light blue background? Is it possible to put it on Isle of Tune Wiki? If so, then how? —This unsigned comment is by Sam Wang (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

The styles are in Monobook.css, you just have to know what to look for. Here are the styles that do what you're talking about, in no particular order:

#p-cactions li {
background-color: #FFFFFF;
border-color: #88c440;
border-width: 2px 2px 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

#p-cactions li a {
background-color: #FFFFFF;
color: #000000;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

#p-cactions li a:hover {
background-color: transparent;
color: #88c440;
text-decoration: underline;
}

In the regard of the background, Wikia actually uses a 1px x 1200px image for the gradient and just repeats it all the way across the page. That's quite an inefficient way of doing things. I'd suggest just using a CSS gradient to do it. I'm not going to explain them here because they're a bit complicated, but there's a good article over here that explains them. — Matthew2602 (talk) 09:16, June 22, 2012 (UTC)

Thanks, but how do I actually select the outside part? Also, is it possible to make it fixed?—This unsigned comment is by Sam Wang (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

The outside part of what? And make what fixed? The background? — Matthew2602 (talk) 09:59, June 22, 2012 (UTC)

Sorry that I didn't explain it clearly — I was asking what CSS selector can be used to select the background, and is it possible to make it position: fixed—This unsigned comment is by Sam Wang (wall • contribs). Please sign your comments by adding "~~~~" in the source editor.

The background is just controlled with the body tag, as it is on most websites. You can't use position:fixed on the background, because it isn't it's own element, but you can use background-attachment:fixed instead. — Matthew2602 (talk) 11:50, June 22, 2012 (UTC)

(Reset indent) I did

.body {
    background: linear-gradient(#2e87d7, #8bc1ef);
    background-attachment: fixed;
}

But it didn't work. What was wrong with it?

.body {
    background: -moz-linear-gradient(center top, #2e87d7, #8bc1ef);
    background: -ms-linear-gradient(center top, #2e87d7, #8bc1ef);
    background: -o-linear-gradient(center top, #2e87d7, #8bc1ef);
    background: -webkit-linear-gradient(center top, #2e87d7, #8bc1ef);
    background-attachment: fixed;
}

didn't work either. Since you know that Community Central has repeated an image, can you copy the code here for me please? Thanks! Sam Wang (talk) 12:33, June 22, 2012 (UTC)

(edit conflict) First, you should probably specify a direction that the gradient is coming from as the first value (eg. 'top', 'left', 'right', 'bottom') You're also going to have to use vector prefixes for that. The corelinear-gradient and radial-gradient properties have little cross-browser support. You're going to have to do something like:

background: -webkit-linear-gradient(top, #2e87d7, #8bc1ef);
background: -moz-linear-gradient(top, #2e87d7, #8bc1ef);
background: -o-linear-gradient(top, #2e87d7, #8bc1ef);
background: -khtml-linear-gradient(top, #2e87d7, #8bc1ef);

Also, by "body", I meant the element, not the class name. You're targeting the class name.

Try using background-image instead of just background. You could also be throwing your browser off by using center top, which is completely redundant because a linear gradient covers the entire side, and your browser probably doesn't recognise it. — Matthew2602 (talk) 12:44, June 22, 2012 (UTC)

Thanks! Sam Wang (talk) 00:10, June 23, 2012 (UTC)