Hop til hovedindhold

Relaterede artikler

Indlæser...

Vejledning: Tilpas design på jobportalen

Overblik​

Jobportalens udseende styres af CSS-variabler. Ved at uploade en CSS-fil med jeres egne værdier kan I tilpasse farver, fonte, afrundinger, skygger og meget mere — uden at skulle skrive CSS fra bunden.

Den samme CSS-fil virker til både den fulde jobportal (SPA) og den integrerede job-widget på jeres hjemmeside.

Før I starter​

  • I har oprettet en jobportal under Jobopslag > Jobportaler (se Dokumentation: Ny jobportal)
  • I har en teksteditor til at redigere CSS-filen (f.eks. Notepad, VS Code eller TextEdit)

Download skabelonen​

Download CSS-skabelonen, som indeholder alle tilgængelige variabler med standardværdier:

Download theme-template.css

Tilpas CSS-filen​

  1. Åbn den downloadede theme-template.css i en teksteditor.

  2. Find de variabler, I vil ændre, og erstat værdierne. For eksempel, skift primærfarven til jeres brandfarve:

    --innomate-color-primary: #E4500E;
    --innomate-color-primary-hover: #C9460C;
    --innomate-color-primary-active: #B23E0A;

  3. Slet de variabler, I ikke ændrer — standardværdierne bruges automatisk.

  4. Gem filen.

tip

I behøver kun at beholde de variabler, I faktisk ændrer. En minimal fil med kun 3–5 linjer kan være nok til at give portalen jeres eget look.

Upload CSS-filen​

  1. Gå til Jobopslag > Jobportaler i INNOMATE HR.

  2. Vælg den jobportal, I vil tilpasse.

  3. Gå til fanebladet Design.

  4. Upload jeres tilpassede CSS-fil i sektionen til CSS-filer.

  5. Gem ændringerne. Designet opdateres med det samme på jobportalen og job-widgetten.

Variabeloversigt​

Typografi​

VariabelStandardværdiBeskrivelse
--innomate-font-familysans-serifSkrifttype for al tekst
--innomate-line-height1.5Linjeafstand
--innomate-color-text#2e2e2eFarve på brødtekst
--innomate-color-headingblackFarve på overskrifter

Baggrund​

VariabelStandardværdiBeskrivelse
--innomate-color-bg#f7f7f7Sidebaggrund
--innomate-content-padding1emYdre indholdspadding

Kort / paneler​

VariabelStandardværdiBeskrivelse
--innomate-card-bg#ffffffBaggrund på kort
--innomate-card-border#e6e6e6Kantfarve på kort
--innomate-card-radius5pxKantafrunding
--innomate-card-shadow0px 2px 4px rgba(0,0,0,0.05)Skygge
--innomate-card-padding1emIndvendig padding (vokser til 2em ved 1024px)
--innomate-card-hover-shadow0 2px 8px 0 rgba(0,135,219,0.2)Skygge ved hover
--innomate-card-hover-border#0087dbKantfarve ved hover

Primærfarve (knapper, accenter)​

VariabelStandardværdiBeskrivelse
--innomate-color-primary#027AC4Primærfarve
--innomate-color-primary-hover#046BCCPrimærfarve ved hover
--innomate-color-primary-active#0465BFPrimærfarve ved klik
--innomate-color-primary-shadowrgba(4,107,204,0.2)Skygge på primærelementer

Sekundær / infotekst​

VariabelStandardværdiBeskrivelse
--innomate-color-info#555555Farve på sekundær tekst
--innomate-info-font-size14pxSkriftstørrelse for infotekst
VariabelStandardværdiBeskrivelse
--innomate-color-linkvar(--innomate-color-info)Linkfarve
--innomate-color-link-hovervar(--innomate-color-primary)Linkfarve ved hover

Knapper (standard / sekundær)​

