Advanced CSS allows you to style your CV template in a preferred way. Changing fonts, font sizes, colors, or margins are possible. By changing the CSS code, you can make significant changes in the look and feel of your CVs in a straightforward and fast way.

Note that the changes will ONLY apply in the HTML and PDF format of your CV, not the WORD file. Note that your changes will immediately apply to all CVs created with the same CV template. We would recommend that you work with a copy of the existing template when it's easier to say. Create a copy easily from the resume template overview;

How to update the CV template

Go to Administration > Company > Resume Templates, and click on the template you want to change.

You can easily set your colors without CSS to elements such as headings and skill levels. Use the hex code for the desired color. You can easily set your colors to elements such as headings and skill levels.

To do more advanced styling, use the Advanced CSS editor marked below.

Some examples of possibilities

Example 1;

Add a background color for highlighted skills, and update the color on the dots and the font color. For color updates, you can, for example, use hex codes.

Example 1: Code snippet to use for Advanced CSS styling;

.skills-by-category
{
    background: #9fc5e8;
    padding-top: 10px;
    padding-left: 13px;
}
 
h4 {
 color: #000;
}
 
#frontpage ul li:before {
    background-color: #000;
}
 
#frontpage ul li {
    color: #000;
}

.skills-by-category {
    background: #9fc5e8;
    padding-top: 10px;
    padding-left: 13px;
    height: 670px;
}

Example 2;

Change the border and background color on the skills under each project and make them more rectangular.

Example 2: Code snippet to use for Advanced CSS styling;

.work-experience__keywords-skill {
    background: #fff;
    border: 1px solid #000;
    border-radius: 3px;
    color: #000;
}

Example 3;

Hide months in the block Projects and Assignments listed on page 2 in the resume.

Example 3: Code snippet to use in Advanced CSS styling;

.work-experience .from-month, .to-month {
    display: none;
}

Example 4;

Change the look of the skill levels in the Skills by level block

Example 4: Code snippet to use in Advanced CSS styling;

.skill-by-level__stroke {
   background: #000;
   border-radius: 3px;
}
.skill-by-level__stroke__inner-circle { 
  background: #000; 
  border: 3px solid #fff; 
  border-radius: 3px; 
  color: #fff;
}
.skill-by-level__skill { 
  background: #fff; 
  border: 1px solid #000; 
  border-radius: 3px; color: #000;
}

Example 5

Change background colors on tables, for eg, Courses and Certifications, Languages.

Example 5: Code snippet to use in Advanced CSS styling;

.row-two-columns.even {
  background: #e9eff7;
}

List of selectors

You can easily update more elements using CSS;

below is a list of some of the selectors possible to use when working with advanced CSS

h1
p.title
p.presentation-description (for only the presentation text)
p (for all text)
h2
h3
h4
#frontpage ul li:before
.skills-by-category
.page-header .logo img
.work-experience .from-month, .work-experience .to-month
p
.work-experience__keywords-skill
.row-two-columns.odd .training
.row-two-columns.even
.skill-by-level__stroke__inner-circle
.skill-by-level__stroke
.skill-by-level__skill