User:Galil/Sandbox/New message

You have new messages (last change).

Important note

Seeing as this page has been targeted by vandals quite a few times, please have a look at the history of the page before using any CSS-code you might find here, in order to figure out whether or not the code could have been maliciously modified.

New messages

The above box emulates the look and feel of the new messages box that appears when someone left you a message on your userpage. It is used for testing your monobook.css entries related to those changes, and any change in that file related to the new messages box will be reflected here.

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 !important after the property that refuses to take effect.

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

Examples

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 border-width, border-style and border-color 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 1.2em/1.5em 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 margin-bottom, margin-left, margin-right and margin-top, 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 center, justify, left and right.

.usermessage {
    text-align: right;
}

You have new messages (last change).

text-decoration

Decorates the text in one way or another. Valid values are blink, line-through, none, overline and underline.

Note that blink 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 capitalize, lowercase, none and uppercase.

.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;
}

See also

• W3Schools' CSS2 Reference