VariabelStandardværdiBeskrivelse
--innomate-button-bg#ffffffBaggrund
--innomate-button-border#d1d1d1Kantfarve
--innomate-button-color#2e2e2eTekstfarve
--innomate-button-radius8pxKantafrunding
--innomate-button-shadow0px 3px 6px rgba(0,0,0,0.05)Skygge
--innomate-button-hover-bg#f2f2f2Baggrund ved hover
--innomate-button-active-bg#e5e5e5Baggrund ved klik
--innomate-button-disabled-color#abababTekstfarve (deaktiveret)
--innomate-button-disabled-bg#e6e6e6Baggrund (deaktiveret)
--innomate-button-disabled-border#e5e5e5Kantfarve (deaktiveret)

Formularfelter​

VariabelStandardværdiBeskrivelse
--innomate-input-bgWhiteBaggrund
--innomate-input-borderlightgrayKantfarve
--innomate-input-radius5pxKantafrunding
--innomate-input-focus-borderrgb(119,179,216)Kantfarve ved fokus
--innomate-input-focus-shadow0 0 4px rgb(200,224,239)Skygge ved fokus

Validering / status​

VariabelStandardværdiBeskrivelse
--innomate-color-error#dd2c1eFejlfarve
--innomate-color-success#28a745Succesfarve
--innomate-color-danger#dc3545Farve for fare/advarsel

Fanemenu (kun SPA)​

VariabelStandardværdiBeskrivelse
--innomate-tab-colorvar(--innomate-color-info)Tekstfarve på faner
--innomate-tab-active-color#bf591bFarve på aktiv fane
--innomate-tab-border#e5e5e5Kantfarve under faner

Filupload / drop zone (kun SPA)​

VariabelStandardværdiBeskrivelse
--innomate-dropzone-borderlightgrayKantfarve
--innomate-dropzone-radius10pxKantafrunding
--innomate-dropzone-active-border#007bffKantfarve når fil trækkes ind
--innomate-dropzone-active-bg#f0f8ffBaggrund når fil trækkes ind
--innomate-dropzone-link-colorrgb(0,102,204)Linkfarve i drop zone

Progressbar (kun SPA)​

VariabelStandardværdiBeskrivelse
--innomate-progress-bg#e6e6e6Baggrund
--innomate-progress-fillvar(--innomate-color-primary)Udfyldningsfarve

Panel, dialog og notifikationer (kun SPA)​

VariabelStandardværdiBeskrivelse
--innomate-panel-shadow0 15px 40px 0 rgba(0,0,0,0.1)Skygge på "Min ansøgning"-panel
--innomate-dialog-title-bg#F7F7F7Baggrund på dialogtitel
--innomate-notification-warning-bg#fff3cdBaggrund på advarsler
--innomate-notification-warning-border#ffeebaKantfarve på advarsler
--innomate-notification-warning-color#856404Tekstfarve på advarsler

Overskriftstørrelser​

Overskriftstørrelserne er defineret med mobile-first tilgang og vokser ved større skærmbredder:

VariabelMobil768px1024px1440px
--innomate-h1-size1.75rem2rem2.25rem2.75rem
--innomate-h2-size1.5rem1.75rem2rem2.5rem
--innomate-h3-size1.25rem1.5rem1.75rem2.25rem

Brug en brugerdefineret skrifttype​

I kan indlæse en brugerdefineret skrifttype (f.eks. fra Google Fonts) ved at tilføje en @import-linje øverst i CSS-filen:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body,
#innomate-jobs-widget {
    --innomate-font-family: 'Inter', sans-serif;
}

Tilføj egne CSS-regler​

Ud over variablerne kan I tilføje egne CSS-selektorer nederst i filen. Brug den kombinerede selektor for at ramme både SPA og widget:

.job,
#innomate-jobs-widget .job {
    border-left: 3px solid var(--innomate-color-primary);
}

I kan også ændre layoutet på jobdetaljesiden, f.eks. sætte titlen i fuld bredde over indhold og info:

@media (min-width: 1024px) {
    .job-details {
        grid-template-areas:
            "title   title"
            "content info";
    }
}

Se også​