En este artículo te explicamos cómo puedes personalizar los portales de empleo de Personio utilizando CSS.
El lenguaje de hojas de estilo en cascada o CSS es uno de los principales lenguajes de la World Wide Web. Las hojas de estilo CSS se utilizan para definir y aplicar estilos a las páginas web y se usan principalmente junto con el lenguaje de marcado HTML.
Personalización con CSS
Para personalizar tu portal de empleo de Personio acorde al diseño corporativo de tu empresa utilizando CSS, tendrás que seguir estos pasos:
- Ve a Ajustes > Reclutamiento > Reclutamiento > Portal de empleo.
- Desplázate hasta la sección Estilo y ve a CSS personalizado.
En la siguiente captura de pantalla podrás ver el campo Personalizar CSS con unas líneas de código de ejemplo:
Clases, selectores y propiedades de CSS
La estructura de los portales de empleo de Personio se ha creado en HTML, y el diseño de cada uno de los elementos de HTML se ha configurado a través de CSS. El código CSS se almacena generalmente en una hoja de estilo aparte, que se enlaza con el código HTML correspondiente por medio de los metadatos de la página web. Al diseñar el portal de empleo de Personio, ten en cuenta que el campo CSS personalizado constituye tu hoja de estilo.
Si quieres personalizar el diseño de un elemento específico del portal de empleo de Personio (como, por ejemplo, los botones de categoría) mediante CSS, debes vincular el estilo definido con el elemento HTML correspondiente utilizando los selectores. Al configurar los criterios de selección adecuados en la hoja de estilo, estableces a qué elementos HTML deseas aplicar el estilo correspondiente. Existen varios tipos de selectores pero, para aplicar la hoja de estilo CSS al portal de empleo de Personio, lo más común es utilizar selectores de clase.
Ten en cuenta que, por razones de seguridad, no es posible personalizar todos los elementos HTML a través del campo CSS personalizado. Encontrarás una lista detallada de todos los elementos al final del artículo, en el apartado Selectores permitidos y opciones de diseño.
Cómo identificar los selectores
Ejemplo
En el siguiente vídeo te mostramos cómo puedes determinar la clase para los botones de categoría.
Para identificar los selectores a los que quieres aplicar el estilo, sigue estos pasos:
- Abre el portal de empleo de Personio correspondiente (encontrarás la URL en Ajustes > Reclutamiento > Reclutamiento > Portal de empleo).
- Haz clic con el botón derecho del ratón y selecciona Inspeccionar para abrir la vista de código.
- Para poder seleccionar elementos e inspeccionar su código, haz clic en el icono que se encuentra en la esquina superior izquierda de la vista de código.
- A continuación, selecciona el elemento al que quieres aplicar el estilo. Este se resaltará automáticamente en la ventana que muestra la estructura del HTML y entonces podrás simplemente copiar la clase que corresponda.
Los botones de categoría pertenecen a la clase ".category-btn".
Ten en cuenta que al sobrescribir o añadir propiedades y valores directamente en la vista de código solo cambia la interfaz de usuario. Estos cambios no son permanentes y solo tú puedes verlos. Para que los cambios sean permanentes, utiliza el campo CSS personalizado.
Añadir propiedades a través del campo Personalizar CSS
Ve a Ajustes > Reclutamiento > Reclutamiento > Portal de empleo > Estilo > Personalizar CSS e introduce el nombre de la clase correspondiente precedido por ".". Indica entre llaves qué propiedad del elemento HTML quieres cambiar (en este caso, por ejemplo, el color de la fuente) y qué valor quieres asignarle (p. ej., #ffffff = blanco).
Por defecto, un comando CSS con selector de clase consta de los siguientes componentes:
.class-name {property:value; property:value; property:value;}El código CSS del ejemplo anterior sería:
.category-btn {color: #ffffff; background-color: #23b6dd} Al aplicar este comando de estilo, el botón de categoría del portal de empleo aparecerá en turquesa con letras blancas.
Corrector de código CSS
Si introduces una modificación que no está permitida en el campo CSS personalizado, esta se eliminará después de guardarse, y no se implementará. Esto se debe al corrector de código CSS, una característica de seguridad de los portales de empleo de Personio que elimina todos los elementos de código HTML y CSS que contengan, por ejemplo, una clase CSS incorrecta.
Este corrector mejora la seguridad de los portales de empleo, ya que comprueba si el campo contiene datos maliciosos que puedan ocasionar daños y los elimina de inmediato.
La herramienta también acorta el código y agrupa propiedades similares (p. ej., padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; se convierte en padding: 5px 10px 10px).
Ideas para diseñar tus portales de empleo
A continuación, te mostramos algunas sugerencias a la hora de diseñar tus portales de empleo. En la siguiente captura de pantalla, te mostramos algunas líneas de código de ejemplo.
Ten en cuenta que CSS te permite personalizar aún más tus portales de empleo de Personio, pero no cambiar la lógica ni la estructura de la página.
Elemento: imagen de fondo del encabezado
Puedes usar CSS para eliminar el filtro gris que usa el sistema en la imagen almacenada en Portal de empleo > Estilo > Imagen de fondo del encabezado.
.background-image-wrapper {background-image: none;}- Selector de clase: .background-image-wrapper
- Propiedad: background-image: none (sin imagen de fondo)
Consejo: si deseas ocultar la imagen de fondo del encabezado, basta con seleccionar la opción correspondiente en Ajustes > Reclutamiento > Reclutamiento > Portal de empleo > Estilo > Diseño. Esta función es especialmente útil si quieres integrar tu portal de empleo de Personio en tu portal de empleo corporativo a través de iframe.
Elemento: color de fondo
Puedes usar la hoja de estilo CSS para modificar el color de fondo de un portal de empleo de Personio para que se ajuste a tus colores corporativos. En el ejemplo a continuación, el color de fondo del portal de empleo es azul claro:
.body-container, .footer, .background-image-wrapper.container-fluid
{background-color:#d5f0f7}- Selector de clase: .body-container, .footer, .background-image-wrapper.container-fluid
- Propiedades: background-color (color de fondo)
- Valores de ejemplo de la propiedad: #d5f0f7 (en el ejemplo, azul claro)
Ten en cuenta que no es posible guardar diferentes colores de fondo para el portal de empleo y los puestos vacantes.
Elemento: título
En el apartado Encabezado, podrás formatear el título que aparece en el centro de la imagen del encabezado de los portales de empleo de Personio. Si las opciones de formato predeterminadas de esta sección no se ajustan a tus necesidades, puedes aplicar tus propios estilos utilizando CSS, por ejemplo (línea 1 de la captura de pantalla anterior):
.recruiting-phrase {color: #d5f0f7; font-size: 40px}- Selector de clase: .recruiting-phrase
- Propiedades: color, font-size (color y tamaño de fuente)
- Valores de ejemplo de la propiedad: #d5f0f7 (en el ejemplo, azul claro), 40 px
Elemento: barra de búsqueda
Por defecto, la barra de búsqueda de los portales de empleo de Personio usa una fuente gris sobre un fondo blanco. No obstante, también puedes personalizar este elemento con tu propio CSS. En este ejemplo, la barra de búsqueda es de color azul claro (línea 2 de la captura de pantalla):
.search-bar-wrapper {background-color:#d5f0f7}
#search-job {background-color: #d5f0f7}- Selector de clase: .search-bar-wrapper, #search-job
- Propiedades: background-color (color de fondo)
- Valores de ejemplo de la propiedad: #d5f0f7 (en el ejemplo, azul claro)
Elemento: iconos
En la barra de búsqueda del portal de empleo se muestra de manera predeterminada un icono gris (una pequeña lupa) con el texto Introduce la palabra clave del puesto de trabajo. Este icono no se puede eliminar, pero sí puedes cambiar el color para ocultarlo o resaltarlo más (línea 3 de la captura de pantalla).
.fas.fa-search {color:#fff}- Selector de clase: .fas.fa-search
- Propiedad: color
- Valor de ejemplo de la propiedad: #fff (blanco)
Elemento: botón Buscar
Del mismo modo, también puedes personalizar los botones de los portales de empleo. En el siguiente ejemplo, se ha modificado el estilo del botón Buscar (línea 4 de la captura de pantalla):
.career-btn-primary { background-color:#FF0; color:#242424 }- Selector de clase: .career-btn-primary
- Propiedades: color, background-color (color de fuente y de fondo)
Una característica especial de los botones es que también puedes determinar cómo deben verse, por ejemplo, cuando se pasa el cursor por encima (hover). Para ello debes utilizar las llamadas pseudoclases, que van siempre precedidas de dos puntos, y redefinir las propiedades de tu botón. En este caso, utilizaremos la pseudoclase "hover" después de la clase real (línea 5 en la captura de pantalla):
.career-btn-primary:hover {color:#05eefa; background-color:#708281;
border:2px dotted #d5f0f5}- Selector de clase: .career-btn-primary:hover
- Sintaxis: .class-selector:pseudo-class {property:value;}
- Para obtener más información sobre las pseudoclases, echa un vistazo a los diferentes tutoriales de CSS que encontrarás en internet.
Elemento: recuadro de las vacantes
Las vacantes aparecen, por defecto, en un recuadro con un fondo blanco, pero este color también se puede modificar (línea 6 de la captura de pantalla):
.job-box {background-color: #d5f0f7}- Selector de clase: .job-box
- Propiedades: background-color (color de fondo)
También podrás modificar el color de la flecha que lleva a la vacante correspondiente (línea 7 de la captura de pantalla):
.jb-link {color: #23b6dd} - Selector de clase: .jb-link
- Propiedad: color
Elemento: pie de página
Tanto el pie de página como los enlaces incluidos dentro se pueden personalizar mediante CSS. En este ejemplo, el pie de página es de color turquesa y el tamaño de fuente del texto estándar Powered by Personio es más pequeño (línea 8 de la captura de pantalla):
.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}- Selector de clase: .footer, .footer a (enlaces)
- Propiedades: background-color, font-size, color (color de fondo, tamaño de fuente y color de fuente, respectivamente)
- Valores de ejemplo de la propiedad: #23b6dd (en este ejemplo, turquesa), 12px
Puedes revisar los cambios que vas haciendo al diseño pulsando en el botón Vista previa antes de publicar la página personalizada. Por ejemplo, los cambios en el CSS descritos anteriormente se verían así:
Selectores permitidos y opciones de diseño
A continuación, encontrarás un resumen de todas las etiquetas HTML que puedes utilizar como selectores y todas las propiedades CSS que se pueden modificar a través del campo Personalizar CSS.
Selectores:
h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span
Propiedades:
line-height, font, font-size, font-weight, font-style, font-family,, text-decoration, padding-left, color, background, background-color, text-align, width, height, text-transform, padding-left, padding-right, padding-top, padding-bottom, margin-left, margin-right, margin-top, margin-bottom, border, border-radius.
Descubre cómo insertar vídeos e imágenes en los portales de empleo de Personio.