Editor 6 - Personalizar los iconos del carrusel

Para ver nuestros documentos de ayuda en otra ventana: Documentos de ayuda

Puede crear sus propios iconos o descargar algunos desde una de las muchas fuentes de iconos gratuitos. Intenta buscando en google "iconos gratis".

Puede encotrar algunos ejemplos de iconos en la siguiente página: http://wefunction.com/2008/07/function-free-icon-set

Los iconos deben de escalarse al tamaño correcto antes de importarlos a BaseKit. Un tamaño apropiado sería de unos 48 pixeles cuadrados. Deberá guardar sus iconos como archivos PNG.

Estoy usando dos iconos de http://wefunction.com/2008/07/function-free-icon-set

'arrow-left-green' y 'arrow-right-green'

Haga clic en la pestaña de MEDIA (1) y luego en el botón Añadir (2). Seleccione e importe los dos iconos.

Haga clic en el icono de información de la imagen (1).Copie y pegue la URL (2) en uno des editores de texto como Notepad (Windows) o TextEdit (Mac).

La URL deberá de verse algo así: http://image.basekit.com/live97446_arrow_left_green_48.png

Nota: es fácil equivocarse al momento de copiar la dirección. Asegurese de que su URL empiece por "http" y termine con un ".png"

Repita este mismo proceso con el otro icono.

Haga clic en el icono de edición

Haga clic en la pestaña CSS (1) y localice las dos líneas de CSS que hablan sobre los botones (2).

El icono de la izquierda (1) y el de la derecha (2) requieren cada uno tres líneas de CSS.

Agregue una línea despues del primer corchete

Pegue lo siguiente:

background-image:url('LA-DIRECCION-URL-VA-AQUÍ')
background-position: 0 0;
width: 50px;

Reemplace LA-DIRECCION-URL-VA-AQUÍ por la URL del icono con la flecha izquierda que copió antes en un editor de texto. Nota: La URL debe de estar entre dos comillas simples.

Repita este proceso para el icono con la flecha derecha.

Haga click en GUARDAR CAMBIOS (3).

El código CSS terminado deberá de verse algo así:

.widget-carousel-previous
{
    background-image: url('http://image.basekit.com/live97446_arrow_left_green_48.png');
    background-position: 0 0;
    width: 50px;
}

.widget-carousel-next {     background-image: url('http://image.basekit.com/live97446_arrow_right_green_48.png');     background-position: 0 0;     width: 50px; }

Si los nuevos iconos no aparecen, entonces necesitará revisar que el código CSS se vea exactamente como el ejemplo dado aquí arriba.

Algunos de los errores más comunes son:
Olvidar poner las comillas sencillas que encierrar la URL
Una URL incompleta
Espacios adicionales al principio o al final de la URL
Borrar alguno de los corchetes