Español English (US)

Menu

Introducción a la personalización de la promoción mediante CSS y código HTML/Javascript propio Seguir

Avatar
Marc Mateos - Easypromos
  • Actualización

En caso de utilizar una promoción del tipo Marca Blanca, dispones de las opciones de poder introducir código propio HTML, código Javascript, y también utilizar tus propios estilos CSS. Estas opciones no están disponibles para promociones Premium o Básicas.

Estas opciones permiten modificar y personalizar la plantilla de diseño que viene por defecto con Easypromos, la Plantilla Premium, aunque también aplica para la Plantilla Básica. De esta forma, el administrador podrá sobreescribir mediante CSS los estilos por defecto de Easypromos, mediante CSS ocultar elementos, poder introducir tu propio código HTML, y utilizar Javascript y jQuery para posicionar elementos HTML, reemplazar texto de sistema, mostrar popups de advertencia o por ejemplo reordenar elementos de la pantalla. Con estas herramientas un profesional programador de desarrollos web, podrá modificar la plantilla de Easypromos, para tener un diseño más personalizado. El límite lo pone la habilidad del programador con estas herramientas para conseguir el efecto o diseño deseado.

Atención: este artículo está dirigido a desarrolladores y programadores web, con conocimientos avanzados de CSS, HTML y Javascript.

Este artículo ha sido escrito como una introducción a la metodología de trabajo que recomendamos a una programador web, que quiera personalizar la plantilla de Easypromos. Se ha formulado como preguntas frecuentes, y al final de todo se presentan ejemplos de códigos HTML/CSS/Javascript para modificaciones y personalizaciones frecuentes.

Preguntas frecuentes sobre CSS

Listado de selectores CSS para customizar los estilos en base a condicionales

Preguntas frecuentes sobre Javascript

Ejemplos de código CSS propio

Ejemplos de código Javascript propio

Preguntas frecuentes sobre CSS

¿Dónde debo introducir los códigos CSS?

Los códigos CSS son genéricos a todas las páginas de la promoción (un mismo código de estilos se aplicará a todos los elementos que cumplan la ruta CSS especificada en ellos). Deben aplicarse accediendo al Editor >  Diseño > Avanzado > Estilos CSS, donde encontrarás el campo "Introduce tu propio código", que deberás introducir sin usar la etiqueta <style> (la aplicación la añadirá automáticamente).

CSS-code.jpg

¿Cómo puedo obtener la ruta de un elemento HTML para usarlo en mi código CSS?

Usando alguna herramienta para desarrolladores como el Inspector de Elementos de GoogleChrome o el add-on gratuito Firebug para Firefox.

Hacemos clic con el botón derecho en el elemento que queramos retocar y seleccionamos la opción "Inspeccionar elemento" (o similar).

Nos aparecerá la consola de inspección de HTML con el elemento resaltado. A veces, el elemento que se nos selecciona está a un nivel inferior al que nos interesa retocar, con lo que deberemos analizar el código hasta ver exactamente cuál es el que nos interesa.

En la zona de edición CSS del inspector podemos obtener la ruta. Como norma general, si se retoca cualquier elemento cuya clase empiece por gui_ o por hb_ es que se trata de un elemento genérico que puede aparecer en más de un lugar en la plataforma con lo que si sólo se quiere retocar un elemento en concreto, siempre habrá una clase más específica (incluso a un nivel superior) para poder seleccionarlo de forma explícita.

También podemos aplicar estilos o modificaciones a los ya existentes de modo temporal (al refrescar el navegador los cambios aplicados de este modo se restauran) y que se verán reflejados en tiempo real en la página web.

¿Qué puede y qué no puede modificarse mediante CSS?

Básicamente, puede modificarse con CSS cualquier propiedad que tenga un efecto visual, salvo contenidos. Es decir, fondos, posiciones, márgenes, bordes redondeados, filetes, colores, opacidad, visualización y un largo etcétera de parámetros.

Cualquier cosa que implique contenido (el texto de un botón, por ejemplo) o añadir elementos nuevos a una página, no puede hacerse mediante CSS. Por el contrario, eso puede hacerse mediante Javascript.

¿Puedo utilizar alguna tipografía no incluída en el listado de Editor > Diseño > Tipografías?

Sí. Puedes importar los ficheros de la tipografía que quieras usar en un servidor propio que disponga de conexión segura HTTPS. Luego, debes importar estos ficheros a la promoción mediante un poco de código.
Este código debe ser introducido en el apartado Editor > General > Diseño > Avanzado > Estilos CSS:

