Cómo personalizar un codeeta con una imagen de fondo

15 marzo, 2013 Diseño y Desarrollo web No hay comentarios
0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×

Vamos a ver cómo podemos integrar un codeeta a una imagen de fondo o cómo darle el estilo que queramos al codeeta.

Para mostraros un ejemplo hemos cogido el pop-up de Groupon. Para ello hemos realizado una captura de pantalla del pop-up y lo guardamos como un PNG.

Creamos un codeeta desde el panel de control de la web de Codeeta. Al crearlo entraremos en ‘diseñar’ en el apartado de Widget, y podremos ver una pestaña que pone CSS y Javascript externo. Ahí pondremos la URL de la página CSS que tenemos que crear, la que tendremos subir a un servidor. De esta forma enlazamos nuestro CSS con el codeeta y podremos modificarlo para que esté bien integrado con el diseño de Groupon.

Añadiremos los elementos que necesarios en el codeeta. Con el CSS externo colocaremos exactamente donde queramos cada elemento. Todas las modificaciones se hacen buscando el nombre de la clase o el ID y sobrecargando el CSS.

En el ejemplo ya tenía la imagen su botón y campos, solo hay que posicionarlos y darle tamaño a cada campo, para que quede bien integrado en la imagen de fondo y los datos que introduzca el cliente nos llegue a nuestra cuenta de codeeta.

También podemos modificar la “X” de cierre de pop-up, pero el estilo no habrá que ponerlo en el CSS que hemos creado, sino en el CSS de la página en la cual hemos añadido el codeeta. Y para posicionar verticalmente el pop-up dentro de nuestra web, tendremos que hacer lo mismo, habrá que añadir el estilo dentro del CSS de la página.

Con todo esto podremos conseguir un codeeta perfectamente integrado a cualquier diseño que queramos y con la imagen de fondo que deseemos.

0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×
Agencia Diseño Web 360 Okisam - Marketing online Valencia

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia