Questo articolo spiega come personalizzare la tua pagina carriere Personio utilizzando i CSS.
Suggerimento
Cascading Style Sheets (CSS) è un linguaggio di programmazione e uno dei linguaggi principali del World Wide Web. I CSS vengono utilizzati per creare comandi di progettazione per le pagine web, principalmente con il linguaggio di markup HTML.
Personalizza la tua pagina carriere Personio utilizzando i CSS
La struttura della tua pagina carriere Personio viene creata utilizzando HTML. Il design visivo dei singoli elementi HTML è definito tramite CSS. In generale, il codice CSS è memorizzato in un foglio di stile separato, collegato al codice HTML corrispondente tramite i metadati del sito web. Quando crei la tua pagina carriere Personio , il campodi immissione CSS personalizzato costituisce il foglio di stile.
Il campo di immissione CSS personalizzato
Per personalizzare la pagina carriere di Personio in modo che corrisponda al design aziendale, procedi come segue:
- Nelle Impostazioni, vai su Recruiting > Pagina carriere.
- Scorri fino a Stile e vai su CSS personalizzato.
L'immagine seguente mostra il campo di immissione CSS personalizzato con un contenuto di esempio:
Personalizza il design di un elemento specifico
Per personalizzare il design di un elemento specifico della tua pagina carriere Personio (come i pulsanti delle categorie) utilizzando i CSS, devi creare un link univoco tra il foglio di stile e l'elemento HTML corrispondente. Questo link viene stabilito con i selettori.
Puoi definire gli elementi HTML che desideri progettare includendo i criteri di selezione pertinenti nel foglio di stile. Esistono vari tipi di selettori: quando applichi uno stile CSS alla tua pagina carriere Personio , utilizzerai più comunemente i selettori di classe .
Nota:
per motivi di sicurezza, non è possibile personalizzare tutti gli elementi HTML utilizzando il campo di immissione CSS personalizzato. Un elenco dettagliato di tutti gli elementi è disponibile alla fine di questo articolo, alla voce Link consentiti e opzioni di progettazione.
Trova i selettori
Per trovare i selettori pertinenti, procedi come segue:
- Apri la tua pagina carriere Personio . Puoi trovare l'URL nelle Impostazioni tramite Recruiting > Pagina carriere.
- Fai clic con il pulsante destro del mouse sulla pagina, quindi seleziona Ispeziona per aprire la vista codice .
- Fai clic sul simbolo in alto a sinistra nella vista del codice per abilitare la selezione degli elementi del codice.
- Fai clic sull'elemento a cui applicare lo stile. L'elemento viene contrassegnato automaticamente nella finestra che mostra la struttura HTML. È quindi possibile copiare il corso richiesto. Ad esempio, i pulsanti delle categorie appartengono a ".category-btn" classe.
Nota
La sovrascrittura o l'aggiunta di proprietà e valori direttamente nella vista codice modifica solo il front-end. Queste modifiche non sono permanenti e sono visibili solo a te. Per modificare in modo permanente il back-end, è necessario utilizzare il campo di immissione CSS personalizzato.
Inserisci le proprietà tramite il campo di immissione CSS personalizzato
Nelle Impostazioni, vai su Recruiting > Pagina carriere. Scorri fino a Stile > CSS personalizzato per selezionare la classe appropriata utilizzando il nome della classe preceduto da ".". Utilizza le parentesi graffe per indicare quale proprietà dell'elemento HTML desideri modificare (esempio: colore) e quale valore assegnare (esempio: #ffffff = bianco).
Un comando CSS con un selettore di classe comprende quindi i seguenti componenti per impostazione predefinita:
.class-name {property:value; property:value; property:value;}Il codice CSS per l'esempio sopra menzionato sarebbe quindi:
.category-btn {color: #ffffff; background-color: #23b6dd} Una volta inserito questo comando di stile, il pulsante della categoria nella pagina carriere verrà visualizzato in turchese con testo bianco.
Suggerimenti per la progettazione della tua pagina carriere
Di seguito troverai suggerimenti su come progettare la tua pagina carriere . L'immagine seguente mostra il campo di immissione CSS personalizzato con esempi di codice per ogni riga.
Codice di esempio
La tua pagina carriere Personio può essere ulteriormente personalizzata utilizzando i CSS. Tuttavia, le opzioni di personalizzazione non includono le modifiche alla logica o alla struttura della pagina.
Elemento: immagine di sfondo dell'intestazione
Utilizza lo stile CSS per rimuovere il filtro grigio applicato all'immagine memorizzata in Pagina carriere > Stile > Immagine di sfondo intestazione.
.background-image-wrapper {background-image: none;}- Classe per richiamare l'elemento: .background-image-wrapper
- Proprietà: background-image: none
Suggerimento
Per nascondere l'immagine di sfondo dell'intestazione, seleziona la rispettiva opzione in Pagina carriere > Stile > Layout. Questa funzione è utile se desideri integrare la tua pagina carriere Personio tramite iframe nella pagina carriere della tua azienda.
Elemento: colore di sfondo
Puoi utilizzare lo stile CSS per adattare l'intero colore di sfondo di una pagina carriere Personio ai colori della tua azienda. Nel codice di esempio, la pagina carriere ha uno sfondo azzurro:
.body-container, .footer, .background-image-wrapper.container-fluid
{background-color:#d5f0f7}- Classe per l'indirizzamento dell'elemento: .body-container, .footer, .background-image-wrapper.container-fluid
- Proprietà: background-color
- Valore di esempio per la proprietà: #d5f0f7 – qui: azzurro
Nota
Non è possibile creare colori di sfondo diversi per la pagina carriere e le posizioni.
Elemento: Titolo
Il titolo, che appare al centro dell'immagine dell'intestazione di una pagina carriere Personio , può essere formattato in Titoli. Se desideri personalizzarlo oltre al campo modificare predefinito, puoi utilizzare i CSS per apportare ulteriori modifiche alla formattazione, ad esempio (riga 1 dell'immagine):
.recruiting-phrase {color: #d5f0f7; font-size: 40px}- Classe per la selezione dell'elemento: .recruiting-phrase
- Proprietà: colore, dimensione del carattere
- Valore di esempio per la proprietà: #d5f0f7 – qui: azzurro, 40px
Elemento: barra di ricerca
Per impostazione predefinita, la barra di ricerca di una Pagina carriere Personio è impostata su un carattere grigio su sfondo bianco. Puoi utilizzare CSS personalizzati per personalizzare questo elemento. Nell'esempio mostrato, la barra di ricerca in alto è azzurra (linea 2 dell'immagine):
.search-bar-wrapper {background-color:#d5f0f7}
#search-job {background-color: #d5f0f7}- Classe per la selezione dell'elemento: .search-bar-wrapper, #search-job
- Proprietà: background-color
- Valore di esempio per la proprietà: #d5f0f7 – qui: azzurro
Elemento: icone
Per impostazione predefinita, nella barra di ricerca di Inserisci una parola chiave per il titolo di lavoro della tua pagina carriere viene visualizzata un'icona grigia (una piccola lente d'ingrandimento). Non puoi eliminare , ma puoi cambiare il colore dell'icona per nasconderla o enfatizzarla (riga 3 dell'immagine).
.fas.fa-search {color:#fff}- Classe per la selezione dell'elemento: .fas.fa-search
- Proprietà: color
- Valore di esempio per la proprietà: #fff (bianco)
Elemento: pulsante Cerca
Puoi anche modificare il design dei pulsanti della tua pagina carriere. Ad esempio, come mostrato di seguito, il design del pulsante Cerca nella barra di ricerca ( riga 4 dell'immagine):
.career-btn-primary { background-color:#FF0; color:#242424 }- Classe per la selezione dell'elemento: .career-btn-primary
- Proprietà: colore, colore di sfondo
Puoi definire ulteriormente la modalità di visualizzazione dei pulsanti quando un candidato passa il cursore su di essi. A tale scopo, vengono utilizzate pseudo-classi per ridefinire le proprietà del pulsante. Le pseudo-classi sono identificate da due punti, seguiti da un elemento come la parola"hover" dopo la classe effettivo (riga5 dell'immagine):
.career-btn-primary:hover {color:#05eefa; background-color:#708281;
border:2px dotted #d5f0f5}- Classe per la selezione dell'elemento: .career-btn-primary:hover
- Sintassi: .class-selector:pseudo-class {property:value;}
- Per ulteriori informazioni sulle pseudo classi, consulta i tutorial CSS online
Elemento: casella Posizioni
Per impostazione predefinita, i singoli lavori sono elencati in caselle con sfondo bianco. Tuttavia, puoi personalizzare questo colore (linea 6 dell'immagine):
.job-box {background-color: #d5f0f7}- Classe per la selezione dell'elemento: .job-box
- Proprietà: background-color
Puoi anche personalizzare la freccia > che funge da link al lavoro (riga 7 dell'immagine):
.jb-link {color: #23b6dd} - Classe per la selezione dell'elemento: .jb-link
- Proprietà: colore
Elemento: piè di pagina
Puoi anche personalizzare il piè di pagina utilizzando CSS personalizzati. In questo esempio, il colore del piè di pagina è impostato su turchese e la dimensione del carattere del testo predefinito Powered by Personio è ridotta. Puoi anche personalizzare i link nel piè dipagina (riga 8 dell'immagine):
.footer {background-color: #23b6dd; font-size: 12px;}
.footer a {color: #d5f0f7}- Classe per la selezione dell'elemento: .footer, .footer a (Link)
- >Proprietà: colore di sfondo, dimensione del carattere, colore
- Valore di esempio per la proprietà: #23b6dd – qui: turchese, 12px
Rivedi le modifiche apportate al design utilizzando il pulsante Anteprima. Ad esempio, le modifiche CSS descritte sopra hanno il seguente aspetto:
Link consentiti e opzioni di design
La sezione seguente contiene una panoramica di tutti i tag HTML che possono essere utilizzati come selettori e di tutte le proprietà CSS che è possibile modificare tramite la funzione CSS personalizzato.
Selettori
h1/h2/h3/h4/div, b, strong, i, em, a, ul, ol, li, p, br, span
Proprietà
altezza-linea, font, dimensioni font, spessore font, stile font, famiglia di font, decorazione testo, spaziatura interna a sinistra, colore, sfondo, colore di sfondo, immagine di sfondo, allineamento testo, larghezza, altezza, 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
Scopri come inserire immagini e video nelle pagine carriere di Personio .
Disinfettante per il codice CSS
Se desideri apportare una modifica non consentita, puoi comunque inserirla nel campo di immissione CSS personalizzato. Tuttavia, la voce viene eliminata dopo il salvataggio e non viene implementata. Ciò è scadenza al disinfettante codice CSS, una funzionalità di sicurezza delle pagine carriere di Personio che rimuove tutti gli elementi di codice HTML e CSS non supportati per ripulire il campo del codice.
Il disinfettante per il codice CSS migliora la sicurezza delle pagine carriere controllando nel campo di inserimento dati dannosi che potrebbero causare danni e rimuovendo immediatamente tali contenuti.
Lo strumento semplifica anche il codice e raggruppa le proprietà simili (ad esempio, padding-left: 10px; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; diventa padding: 5px 10px 10px).