Personalizar Extra Encuestas utilizando Códigos Css y Html.
Vamos a saber y aprender, sobre como cambiarle el aspecto del extra Encuestas.
Al momento de Crear encuestas, tendremos el aspecto basico.
Ahora comenzaremos con la modificación de este aspecto por uno mas personalizado.
Vamos a entrar al panel del extra, Controlar Extras >> Encuestas.
Una vez que estemos en el panel de opciónes, Tendremos que agregar un nombre a la página que se almacenará las encuestas.
En el campo de texto azul, agreamos un nombre de enlace, lo que se agregará en la url tal como se ve en la imagen que lo negro seria el nombre del enlace que pondremos.
Luego sigamos con la parte mas importante, vamos a tener que agregar este código.
Cita:
<style>
table {
background-color:transparent; //Color de fondo de tabla.
border-collapse: separate; //Esto es importante que no hagamos cambio, que es la separación de bordes.
border-spacing: 10px; //Separación de bordes.
text-indent: 0px; //Posicionamiento del texto.
display: table; //Mostrar tabla.
text-indent: 0px; //Posicionamiento del guion.
width: 100%; //Ancho del campo de la tabla.
}
td {
display: table-cell; //Mostrar celda de la tabla.
padding-bottom: 0px; //Relleno del boton.
padding-left: 0px; //Relleno del lado izquierdo de las celdas.
padding-right: 0px; //Relleno del lado derecho.
padding-top: 0px; //Relleno en la parte central.
text-align: top; //Posicionamiento del texto.
}
</style>
<div style=" font-style: italic;"><span style="color: rgb(255, 0, 0);"> //Agregamos este código para poner color a los textos. cambiamos el código del color rgb(255, 0, 0) y tambien le podemos cambiar la fuente de texto. italic //Este código se necesita cerrar con las etiquetas </div> </span> en el segundo campo, ya que no esta entre la etiqueta style.
La funciónes de este código es el contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table> definido en css en table{Funciones}.
Las tags <td>.....</td> indican que se trata de celdas comunes definido en css en td{Funciones}.
Entre las etiquetas table { Pueden ir mas códigos de bordes entre otros mas, hay que utilizarlo como si estariamos creando tablas normales}
En HTML lo podemos agregar con el simple código de tablas y celdas.
Cita:
<table width="100" border=" 1" bordercolor=" red" cellspacing=" 0" cellpadding=" 0" background=" IMAGEN DE FONDO DE TABLAS">
<tr>
<td><h3><font color="orange"> TITULO DENTRO DE LA TABLA</font></h3><font color=" red">
Solo lo tenemos que comenzar abrir a las tablas y celdas sin cerrar en el mismo campo.
En la parte del color de fondo se puede cambiar por el código de imagen de fondo.
background-image: url("URL DE LA IMAGEN");
Los códigos estan formados en html mediantes las tags en css, lo que componen este primer código de la tablas y las celdas en td.
Este código lo pegamos en la primera parte. (Introduzca texto a mostrar antes de las encuestas)
En este campo agregamos el Código.
En esta parte primera del código, nos ocupamos en abrir las etiquetas div, table. td, span (si es html)por lo cual la dejaremos abierta sin cerrar en este campo, ya que es la parte por encima de la encuesta, lo que vendria siendo mas o menos, texto por encima de la página si se dan una idea logica, las consecuencias en cerrar estas etiquetas en el mismo campo, no se efectuarian los cambios que le queremos dar en las encuestas, lo tendremos que texto despues de la encuesta, la formulación es la siguiente.
Texto antes de la encuesta.
+
Código extra de la encuesta
+
Texto despues de la encuesta
Hay que borrar lo que se encuentra en Naranja en el código CSS antes de agregar el código en la página.
Ahora pasemos a cerrar las etiquetas que abrimos en el primer código, agregamos los cierres de las etiquetas que faltan cerrarlas.
Cita:
</div> //Agregamos el cierre del código.
En el caso de agregar el código HTML, tendremos que cerrar lo que abrimos a principio.
Cita:
</div>
</span>
</td>
</tr>
</table>
Los dos código funcionan a la perfección, solo que css se basa a todo el diseño, y en html se basa en una sola parte sobre este código.
Si comenzamos con <div> en el primer código, en el segundo código lo agreamos en el segundo campo con el cierre que seria </div>.
Cuando hemos cerraro las tags que abrimos en el primer código, si no esta encriptado el código en css lo que se encuentra de <style> table, td </style> no hace falta cerrar con /table, /td, /tr (si no es css)
Utilizamos la etiquetas <tags> con los códigos que no comienzen con style, body.
Ahora vamos a agregarle un texto al boton para poder ingresar el voto selecionado.
En el campo azul, pondremos solo el texto que llevará el boton.
Al igresar el nombre, damos en Guardar.
Los cambios que hemos hecho, se quedarán guardadas en la página del extra.
Vamos a visualizar la página.
Asi queda personalizada nuestro extra, cambiandole el aspecto personalizable.
Hola a todos,
Gracias por comentar, sé que el tutorial es de diciembre , es mejor completar el tutorial sin que haya ninguna duda sobre el boton input en cual comentan, no se lo deje en el tutorial, ahora le dejo uno mas personalizado
Cita:
<style>
input { //Boton
border-bottom-width: 2px; //Ancho del borde.
border-left-width: 2px; //Ancho borde izquierdo.
border-right-width: 2px; //ancho borde derecho.
border-top-width: 2px; //ancho borde centro
background-image: url(URL DE LA IMAGEN DE BOTON); //Imagen de fondo del input. (*)
font-family: comic; //fuente de texto del voto, comic es una fuente, la pueden cambiar por otras, por ejemplo, arial
font-size: 13px; //Tamaño de fuente.
font-weight: 400; //ancho de fuente.
padding: 1px 8px; //relleno
text-align: center; //alineación del texto (center) - (left) (right)
text-indent: 0px; //inde.
text-transform: none; //tranformación.
}
</style>
Este código permite personalizar los bordes, texto, y la parte central del boton.
(*)En la parte donde dice..
Cita:
background-image: url(URL DE LA IMAGEN DE BOTON);
Se le puede agregar una imagen del boton o se le puede cambiar dandole color de fondo solo remplazando este simple código.
Cita:
color: #000000;
Sobre el texto, no es necesario ningun código, en el panel del extra brinda el texto al boton sin necesidad de agregar mas códigos.
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
Hemos activado nuestro foro... 
