En este artículo te explicamos cómo personalizar tu portal de empleo de Personio utilizando CSS.
Consejo
El lenguaje de hojas de estilo en cascada (CSS) es un lenguaje de programación y uno de los lenguajes principales de la World Wide Web. CSS se utiliza para crear comandos de diseño para páginas web, principalmente con el lenguaje de marcado HTML.
Personaliza tu portal de empleo de Personio con CSS
La estructura de tu portal de empleo de Personio se crea en HTML. El diseño visual de los elementos HTML individuales se define mediante CSS. Por lo general, el código CSS se almacena en una hoja de estilo separada, que se vincula con el código HTML correspondiente utilizando los metadatos del sitio web. Al diseñar tu portal de empleo de Personio, el campo de entrada CSS personalizado constituye tu hoja de estilo.
El campo de entrada CSS personalizado
Para personalizar tu portal de empleo de Personio para que coincida con tu diseño corporativo, sigue estos pasos:
- En Ajustes, ve a Reclutamiento > Portal de empleo.
- Desplázate hasta la sección Estilo y ve a CSS personalizado.
La siguiente imagen muestra el campo de entrada CSS personalizado con contenido de muestra:
Personalizar el diseño de un elemento concreto
Para personalizar el diseño de un elemento específico de tu portal de empleo de Personio (como los botones de categoría) utilizando CSS, debes crear un enlace único entre la hoja de estilo y el elemento HTML correspondiente. Este enlace se establece con selectores.
Al especificar los criterios de selección adecuados en la hoja de estilo, defines a qué elementos HTML deseas aplicar el estilo correspondiente. Hay varios tipos de selectores: al aplicar estilos CSS a tu portal de empleo de Personio, lo más habitual es utilizar selectores de clase.
Nota
Por razones de seguridad, no es posible personalizar todos los elementos HTML utilizando el campo de entrada CSS personalizado. Una lista detallada de todos los elementos se proporciona al final de este artículo bajo el encabezado Enlaces permitidos y opciones de diseño.
Buscar selectores
Para encontrar los selectores relevantes, sigue estos pasos:
- Abre tu portal de empleo de Personio. Puedes encontrar la URL en Ajustes a través de 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.
- Haz clic en el elemento al que quieras aplicar estilo. El elemento se marca automáticamente en la ventana que muestra la estructura HTML. A continuación, puedes copiar la clase requerida. Por ejemplo, los botones de categoría pertenecen a la clase ".category-btn" .
Nota
Sobrescribir o agregar propiedades y valores directamente en la vista de código solo modifica la interfaz. Estos cambios no son permanentes y solo tú puedes verlos. Para que los cambios sean permanentes, utiliza el campo Personalizar CSS.
Introduce las propiedades a través del campo de entrada CSS personalizado
En Ajustes, ve a Reclutamiento > Portal de empleo. Desplázate hacia abajo hasta Estilo > CSS personalizado para seleccionar la clase adecuada usando el nombre de la clase precedido por ".". Utiliza llaves para indicar qué propiedad del elemento HTML quieres cambiar (ejemplo: color) y qué valor asignarle (ejemplo: #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} Una vez que ingreses este comando de estilo, el botón de categoría en el portal de empleo se mostrará en turquesa con texto blanco.
Ideas para diseñar tu portal de empleo
A continuación encontrarás sugerencias sobre cómo diseñar tu portal de empleo. La siguiente imagen muestra el campo de entrada CSS personalizado con ejemplos de código para cada línea.
Código de ejemplo
Puedes personalizar aún más tu portal de empleo de Personio utilizando CSS. Sin embargo, las opciones de personalización no incluyen cambios en la lógica o la estructura de la página.
Elemento: imagen de fondo del encabezado
Utiliza el estilo CSS para eliminar el filtro gris aplicado a 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 quieres ocultar la imagen de fondo del encabezado, selecciona la opción correspondiente en Portal de empleo > Estilo > Diseño. Esta función es útil si deseas integrar tu portal de empleo de Personio a través de iframe en el portal de empleo de tu empresa.
Elemento: color de fondo
Puedes usar la hoja de estilo CSS para modificar el color de fondo del portal de empleo de Personio para que corresponda con tus colores corporativos. En el código de ejemplo, el portal de empleo tiene un fondo 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)
Nota
No es posible crear diferentes colores de fondo para el portal de empleo y los empleos.
Elemento: título
En la sección Encabezados, podrás formatear el título que aparece en el centro de la imagen del encabezado de tu página de carrera de Personio. Si deseas personalizarlo más allá del campo de edición predeterminado, puedes usar CSS para realizar más cambios de formato, por ejemplo (línea 1 de la imagen):
.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
De forma predeterminada, la barra de búsqueda de un portal de empleo de Personio se configura en una fuente gris sobre un fondo blanco. Pero también puedes personalizar este elemento con tu propio CSS. En el ejemplo que se muestra, la barra de búsqueda superior es azul claro (línea 2 de la imagen):
.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
De forma predeterminada, se muestra un icono gris (una pequeña lupa) en la barra de búsqueda de la palabra clave Introduce el título del empleo de tu portal de empleo. No puedes eliminar esto, pero puedes cambiar el color del icono para ocultarlo o resaltarlo (línea 3 de la imagen).
.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
También puedes modificar el diseño de los botones de tu portal de empleo. Por ejemplo, como se muestra a continuación, el diseño del botón Buscar en la barra de búsqueda (línea 4 de la imagen):
.career-btn-primary { background-color:#FF0; color:#242424 }- Selector de clase: .career-btn-primary
- Propiedades: color, background-color (color de fuente y de fondo)
Puedes definir aún más cómo deben aparecer los botones cuando un candidato pasa el cursor sobre ellos. Esto se hace mediante el uso de pseudoclases para redefinir las propiedades del botón. Las pseudoclases se identifican con dos puntos, seguidas de un elemento como la palabra"hover" después de la clase real (línea 5 de la imagen):
.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: cuadro Empleos
De forma predeterminada, los empleos individuales se enumeran en cuadros con fondo blanco. Sin embargo, puedes personalizar este color (línea 6 de la imagen):
.job-box {background-color: #d5f0f7}- Selector de clase: .job-box
- Propiedades: background-color (color de fondo)
También puedes personalizar la flecha > que sirve de enlace al puesto de trabajo (línea 7 de la imagen):
.jb-link {color: #23b6dd} - Selector de clase: .jb-link
- Propiedad: color
Elemento: pie de página
También puedes personalizar el pie de página usando CSS personalizado. En este ejemplo, el color del pie de página se establece en turquesa y el tamaño de fuente del texto predeterminado Desarrollado por Personio se reduce. También puedes personalizar los enlaces en el pie de página (línea 8 de la imagen):
.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
Revisa los cambios que realices en el diseño usando el botón Vista previa. Por ejemplo, los cambios en el CSS descritos anteriormente se verían así:
Selectores permitidos y opciones de diseño
La siguiente sección contiene una descripción general de todas las etiquetas HTML que se pueden usar como selectores y todas las propiedades CSS que puedes modificar a través de la función CSS personalizado.
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, background-image, text-align, width, height, text-transform, padding, padding-right, padding-top, padding-bottom, margin, margin-left, margin-right, margin-top, margin-bottom, border, border-top, border-bottom, border-left, border-right, border-radius
Descubre cómo insertar vídeos e imágenes en los portales de empleo de Personio.
Corrector de código CSS
Si deseas realizar una modificación que no está permitida, aún puedes ingresarla en el campo de entradaCSS personalizado. Sin embargo, tu entrada se elimina después de guardarla y no se implementa. Esto se debe al corrector de código CSS, una característica de seguridad de la página de carrera 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 agiliza el código y agrupa propiedades similares (por ejemplo, padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; se convierte en padding: 5px 10px 10px).