Cuadros de textos de Jimdo

Hola a todos! Hoy les traigo este pequeño tutorial, en el cual aprenderemos a hacer los cuadros para textos creados por Jimdo.

Estas interesado en ellos, entonces sigue leyendo!

Aqui un ejemplo:

Ejemplo de cuadro Rojo

Ejemplo de cuadro Azul

Ejemplo de cuadro Amarillo

Ejemplo de cuadro Negro

Tutorial

Para realizar el tutorial, tendremos que utilizar el módulo Widget/HTML y añadir algunas configuraciones en nuestro HEAD.

Paso 1

Primero tendremos que pegar el siguiente codigo en el HEAD de nuestra página:

▼Código HEAD

/*<![CDATA[*/

.code-box,

.content-hint,

.content-note,

.content-warning {

padding: 0.8em;

line-height:1.8em;

border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;

}

.code-box /* grau */ {

background-color: #e5e5e5;

color: black;

line-height:1.8em;

border:1px solid #ccc;

border-left: 4px solid #333 !important;

}

.content-hint /* blau */ {

background-color: #D9EDF7;

border:1px solid #BCE8F1;

color: #00719F;

border-left: 4px solid #00719F !important;

}

.content-note /* gelb */ {

background-color: #FCF8E3;

border: 1px solid #FBEED5;

color: #C09853;

border-left: 4px solid #C09853 !important;

}

.content-warning /* rot */ {

background-color: #F2DEDE;

border-left: 4px solid #B94A48 !important;

border: 1px solid #EED3D7;

color: #B94A48;

}

/*]]>*/

</style>

Paso 2

Luego de añadir el código al HEAD, solo nos quedaria pegar el código de nuestra caja en el lugar que queramos, utilizando el módulo Widet/HTML.