Este contenido ha sido traducido automáticamente. Por favor, contáctenos si algo parece incorrecto.
Nuestras opciones integradas ofrecen muchas formas de personalizar tu portal de carreras de Breezy.
Pero si eres un diseñador o desarrollador y quieres ir un paso más allá, puedes usar CSS personalizado para dar estilo a la página como el resto de tu sitio.
Nota: Si no tienes experiencia en diseño web, simplemente comparte esta página con tu equipo de diseño para que empiecen.
Se requiere permiso de Administrador para editar la configuración del Sitio de Carreras.
Cómo añadir CSS personalizado a tu Sitio de Carreras
Haz clic en el icono de engranaje ⚙️ en la barra lateral izquierda.
Pasa el ratón sobre Preferencias de Reclutamiento y haz clic en Configuración del Sitio de Carreras.
Haz clic en CSS/JS Personalizado en la barra lateral izquierda.
Introduce tu código bajo CSS Personalizado.
Haz clic en Guardar Cambios.
Nota: No puedes añadir HTML al campo de CSS Personalizado, incluyendo una etiqueta <script>.
Muestras de CSS
A continuación, se muestran algunos fragmentos de CSS comunes utilizados en Breezy.
Eliminar el mapa de ubicación en todas las posiciones
.location-container {
display: none;
}
Cambiar el texto en el botón "Aplicar"
.position button.apply {
text-indent: -1000px;
}
.position button.apply:before {
content: '<custom text>';
content: '<custom text>';
content: '<custom text>';
text-indent: 0;
}
Cambiar el texto de confirmación de la aplicación
.landing .confirmation-container .application-confirmed h1 {
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed h1:after {
content: 'EXAMPLE_TEXT_1';
float: left;
text-indent: 0;
width: 100%;
}
.landing .confirmation-container .application-confirmed p {
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed p:after {
content: 'EXAMPLE_TEXT_2';
float: left;
text-indent: 0;
width: 100%;
}
Cambiar el color del botón y usar un hover gris
Nota: Usa un código de color RGB.
.positions .position .bzyButtonColor {
background-color: rgb(XXX, XXX, XXX) !important;
}
.positions .position:hover .bzyButtonColor {
background-color: #aaa !important;
Cambiar el Hero H1 a un tamaño y color diferente
Nota: Se puede usar cualquier código de color CSS válido.
.hero .banner h1 {
color: #XXXXXX;
font-size: XXXpx;
padding-top: 0px;
}
Cambiar la fuente utilizada en el portal de carreras
Nota: Las fuentes especificadas deben estar alojadas, con la URL del archivo OTF incluida.
@font-face {
font-family: FONT-NAME-HERE;
src: url(http://some url/FONT-NAME.otf);
font-weight: bold;
}
div {
font-family: FONT-NAME-HERE;
}
Cambiar el texto en el botón "Enviar Aplicación"
.apply-buttons .button.green.large{
text-indent: -1000px;
}
.application-form .apply-buttons .button.green.large:before {
content: '<custom text>';
float: left;
text-indent: 20px;}
Eliminar el Widget de Compartir en Redes Sociales
.sharethis-sticky-share-buttons {
display: none !important;
}
Mostrar el video de la página de Carreras en navegadores móviles
@media only screen and (max-width: 900px) {
.body-wrapper .container.video.description .container-wrapper iframe {
display: block;
float: none;
margin: 0;
width: 100%;
}
}
Listar el video de la página de carreras encima de la descripción en lugar de al lado
.landing .container.video.description .container-wrapper iframe {
float: none;
margin-left: 0;
width: 100%;
height: 505px;
}
Cambiar el color del icono de Beneficios
Nota: Se pueden usar códigos de color RGB (xx,xx,xx) o HEX (\#XXXXXX), o el nombre del color.
.landing .container.perks .row .item i {
background-color: transparent !important;
color: var(--color-primary) !important;