Página de carrera de Personio: diseño con CSS

 

En este artículo te explicamos cómo puedes personalizar tu página de carrera (portal 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

Ve a Ajustes > Reclutamiento > Página de carrera > Diseño para personalizar tu página de carrera de Personio de acuerdo con tu identidad corporativa utilizando las opciones de configuración predefinidas. Por ejemplo, puedes editar los colores de los botones, las fuentes y los fondos o definir una fuente específica. Encontrarás más información sobre la configuración de la página de carrera de Personio aquí.

Si quieres personalizar aún más el diseño de tu página de carrera de Personio, puedes hacerlo utilizando la hoja de estilo CSS. Para ello, ve a Ajustes > Reclutamiento > Página de carrera > Diseño > Personalizar CSS. En la siguiente captura de pantalla podrás ver el campo Personalizar CSS con unas líneas de código de ejemplo:

careerpage-custom-css_es.png

 

Clases, selectores y propiedades de CSS

La estructura de tu página de carrera de Personio está creada en HTML y el diseño de cada uno de los elementos de HTML se ha definido utilizando 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 tu página de carrera de Personio, considera que el campo Personalizar CSS mostrado anteriormente constituye tu hoja de estilo.

Si quieres personalizar el diseño de un elemento específico de tu página de carrera 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 especificar los criterios de selección adecuados en la hoja de estilo, defines a qué elementos HTML deseas aplicar el estilo correspondiente. Existen varios tipos de selectores pero, para aplicar la hoja de estilo CSS a tu página de carrera 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 Personalizar CSS. 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

Para identificar los selectores a los que quieres aplicar el estilo, abre tu página de carrera de Personio (encontrarás la URL en Ajustes > Reclutamiento > Página de carrera), haz clic con el botón derecho del ratón y selecciona "Inspeccionar" para abrir la vista de código.

A continuación, te mostramos cómo puedes averiguar, por ejemplo, la clase para los botones de categoría.

careerpage-css-inspect_es.gif

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".

careerpage-css-identifying-selectors-class_es.png

Nota: sobrescribir o añadir propiedades y valores directamente en la vista de código solo cambia el frontend. Estos cambios no son permanentes y solo tú puedes verlos. Para que los cambios sean permanentes, utiliza el campo Personalizar CSS.

 

Añadir propiedades a través del campo Personalizar CSS

Ve a Ajustes > Reclutamiento > Página de carrera > Diseño > 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 de la página de carrera aparecerá en turquesa con letras blancas.

  

Corrector de código CSS

Si introduces una modificación que no está permitida en el campo Personalizar CSS, esta se eliminará después de guardarla y no se implementará. 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. 

Además, este corrector mejora la seguridad de tu página de carrera 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 tu página de carrera

A continuación, te indicamos algunas sugerencias para que diseñes tu página de carrera. En la siguiente captura de pantalla, te mostramos algunas líneas de código de ejemplo

careerpage-css-example_es.png

Ten en cuenta que CSS te permite personalizar aún más tu página de carrera 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 Página de carrera > Diseño 2.0 > 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)

 

Elemento: color de fondo

Puedes usar la hoja de estilo CSS para modificar el color de fondo de la página de carrera de Personio para que corresponda con tus colores corporativos. En el ejemplo a continuación, el color de fondo de la página de carrera 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)

No es posible guardar diferentes colores de fondo para la página de carrera y las ofertas de trabajo.

  

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 las opciones de formato predefinidas 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 la página de carrera de Personio usa una fuente gris sobre un fondo blanco. Pero 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 de tu página de carrera 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 tu página de carrera. 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 la oferta de trabajo

Las ofertas de empleo 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)

Y también podrás modificar el color de la flecha que lleva al anuncio 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í:

careerpage-css-preview_es.gif

 

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.

 

Insertar imágenes

En la siguiente tabla verás ejemplos de código que puedes utilizar para insertar imágenes y enlaces en la sección Quiénes somos o directamente en la descripción de las ofertas de empleo.

Para ello, accede a la vista de código haciendo clic en el botón A de la barra de formato y, a continuación, en el símbolo <>

css-code-view_es.png

 

A continuación, encontrarás ejemplos de código que podrás copiar y pegar directamente en la vista de código:

Código Descripción
<a href="URL">Nombre del enlace a tu URL</a>

Introduce la URL correspondiente en el atributo href (referencia de hipertexto) y el nombre que quieras poner al enlace.

<img src="URL donde se encuentra la imagen" alt="texto alternativo que describe la imagen"> En el atributo HTML scr introduce la URL donde se encuentra ubicada la imagen. En el atributo alt introduce el texto alternativo que aparecerá en caso de que no se pueda mostrar la imagen.

width="100"

p. ej.: <img src="URL donde se encuentra la imagen" alt="texto alternativo que describe la imagen" width="100">

Define el tamaño de tu logo/imagen. Si modificas el ancho, la altura se ajustará automáticamente. Si lo que quieres es ajustar el tamaño en función de la altura de tu logotipo, utiliza el atributo height. Las unidades admitidas por Personio son px, em y %. En este artículo encontrarás más información sobre las unidades de los atributos de anchura y altura.

 

Descubre aquí cómo puedes insertar vídeos en tu página de carrera.

 

¿No has encontrado lo que buscabas?

¡Nosotros te ayudamos! Coméntanos tus dudas y te responderemos lo antes posible.

Enviar una solicitud

Comentarios

0 comentarios

El artículo está cerrado para comentarios.

    Temas de este artículo