@font-face {
font-family: “CustomFont”;
src: url(“url_de_tu_fuente”);
}

Los ficheros de la tipografía pueden estar en el formato .otf, .ttf, .woff y/o .woff2:

@font-face {
...
src: src: url("custom-font.ttf"),
url("custom-font.otf") format("opentype"),
url("custom-font.woff") format("woff"),
url("custom-font.woff2") format("woff2");
}

Opcionalmente, puedes inserir más descripciones a la fuente, cómo:

  1. Acepta dos valores para especificar un rango admitido por una fuente con “font-stretch”.
  2. Define cómo se debe diseñar la fuente con “font-style”.
  3. Define la negrita de la fuente con “font-weight”.
  4. Define el rango de caracteres Unicode que admite la fuente con “unicode-range”.

En el siguiente ejemplo puedes ver cómo se usarían:

@font-face {
...
font-stretch: expanded;
font-style: italic;
font-weight: bold;
unicode-range: U+26;
}

En caso de tener la fuente en diferentes ficheros, como por ejemplo:

  custom-font-bold.otf

  custom-font-light-italic.otf

  custom-font-medium.otf

  custom-font-regular.otf

El código CSS se vería de la siguiente manera:

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-bold.otf”) format("opentype");

  font-weight: bold;

  font-style: normal;

  }

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-light-italic.otf”) format("opentype");

  font-weight: light;

  font-style: italic;

  }

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-medium.otf”) format("opentype");

  font-weight: medium;

  font-style: normal;

  }

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-regular.otf”) format("opentype");

  font-weight: normal;

  font-style: normal;

  }

De esta forma, al utilizar la fuente en tu código CSS podrás utilizar la misma fuente con el mismo nombre y sus diferentes variaciones. 

Finalmente, seguido de ese código, debes indicar a qué elementos de la promoción quieres asignar esa tipografía.

Por ejemplo, para usarla en todos los elementos que tienen la tipografía principal, sería este código CSS:

  .awesome * {

    --main-font:"CustomFont", sans-serif;

  }

