En este artículo te explicamos cómo personalizar tu portal de empleo de Personio utilizando CSS. Cuando configures tu portal de empleo de Personio, tendrás que personalizarla para que se adapte a tu diseño corporativo. CSS te permite mayores opciones de personalización.

CSS son las siglas de Cascading Style Sheets. CSS se utiliza para crear comandos de diseño para páginas web, principalmente con el lenguaje de marcado HTML.

Ten en cuenta que no podemos ofrecer ayuda personalizada para el código CSS. La información y los ejemplos de este artículo son solo orientativos.

Antes de empezar

• Para configurar el portal de empleo de Personio, necesita tener permisos para la aplicación de Reclutamiento y sus ajustes.
• Le recomendamos que tenga algo de experiencia en el uso de CSS. Como alternativa, pídele a alguien de tu equipo de TI que te ayude.
• Ten en cuenta que no puedes usar CSS para cambiar la lógica o la estructura de las páginas de tu portal de empleo de Personio.

Acceda al campo de entrada CSS personalizado (hoja de estilo)

Para diseñar tu portal de empleo de Personio con CSS, utilizas una hoja de estilos integrada. Para acceder a él:

1. Ve a Ajustes > Reclutamiento > Portal de empleo.
2. Desplázate hacia abajo hasta Estilo. 
3. En CSS personalizado, puedes ver un campo de entrada. Esta es tu hoja de estilo.

Personalizar el diseño de un elemento concreto

Para personalizar un elemento específico de tu portal de empleo de Personio (como los botones de categoría), tienes que vincularlo a tu código CSS mediante un selector. Los selectores indican al CSS qué elementos HTML aplicar estilo. Puede usar selectores para cambiar el diseño de varios elementos. La mayoría de las veces utilizas selectores de clase cuando aplicas CSS a tu portal de empleo de Personio.

Las propiedades se utilizan para aplicar un diseño específico, como cambiar el color o la alineación de un texto.
 

Revisa los selectores y propiedades permitidos

Por motivos de seguridad, solo puede personalizar ciertos elementos HTML. Consulta la lista de elementos permitidos que aparece a continuación.

• h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span
• 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.

Si añades código que no está permitido, no funcionará. Al guardar los cambios, Personio elimina automáticamente cualquier código no compatible del campo de entrada CSS personalizado.

Esto se debe a una funcionalidad de seguridad integrada llamada desinfectante de código CSS. Comprueba el código CSS, marca cualquier cosa inesperada o con un formato incorrecto y elimina todo lo que pueda causar problemas de seguridad. También limpia el código agrupando propiedades similares. 

Buscar selectores

Para buscar selectores, sigue estos pasos:

1. Abre tu portal de empleo de Personio. Puedes encontrar la URL en Ajustes a través de Reclutamiento > Portal de empleo.
2. Haz clic con el botón derecho del ratón y selecciona Inspeccionar para abrir la vista de código.
3. 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.
4. Haz clic en el elemento al que quieras aplicar estilo. Esto resalta automáticamente el elemento en la vista HTML. A continuación, puedes copiar la clase requerida. Por ejemplo, los botones de categoría pertenecen a la clase ".category-btn"

Si realizas cambios directamente en la vista de código, estos son temporales y solo tú los puedes ver. Para realizar cambios permanentes, utilice el campo de entrada CSS personalizado (paso siguiente).

Introduce las propiedades a través del campo de entrada CSS personalizado

En el campo de entrada CSS personalizado, introduzca un punto y punto seguido del nombre de la clase. Utilice corchetes para definir lo siguiente: 

• La propiedad del elemento HTML que desea cambiar (por ejemplo, el color) y 
• El valor que se le va a asignar (por ejemplo, #ffffff = white)

Por lo tanto, un comando CSS con un selector de clases contiene los siguientes componentes de forma predeterminada:

.class-name {propiedad:valor; propiedad:valor; propiedad:valor;}

Ejemplo: Código CSS para un botón de categoría turquesa con texto blanco

.category-btn {color: #ffffff; color de fondo: #23b6dd}

Puede usar el botón de vista previa para evaluar los cambios.
 

Ejemplos:

Elemento Imagen de fondo del encabezado

Puedes usar CSS para retirar el filtro gris aplicado a la imagen de fondo del encabezado. Encuentra esto en Página de empleo > Estilo > Imagen de fondo del encabezado.

• Selector de clase: .background-image-wrapper
• Propiedad: background-image: none (sin imagen de fondo)

.background-image-wrapper {imagen de fondo: ninguna;}

Elemento Color de fondo

Puedes usar CSS para cambiar el color de fondo de una página de empleo de Personio por los colores corporativos. 

• Clase para invocar el elemento: .body-container, .footer, .background-image-wrapper
• Propiedades: background-color (color de fondo)
• Valor de la propiedad

En el código de ejemplo, el portal de empleo tiene un fondo azul claro: 

.contenedor corporal, .pie de página, .contenedor de imágenes de fondo
{color de fondo: #d5f0f7}

Tenga en cuenta que no puede crear colores de fondo diferentes para la página de empleo y los puestos de trabajo.

Elemento Encabezado

El título aparece en el centro de la imagen del encabezado. Puedes usar CSS para personalizarlo más allá del campo de edición predeterminado.

• Selector de clase: .recruiting-phrase
• Propiedades: color, font-size (color y tamaño de fuente)
• Valores de las propiedades

En el siguiente código de ejemplo, el título tiene un fondo azul claro y un tamaño de fuente de 40 píxeles.

.recruiting-phrase {color: #d5f0f7; tamaño de fuente: 40 px}

Elemento Barra de búsqueda

Por defecto, la barra de búsqueda de la página de empleo de Personio incluye una fuente gris sobre un fondo blanco. Pero también puedes personalizar este elemento con tu propio CSS.

• 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)

En el código de ejemplo que aparece a continuación, la barra de búsqueda es de color azul claro.

.search-bar-wrapper {color de fondo: #d5f0f7}

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.

• Selector de clase: .career-btn-primary
• Propiedades: color, background-color (color de fuente y de fondo)

.career-btn-primary {color de fondo: #FF0; color: #242424}

Elemento Caja de trabajos

De forma predeterminada, la página de empleo muestra cada empleo en un cuadro con un fondo blanco. Puedes personalizar este color de fondo.

• Selector de clase: .job-box
• Propiedades: background-color (color de fondo)

.job-box {color de fondo: #d5f0f7}

También puede personalizar la flecha que enlaza con el empleo.

• Selector de clase: .jb-link
• Propiedad: color

.jb-link {color: #23b6dd}

Elemento Pie de página

Puede personalizar el pie de página del portal de empleo mediante CSS. También puedes personalizar los enlaces del pie de página.

• 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 propiedades

En el código de ejemplo que aparece a continuación, el color del pie de página se establece en turquesa. El tamaño de fuente del texto predeterminado Desarrollado por Personio también se reduce a 12 píxeles. 

.footer {background-color: #23b6dd; tamaño de fuente: 12 píxeles;}
.pie de página a {color: #d5f0f7}