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 > CVTemplates, 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.
Complete examples of possibilities
For separate css code scroll further down for example.
Example 1 (standard 1)
Add a background color behind image.
Code snippet to use for Advanced CSS styling for Standard 1;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Sono:wght@400;600&display=swap');
.page-heading .image-profile { margin-left: 15px; border: 3px solid #F9950B ;}.pageA4 { padding-bottom: 30px;}h1 {font-family: 'Inter', sans-serif;font-weight: 600;color: white;}h2, h3, h4 {font-family: 'Inter', sans-serif;}p, body {font-family: 'Inter', sans-serif;}h4 { color:#2e2e2e;}p, body { color: #63666A;}.page-heading .user-info .title { padding-bottom: 50px; color: #faebd7;}.page-heading { background: linear-gradient(to right, #F9950B, #FF8A98); padding-bottom: 15px; padding-top: 15px; border-radius: 30px; margin: 30px 0 30px 0;}#frontpage ul li:before { background: #F9950B;}.page-heading .image-profile { margin-left: 15px;}h4 {color: #4C4E52;}.work-experience__keywords-skill { background: #fff; border: 1px solid #5A5A5A; border-radius: 8px; color: #5A5A5A;}.skill-by-level__skill { background: #fff; border: 1px solid #5A5A5A; border-radius: 8px; color: #5A5A5A;}.row-two-columns.even { background: #f8ebd9;}.page-header .logo img { width: 150px;}h2 { border-bottom: 2px solid #F9950B; font-size: 24px; margin-top: 30px; padding-bottom: 5px; display: inline-block;}.workexperience__heading { display: inline-block;}
Example 2 (standard 2)
Code snippet to use for Advanced CSS styling for standard 2;
body {
color: #777777;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
.page-header .logo img { width: 150px}.page-header .contact { position: absolute; right: 20px;}page-heading .user-info .title { color: #777777; font-size: 20px; line-height: 20px; margin-bottom: 0;}.page-header .logo { position: absolute;}h2 { border-bottom: 3px solid #F9950B;font-size: 20px;margin-top: 30px;padding-bottom: 5px;display: inline-block;color: #444444;font-weight: 600;}.page-heading .image-profile { border: 3px solid #F9950B; margin-top: 30px;}.highlighted-project .business { margin: 10px 0;}h4 { color: #444444; font-weight: 600; font-size: 20px;}.page-header .logo img { width: 150px}.page-header .contact { position: absolute; right: 20px;}page-heading .user-info .title { color: #444444; font-size: 20px; line-height: 20px; margin-bottom: 0;}.page-header .logo { position: absolute;}.page-heading .image-profile { border: 3px solid #F9950B; margin-top: 30px;}.highlighted-project .business { margin: 10px 0;}h3 { font-weight: 600; font-size: 16px;}.work-experience__keywords-skill { background: none; border: 1px solid #F9950B; border-radius: 30px; display: inline-block; font-size: 11px; margin-bottom: 5px; margin-right: 5px; padding: 3px 10px;}.skill-by-level__skill { background: none; border: 1px solid #F9950B; border-radius: 30px; color: #333; display: inline-block; font-size: 11px; line-height: 1em; margin-bottom: 5px; margin-right: 5px; padding: 5px 15px;}
Example 3 (standard 3)
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.
Code snippet to use for Advanced CSS styling for standard 3;
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;1,100;1,300;1,400&display=swap');
.page-heading { align-items: flex-end; display: flex; margin: 10px 0 30px 0; min-height: 150px; position: relative;}.page-header .logo img { width: 150px;}.page-heading .image-profile { border: 3px solid #F9950B; margin-top: 30px;}.highlighted-project .business { margin: 10px 0;}page-heading .user-info .title { color: #444444; font-size: 20px; line-height: 20px; margin-bottom: 0;}h3 { font-weight: 600; font-size: 16px;}h1 {font-family: 'Roboto', sans-serif;color: #444444;font-size: 30px;font-weight: 400;}h2 { border-bottom: 3px solid #F9950B;font-size: 20px;margin-top: 30px;padding-bottom: 5px;display: inline-block;color: #444444;font-weight: 400;font-family:'Roboto', sans-serif;}body, p {font-family: 'Roboto', sans-serif;}h4 { font-weight: 400; font-size: 20px; color: #fff;}.skills-by-category {background: linear-gradient(to right, #F9950B, #FF8A98);padding-top: 10px;padding-left: 20px;height: 670px;color: #fff;border-radius: 6px;}#frontpage ul li:before { background: #fff;}#frontpage ul li:before { background-color: #fff;}#frontpage ul li { color: #fff;}.work-experience__keywords-skill { background: #fff; border: 1px solid #FF8A98; border-radius: 50px; color: #FF8A98;}.work-experience .from-month, .to-month { display: none;}.skill-by-level__stroke { background: #FF8A98; border-radius: 50px;}.skill-by-level__stroke__inner-circle { background: #FF8A98; border: 3px solid #fff; border-radius: 50px; color: #fff;}.skill-by-level__skill { background: #fff; border: 1px solid #FF8A98; border-radius: 30px; color: #FF8A98;}.row-two-columns.even { background: #f8edee;}.commitment__url { display: block !important;}
Examples of code snippet:
Change the border and background color on the skills under each project and make them more rectangular.
Example 1: Code snippet to use for Advanced CSS styling;
.work-experience__keywords-skill { background: #fff; border: 1px solid #000; border-radius: 3px; color: #000;}Example 2;
Hide months in the block Projects and Assignments listed on page 2 in the resume.
Example 2: Code snippet to use in Advanced CSS styling;
.work-experience .from-month, .to-month { display: none;}Example 3;
Change the look of the skill levels in the Skills by level block
Example 3: 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 4
Change background colors on tables, for eg, Courses and Certifications, Languages.
Example 4: 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
h1p.titlep.presentation-description(for only the presentation text)p(for all text)h2h3h4#frontpage ul li:before.skills-by-category.page-header .logo img.work-experience .from-month, .work-experience .to-monthp.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
If you want to learn more about CSS there are several online sites for free. You can, for example, learn more here