Y, para reemplazar la tipografía secundaria, sería este código CSS:

  .awesome * {

    --secondary-font:"CustomFont", sans-serif;

¿Puedo reubicar un elemento dentro de una misma página con CSS?

La respuesta es sí, pero con salvedades. La Plantilla Premium está pensada según el paradigma Flexbox, con lo que muchos elementos pueden reubicarse cambiando el orden o el modo de apilamiento dentro de su contenedor (pasando de filas a columnas o inviertiendo el orden, por ejemplo). Pero hay que tener en cuenta que las páginas de la plataforma son responsive, con lo que no puede saberse con seguridad a qué resolución verán los usuarios la promoción, pues eso depende del ancho de pantalla de su dispositivo.

Nuestra recomendación es que sólo se modifique la posición de un elemento si se dispone de un objeto flexbox o se verifican todos los anchos disponibles en el apartado de previsualización de la promoción y se verifica que se ve todo correctamente.

Atributos CSS como el float o el position:absolute deben usarse con precaución al tener un efecto directo sobre la distribución vertical de los elementos dentro de una página.

¿Cómo puedo personalizar los estilos para dispositivos móviles?

Usando MediaQueries pueden personalizarse los estilos en función del ancho del dispositivo del usuario, mejorando así la experiencia que tenga con vuestra promoción.

Para aplicar las MediaQueries, simplemente añade al final de todas las instrucciones CSS personalizadas las instrucciones propias para los anchos que necesitéis para que todo se vea perfecto.

Los puntos de salto que usamos en Easypromos son para los siguientes anchos (indicamos entre paréntesis el equivalente para dispositivos móviles, pero estos estilos aplican en función del ancho de la pantalla independientemente del dispositivo, o de si está en versión de escritorio):

  • 1024px (iPad y Kindle apaisados)
  • 810px (pestaña de Facebook)
  • 768px (iPad vertical)
  • 685px (Samsung Galaxy apaisado)
  • 600px (Kindle vertical)
  • 568px (iPhone 5 apaisado)
  • 550px (medida intermedia)
  • 480px (iPhone 4 e inferiores apaisado)
  • 414px (iPhone 6 Plus vertical)
  • 380px (Samsung Galaxy vertical)
  • 320px (iPhone 5 e inferiores vertical)
  • 240px (ancho mínimo de promoción)

Ver el ejemplo de uso

Listado de selectores CSS para customizar los estilos en base a condicionales

Por página (en #ep-contents)

  • Página de inicio: .promoview_page
  • Cuestionario: .quiz_page
  • Formulario de registro: .formadd_page
  • Muchas gracias/página final: .success_page
  • Ya estás participando: .success_page.already_page
  • Listado de participantes: .entries_page
  • Participante individual: .voteme_page
  • Ganadores: .winners_page
  • Sección personalizada: .custom_section_page

Por navegador (en html)

  • Google Chrome: .is_chrome
  • Mozilla Firefox: .is_firefox
  • Apple Safari: .is_safari
  • Opera: .is_opera
  • Microsoft Edge: .is_msie

Por dispositivo (en html)

  • Escritorio: .is_desktop
  • Móvil: .is_mobile
  • iPhone: .is_mobile.is_iphone
  • iPad: .is_mobile.is_ipad
  • Android: .is_mobile.is_android
  • WindowsPhone: .is_mobile.is_windows

Por idioma (en html)

  • Idioma: .is_{lang_code}

Por origen (en html)

  • Microsite (por defecto): [ninguna]
  • Dentro de un widget (o Pestaña de Facebook): .in_widget.in_iframe

Preguntas frecuentes sobre Javascript

¿Dónde debo introducir los códigos Javascript?

Los códigos HTML o Javascript deben aplicarse en cada una de las páginas de la promoción, permitiendo así comportamientos distintos en cada una de ellas, o la adición de pixels de tracking en distintos puntos de la promoción. Deben aplicarse en los campos Editor > {página} > Avanzado, donde encontrarás el campo "Javascript, HTML y código propio", para las páginas "Bienvenida", "Formulario", Página "Final" y "Galería".

¿Cómo puedo obtener la ruta de un elemento HTML para usarlo en mi código Javascript?

Ver la pregunta frecuente relativa a CSS

¿Puedo usar librerías de Javascript como jQuery?

Por defecto, la aplicación importa y usa la librería jQuery 1.8.3, con lo que puede usarse en los códigos personalizados Javascript sin ningún problema.

Si necesitáis importar alguna otra librería, podéis usar el código de importación siguiente en la primera línea del código personalizado (adaptando la ruta al archivo que necesitéis. Es importante que el archivo esté alojado en un servidor que soporte HTTPS):

<script type="text/javascript" src="https://ruta-absoluta-archivo.js"></script>

¿Qué puede y qué no puede hacerse mediante Javascript?

Quizás el uso más común de esta funcionalidad sea la adición de píxeles de tracking personalizados para mapear el recorrido de los usuarios dentro de una promoción.

También puede añadirse algún elemento HTML mediante funciones jQuery como append() o prepend() respecto de algún elemento contenedor. Es posible, de todos modos, que posteriormente deba posicionarse con CSS (ver "¿Puedo reubicar un elemento dentro de una misma página con CSS?" para más información).

También puede retocarse el contenido de un elemento (como su texto) mediante la función html() de jQuery. De este modo pueden modificarse textos por defecto de la plataforma (ver ejemplo).

¿Puedo aplicar estilos CSS a los elementos añadidos mediante Javascript?

Por supuesto. Los estilos CSS se aplican a todos los elementos que cumplan sus selectores en cualquier momento. De este modo, se puede añadir un elemento HTML a una página mediante Javascript y asignarle una clase CSS que se definirá en el apartado de CSS y que se aplicará automáticamente cuando el elemento HTML dinámico aparezca en la página.

No es buena práctica añadir estilos CSS directamente en una atributo style en el HTML, ni en el mismo elemento HTML creado vía Javascript. La mejor opción siempre es añadir una clase a ese elemento y personalizarla mediante CSS.

¿Por qué veo el código Javascript en la página web como un texto?

Cualquier código Javascript, para que sea interpretado como código ejecutable y no como texto, debe ir dentro de unas etiquetas <script type="text/javascript"></script>.

¿Por qué no se ejecuta mi código Javascript?

La causa puede ser por distintos motivos. El más común es que en realidad sí que se aplica pero no en el editor (que sólo muestra previsualizaciones y no contenido real). Para verificar que realmente el código no se ejecuta, accede a la sección de previsualización de la promoción.

También puede ser que el código se haya introducido en alguna página distinta a la que debería aplicarse. Los códigos Javascript dependen de la página en la que estamos (así, la página de inicio tiene un código distinto a la página del formulario de registro, la página final o la del listado de participaciones). Los códigos deben aplicarse a todas las páginas dónde deban ejecutarse, aunque ello implique introducir el mismo código en todas las páginas.

Puede ser, incluso, que el código se ejecute antes de que existan los elementos a modificar en la página. Para ello, es importante introducir todo nuestro código dentro de una función ready() de jQuery (ver ejemplo).

En caso de que el código siga siendo ignorado, verifica que el código introducido sea correcto y que no haya ningún error en la consola Javascript (visible en el Inspector de Elementos, por ejemplo), en cuyo caso, corrige el error y vuelve a intentarlo.

console-error.jpg

Por ejemplo, en la imagen anterior el Javascript da un error porque el código que se ha introducido ($('.enter').htm("ENTRA");) contiene una función jQuery que no existe (en realidad es $().html(); y no $().htm();).

Ejemplos de código CSS propio

  1. Añadir bordes redondeados al botón participa

    .enter {
    overflow:hidden;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
}

  2. Cambiar el color del título de la promoción

    .promo_desc .promotion_title {
    color:#FF0000 !important;
}

  3. Poner en rojo el color de fondo de los campos del formulario de registro con errores

    .form_register .text .form-error,
.form_register .file .form-error,
.form_register .select .form-error {
    background:rgba(255, 0, 0, 0.3) !important;
}

  4. Ocultar para anchos inferiores a 480px la imagen de cabecera de la landing

    /* Resto de código CSS personalizado aquí */

@media screen and (max-width:480px) {
    .promoview_page .main_img_promo {
        display:none;
    }
}

  5. Intercambiar el orden entre los botones Participa y Votar partcipaciones en la landing

    .entries_button_flex {
    -webkit-box-ordinal-group:-1;
    -moz-box-ordinal-group:-1;
    -ms-flex-order:-1;
    -webkit-order:-1;
    order:-1;
}

Ejemplos de código Javascript propio

  1. Añadir una etiqueta "NUEVO" encima del título de la promoción

    En el campo Editor > Página de Inicio > Javascript, HTML y código propio:

    <script type="text/javascript">
    $(document).ready(function() {
        $('.promo_desc').prepend('<h5 class="new_promo">NUEVO</h5>');
    });
</script>

    En el campo Editor > Diseño > CSS personalizado:

    .new_promo {
    display:inline-block;
    padding:0 10px;
    background:#FF0000;
    margin-bottom:5px;
    position:relative;
    top:-5px;
}

  2. Cambiar el texto de todos los botones Compartir

    En los campos Editor > Página de Inicio | Formulario de registro | Página final | Listado de participaciones > Javascript, HTML y código propio:

    <script type="text/javascript">
    $(document).ready(function() {
        $('.gui_share_button a').html('COMPARTE');
    });
</script>
    Nota: En caso de necesitar modificar algún texto de sistema no editable desde el Editor, recomendamos crear un Diccionario, que te permitirá personalizar cualquier texto de cualquier pantalla de la promoción. Aprende aquí a crear tu propio Diccionario para utilizarlo en tus promociones.

  3. Añadir un contador de caracteres a un campo de texto adicional en el formulario de registro

    En los campos Editor > Formulario de registro > Javascript, HTML y código propio:

    <script type="text/javascript">
    $(document).ready(function() {
    	// clase única del campo. Se encuentra en el <div> que contiene el textarea a editar:
    	var field_selector = '.field_UserCustomField1';

    	// Máximo de carácteres a permitir:
    	var field_max_length = 500;

    	// Añadir un identificador único para que el código reconozca dónde tiene que mostrar los datos:
    	var feed = 'ag8qj7';

	// No edites el código a partir de aquí a no ser que lo tengas claro:
        $(field_selector).append('<div class="charCounter condensedTypography hb_secondaryFont"><div id="overLimit'+feed+'" class="maxChars">Maximum '+field_max_length+' characters: </div><div id="charCounter'+feed+'" class="counter"><span id="char-counter'+feed+'">'+field_max_length+'</span></div></div>');

	$(field_selector+' textarea').attr('maxlength', field_max_length);

        EP.charCount({
            container:$('.charCounter'),
            input:$(field_selector+' textarea'),
            target:$('#charCounter'+feed),
            max:field_max_length,
            over:$('#overLimit'+feed),
            submit:$('#botosubmit'+feed)
        });
    });
</script>

  4. Mover el Aviso Legal debajo del botón de Registro

    En los campos Editor > Formulario de registro > Javascript, HTML y código propio:

    <script type="text/javascript">
    $(document).ready(function() {
        $('.legal_text').appendTo('.register_call_to_action_flex');
    );
</script>

Artículos relacionados

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.