|
Estilos de tu encuesta
Una de las grandes ventajas de tusencuestas.com es que puedes configurar al 100% el estilo de tus encuestas y demás.
¿Cómo? Pues muy sencillo, configurando los estilos de las clases CSS de las encuestas. Si no sabes lo que son las CSS te recomendamos que lo aprendas en este tutorial.
Pero vayamos al grano. Fijaos en esta encuesta:
Los colores y efectos de estilo se consiguen al 100% con este sencillo CSS, que debéis colocar entre los tags <head> y </head> de la/s página/s en que se vaya a ubicar al encuesta.
<style>
.tusencuestas_encuesta
{
font-family: verdana;
padding: 5px;
border: 1px solid black;
background-color: #ffff99;
}
.tusencuestas_pregunta
{
font-weight: bold;
padding: 2px;
border: 1px solid black;
background-color: yellow;
}
.tusencuestas_respuestas
{
padding: 2px;
}
.tusencuestas_respuestas td
{
padding: 3px;
}
.tusencuestas_myBar
{
background-color: Yellow;
border: solid 1px black;
}
.tusencuestas_myBar_1
{
background-color: Orange;
}
.tusencuestas_myBar_3
{
background-color: Red;
}
.tusencuestas_myBar_4
{
background-color: Blue;
}
.tusencuestas_inferior
{
font-size: 10px;
color: Blue;
text-align: center;
}
input.tusencuestas
{
font-family: verdana,tahoma,sans-serif;
font-size: 10px;
color: black;
text-decoration:normal;
border: 1px groove black;
}
</style>
Explicamos paso por paso a qué se refiere cada clase CSS:
1.- tusencuestas_encuesta
Engloba el total de la encuesta. Cómo véis, entre otras cosas se le asigna un borde, que es el que rodea toda la encuesta.
2.- tusencuestas_pregunta
Únicamente se refiere a la parte de la pregunta. Cómo véis, le asigna el estilo BOLD, un borde y un color de fondo distinto al de la encuesta global, así como un espaciado de 2px entre los límites de la pregunta y la encuesta global.
3.- tusencuestas_respuestas
Se refiere al cuadro que
define donde se ubican las respuestas, en el momento que se va a responder.
3'5.- tusencuestas_respuestas
Se refiere al cuadro que
define donde se ubican las respuestas, cuando se ven los resultados de éstas.
4.- tusencuestas_myMasterBar
Aunque no está especificado en el ejemplo, la myMasterBar rodea a todas las barras, de modo que se puede definir un borde para darle un efecto diferente a las respuestas de la encuesta.
5.- tusencuestas_myBar
Define las propiedades generales de todas las barras. Las más típicas son el color de fondo y el borde.
6.- tusencuestas_myBar_N
Si queremos que todas las barras tengan el mismo color, nos vale con definir tusencuestas_myBar, pero si queremos asignar un color diferente a cada barra, podemos usar la clase CSS tusencuestas_myBar_N, donde N es el número de la barra ordenado de arriba a abaja. En nuestro ejemplo podéis observar que se define la clase tusencuestas_myBar, pero también se definen tusencuestas_myBar_1, tusencuestas_myBar_3, tusencuestas_myBar_4, con lo que la barra 2 acoge lo dispuesto en tusencuestas_myBar, y las barras 1, 3 y 4 lo dispuesto en sus correspondientes clases CSS
7.- tusencuestas_inferior
Define el estilo de la parte inferior de la encuesta, que es donde se ubica el botón de votar y los mensajes de "Mostrar resultados", "Mostrar pregunta", así como el texto que indica cuantas respuestas se han producido hasta el momento.
Por ejemplo, en nuestro caso vemos que hemos definido el color del texto como azul, por lo que todos estos mensajes aparecen en azul.
8.- input.tusencuestas_inferior y a.tusencuestas_inferior
Finalmente se puede definir un estilo específico a el botón de votar y a los enlaces "Mostrar resultados", "Mostrar pregunta", diferenciados de tusencuestas_inferior
Por tanto, os aconsejo que probéis una y otra vez con los estilos hasta alcanzar el que mejor se adapte a vuestra Web.
Del mismo modo, es muy importante que trabajéis con las plantillas (ver tutorial), con las que podréis guardaros vuestras propios estilos así como utilizar los estilos propuestos por tusencuestas.com
|
|
|