===
CSS
===

CSS Files
~~~~~~~~~

List of CSS Files:

.. csv-table::
	:header: "File Name", "Description"
	:widths: 50, 150

	"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"

~~~~~~~~~~~~~~~~~~~~~~~~~~~
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 :ref:`LESS Files`.

.. index:: LESS Files

.. _LESS Files:

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.

.. seealso:: `LESS Homepage <http://www.lesscss.org>`_ for more information on using LESS.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Modifying the Theme using LESS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The variables used in the less files will change mostly every aspects of the theme.

.. code-block:: css

	@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;