Social Marketing that Performs

Guía Rápida para dominar el CSS

¿Para qué sirve? El CSS se usa para darle estilo al HTML

es decirEl CSS se usa para definir la apariencia (diseño) del

HTMLHTML con CSS

HTML sin CSS

¿Cómo funciona? Para cada cambio que quieras hacer en la

apariencia de tu HTML debes crear una regla en CSS  Una regla de CSS consiste en:

Selector {Atributo: Valor; }

Lo cual se traduce a:

DONDE hacer el cambio {QUE cambio hacer: CUANTO cambio hacer; }

Componentes Una regla de CSS se compone de:

Selector {Atributo: Valor; }

Selector: Es un elemento o contenido que se encuentra en tu HTML

Puede ser un texto, una imagen, un video, un botón, ¡lo que sea que haya configurado en la pantalla!

Componentes Una regla de CSS se compone de:

Selector {Atributo: Valor; }

Atributo: Es una propiedad o característica que posee el contenido seleccionado.

Puede ser el tamaño, la posición, el color, la tipografía, el fondo, ¡o incluso la presencia misma de un contenido, siendo que tienes la posibilidad de eliminarlo de la pantalla!

Componentes Una regla de CSS se compone de:

Selector {Atributo: Valor; }

Valor: Es la medida en la cual se especifica un atributo.

Esta definición se puede expresar como una medida de porcentaje, una cantidad de pixels, una combinación hexadecimal, una url web, u otra dependiendo del atributo seleccionado.

¿Cómo lo aplico en TFM? En el paso “Marca blanca”

(“Whitelabel”), en la sección “Hoja de estilos de la aplicación” haz click sobre el ícono de pantalla completa para visualizar el contenido cargado en cada pantalla de tu app y así poder seleccionarlo para escribir tus propias reglas de CSS.

¿Cómo lo aplico en TFM?

Simplemente haz click sobre un elemento, y entonces el selector y el esqueleto de la regla de CSS aparecerán automáticamente en tu panel izquierdo para que los completes con los atributos y valores que desees.

Una vez que los definas, haz click sobre el ícono de guardar ¡y podrás observar los cambios en pantalla!

Algunos Ejemplos

Ejemplos Para eliminar un contenido:

Selector {Display: none;} 

Atención: Al aplicar este cambio todo el contenido que se encontraba debajo del selector eliminado será desplazado hacia arriba.

Ejemplos Para ocultar un contenido:

Selector {Visibility: hidden;} 

Atención: Al aplicar este cambio todos los contenidos mantendrán sus posiciones originales dado que el selector ocultado, si bien ya no será visible en pantalla, aún se le respetará el espacio que ocupaba.

Ejemplos Para cambiar la posición de un contenido:

Selector {Position: relative;Top: 50px;Right: 200px;}

Ejemplos Para cambiar el color de un contenido:

Selector {Color: #F781D8;}

Ejemplos Para cambiar el tamaño de la tipografía:

Selector {Font-size: 50px;}

 A esta regla se le puede agregar también:Font-family: Courier New;Font-weight: bold;Text-align: center;Text-transform: uppercase;

Ejemplos Para cambiar el fondo de un contenido:

Selector {Background: url(http://tfmadmin.s3.amazonaws.com/Demo/LogoTFM.png);} 

A esta regla se le puede agregar también:Background-repeat: no-repeat;Background-size: 50%;Background-position: 100px 200px;

Ejemplos Para aplicar un cambio a una pantalla específica de la aplicación, agrega el prefijo que corresponda:  .home.registered Selector {Atributo: Valor;}

Prefijos por Pantalla:

Preview: .comingPromosHome:  .homeVariantes del home:   Home - Antes de Participar: .home.start    Home - Luego de Participar: .home.registered   Home - Finalizada la Acción: .home.finished Registro:  .registerRanking de Participaciones:  .viewentriesParticipación Específica:  .entry

Ejemplos Para escribir una aclaración o dejar una nota interna que sirva de recordatorio:

/* Escribe tu texto de esta forma */

Para más información, contacta:

soporte@thefanmachine.com