Como mejorar el estilo del CSS Message Boxes

Hola amigos, bueno en este tutorial que es sensillo les enseño a mejorar su estilo. Si deseas que se vea asi como el que tengo pues facil has lo siguiente:

Para empezar los que no conosen el mod y quieren agregarlo a su foro pues simple el link de mod es este:

http://custom.simplemachines.org/mods/index.php?mod=2078

Demo:



Empezemos, vamos a ir a Themes/TUTHEME/css/index.css

Buscamos:

Code: [Select]

.error_bbc, .warning_bbc, .okay_bbc, .info_bbc {
    margin-bottom: 1.5em;
    padding: 1em 1.5em 1em 5.5em;
    border-bottom: 2px solid #fff;
    border-top: 2px solid #fff;
    color: #444
}
Reemplazamos:

Code: [Select]

.error_bbc, .warning_bbc, .okay_bbc, .info_bbc {
    margin-bottom: 1em;
margin-right: 3em;
margin-left: 3em;
    padding: 1em 2em 1em 6em;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
border-radius: 10px;
    color: #444
}
Buscamos:

Code: [Select]

/* Lists */
.error_bbc ul, .warning_bbc ul, .okay_bbc ul, .info_bbc ul {
    list-style: none;
    margin: 1.3em 1.5em
}
.error_bbc ul li, .warning_bbc ul li, .okay_bbc ul li, .info_bbc ul li {
    padding-left: 1.3em
}
Reemplazamos:

Code: [Select]

/* Lists */
.error_bbc ul, .warning_bbc ul, .okay_bbc ul, .info_bbc ul {
    list-style: none;
    margin: 1em 1em
}
.error_bbc ul li, .warning_bbc ul li, .okay_bbc ul li, .info_bbc ul li {
    padding-left: 1.5em
}
Saludos!

Muy bueno, aunke se puede mejorar un poco el código.

En la primer parte kedaría mejor así:

Code: [Select]

.error_bbc, .warning_bbc, .okay_bbc, .info_bbc {
    margin: 0 3em 1em;
    padding: 1em 2em 1em 6em;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
    color: #333;
}
Al margin ponerlo en una sola línea, y luego agregar código al border-radius para una mejor compatibilidad con otros navegadores, por si no se utiliza explorer.

Otra cosa, revisá los códigos porke algunos no están bien cerrados. Siempre al final de una línea de código en el css, se coloca un ";" (punto y coma), para cerrar esa línea de código. Revisá eso porke te comiste unos cuantos ;

Saludos y Gracias por compartir!

Muy bueno, aunke se puede mejorar un poco el código.

En la primer parte kedaría mejor así:

Code: [Select]

.error_bbc, .warning_bbc, .okay_bbc, .info_bbc {
    margin: 0 3em 1em;
    padding: 1em 2em 1em 6em;
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
    color: #333;
}
Al margin ponerlo en una sola línea, y luego agregar código al border-radius para una mejor compatibilidad con otros navegadores, por si no se utiliza explorer.

Otra cosa, revisá los códigos porke algunos no están bien cerrados. Siempre al final de una línea de código en el css, se coloca un ";" (punto y coma), para cerrar esa línea de código. Revisá eso porke te comiste unos cuantos ;

Saludos y Gracias por compartir!

Genial man, gracias por tu aporte! Lastima que no s epeuda corregir el tema principal