User:Galil/Sandbox/New message

You have new messages (last change).

Best Wishes,

Thank you,

Monobook.css
Using your monobook.css you can customize pretty much anything on the entire wiki. The following section contains a few examples on how to customize this box. Note that they can be combined. For example, to get this look you could use the following code.

You have new messages (last change).

.usermessage { background-color: pink; border: 1px solid silver; padding: 15px; }

Also note that in some cases, your change might not take effect at all. In such cases, you will have to specify  after the property that refuses to take effect.

.usermessage { background-color: AliceBlue !important; }

background-color
Changes the background color of the box. As all colors in CSS, it can be specified using hex, RGB or using X11 color names. These three examples would all produce the same result. .usermessage { background-color: #FFEFD5; }

.usermessage { background-color: RGB(255, 239, 213); }

.usermessage { background-color: PapayaWhip; }

You have new messages (last change).

border
Changes the border and/or its color to your liking. This property is actually a merge of three different properties, namely,   and   and they are usually specified in that precise order. These examples would produce the same result.

.usermessage { border: 1px solid MidnightBlue; }

.usermessage { border-color: MidnightBlue; border-style: solid; border-width: 1px; }

You have new messages (last change).

As would these.

.usermessage { border: 3px dotted LightSlateGray; }

.usermessage { border-color: LightSlateGray; border-style: dotted; border-width: 3px; }

You have new messages (last change).

You may also specify different borders for the various edges, but that's beyond the scope of these examples. For more information on CSS' border properties, please refer to W3Schools' CSS Reference on borders.

color
Changes the color of the text inside the box.

.usermessage { color: red; }

You have new messages (last change).

Note that this property does not change the color of the links. To get around this (or even set the color of the links to be another than that of the text), you would do this.

.usermessage { color: red; } .usermessage a { color: MediumVioletRed; }

You have new messages  ( last change ).

font
Just like border, this property is a merge of most other font-related properties, them being too many to list here. But examples are provided nontheless. Note that the font-family part is a prioritized list of font families. If the first isn't available to the visitor, the second is used. If that isn't available either, the third is used. So on, so forth. If none are available, it reverts to the browser's default font. As such it is usually preferred to specify the last font as a generic font family. However, since you are the only one who will ever see this box, it is up to you what fonts (if even more than one) to specify. Also note that any font names with a space in them must be enclosed in quotes or apostrophes. These two examples would produce the same result.

Note that the  refers to font size/line height. If you do not wish to change the line height (as it is irelevant for this box), the slash and height can safely be ignored. .usermessage { font: italic small-caps bold 1.2em/1.5em 'Trebuchet MS', Tahoma, sans-serif; }

.usermessage { font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 1.2em; font-style: italic; font-variant: small-caps; font-weight: bold; line-height: 1.5em; }

You have new messages (last change).

For more info on the various font properties, please refer to W3Schools' CSS Reference on fonts.

margin
Used to set the amount of whitespace you want to have on each side of the box. This property can be split up into,  ,   and  , and it can be specified in numerous ways.

/* 2em margin all around */ .usermessage { margin: 2em; }

You have new messages (last change).

/* 2em margin on the top and bottom, 4em margin to the left and right */ .usermessage { margin: 2em 4em; }

You have new messages (last change).

/* 1em margin on top, 2em margin to the right, 3em margin on bottom, 4em margin to the left */ .usermessage { margin: 1em 2em 3em 4em; }

You have new messages (last change).

padding
Padding works pretty much like margin, except it specifies spacing inside the box instead of outside it.

/* 2em padding all around */ .usermessage { padding: 2em; }

You have new messages (last change).

/* 2em padding on the top and bottom, 4em padding to the left and right */ .usermessage { padding: 2em 4em; }

You have new messages (last change).

/* 1em padding on top, 2em padding to the right, 3em padding on bottom, 4em padding to the left */ .usermessage { padding: 1em 2em 3em 4em; }

You have new messages (last change).

text-align
Aligns the text inside the box. Valid values are,  ,   and.

.usermessage { text-align: right; }

You have new messages (last change).

text-decoration
Decorates the text in one way or another. Valid values are,  ,  ,   and.

Note that  does not work in Internet Explorer 6.0.

.usermessage { text-decoration: blink; }

You have new messages (last change).

text-transform
Transforms the casing of the text in one way or another. Valid values are,  ,   and.

.usermessage { text-transform: capitalize; }

You have new messages (last change).

visibility
Only useful if you do not want that box to be displayed, as it only hides or shows the box. Seeing as visible is the default value, the only time you would need to use this property is if you want to hide it. As such, the following example has no example box, as it wouldn't be displayed anyway.

.usermessage { visibility: hidden; }