2. CSS

2.1. CSS Files

List of CSS Files:

File Name	Description
style.css	Custom css stylesheet used to set the default theme
theme-light-blue.css	Solid blue theme based of the default light theme
theme-light-green.css	Solid green theme based of the default light theme
theme-light-red.css	Solid red theme based of the default light theme
theme-light-purple.css	Solid purple theme based of the default light theme
theme-dark.css	Custom Dark Theme
theme-dark-blue.css	Solid blue theme based off the dark theme
theme-dark-green.css	Solid green theme based off the dark theme
theme-dark-red.css	Solid red theme based off the dark theme
theme-dark-purple.css	Solid purple theme based off the dark theme
bootstrap.min.css	CSS Stylesheet for the Bootstrap 3 framework
font-awesome.min.css	CSS Stylesheet for the Font Awesome icon set
jquery.fancybox.css	CSS Stylesheet for the jQuery fancybox plugin

2.1.1. Modifying a theme using CSS

The best way to modified the compiled CSS is using the LESS files as a reference. If you want to change the color used for the @profileColor, find the #profile and .profile-bg section of the CSS file and change the color HEX value accordingly:

...

#profile h3 {
  color: #4ca5d0;
  font-weight: 600;
  font-size: 18px;
}

...

.page-head .profile-bg {
  background: #4ca5d0 !important;
}

Note

The recommended method for modifying the theme is using LESS Files.

2.2. LESS Files

This theme was created using LESS Styles to compile the standard CSS Stylesheets. When modifying the theme it is recommended to modify the LESS files to generate the CSS, but is not required.

See also

LESS Homepage for more information on using LESS.

2.2.1. Modifying the Theme using LESS

The variables used in the less files will change mostly every aspects of the theme.

@bg-color: #E2E2E2;
@page-bg-color: #F6F6F6;
@primary-text-color: #878787;
@header-text-color: #414141;
@tag-line-color: #878787;
@border-color: #E2E2E2;

@link-color: #4CA5D0;
@link-hover-color: #345d82;

@profileColor: #4ca5d0;
@resumeColor: #4ae2b1;
@portfolioColor: #9018C5;
@portfolio-link-color: #9018C5;
@contactColor: #E32B1D;
@footer-bg-color: #4ca5d0;
@footer-social-link-color: #F6F6F6;
@footer-social-link-hover-color: #c0c0c0;

@text-gray: #7C7C7C;

@border-radius: 3px;

@bubble-progress-bg-color: #E2E2E2;