Añadir un borde a los gadgets y fijar el título a mitad del marco superior

Hola amig@s!En el tutorial de hoy vamos a realizar algo sencillo para que nuestro Blog este más personalizado:

Lo primero que que tenéis que hacer es una copia de seguridad de la plantilla (Plantilla→Crear/Restablecer copia de seguridad),después vamos a:

Plantilla → Personalizar → Avanzado → Añadir CSS. Y añadimos el siguiente código:

.sidebar .widget {
border: 2px solid #ffc0cb; /* Apariencia del borde */

}
.sidebar .widget-content {
padding: 10px;
}
.sidebar .widget h2 {
text-align: center;
z-index: 8;
top: -10px;
background: #ffffff; /* Fondo de la cajita del título */
left: 50%;
transform: translate(-50%, 0);
display: inline-block;

}
.sidebar .widget h2:after,.sidebar .widget h2:before {
content: "\00a0\00a0";
}

*(El código que esta en rojo, es el nombre de la tipografía.)