This guide is for WordPress developers. If you are not comfortable with CSS / HTML / PHP we wouldn't recommend to mess around with code.

If you want to introduce a change that is not possible by using the theme options panel, you have  ways to modify the theme code:


1) Using the Custom CSS area in the VamTam options panel 

This is the preferred way if you only need to make a few small changes: 


VamTam > General settings > Custom CSS Area



If you would like to add a specific class or ID for any element, you can do this by first wrapping the element in a Column, and then adding your chosen class/ID to the respective column options.


In the case of the ID, you need to enter an alphanumeric string without any spaces. In the case of the Class option, you need to enter a space-separated list of classes without dots (similar to how you would use HTML's class attribute). If you have entered my-column-class as the column's class, you can then use the following CSS selector for this column:


.my-column-class


2) Creating a child theme 

This is recommended if you want to build your CSS on top of ours, but don't want to use the Custom CSS Area in the theme options.


Any file you add to your child theme will overwrite the same file in the parent theme. 

In most cases, it’s best to create a copy of the template files you want to change from the parent theme, then make your modifications to the copied files, leaving the parent files unchanged. For example, if you wanted to change the code of the parent theme’s header.php file, you would copy the file to your child theme folder and customize it there.

If the file you'd like to modify is located in a subfolder, you have to create this subfolder in the child theme and place the file within.

Example: You're customizing the item.php. In the parent theme it's located in /templates/sermons/item.php - so you have to create in the child theme:

1. subfolder "templates" 

2. subfolder "sermons" in /templates

3. add the item.php file in the subfolder /templates/sermons


You can find a sample child theme here: http://vamtam.com/child-themes/

The official WordPress documentation explains this topic really well: http://codex.wordpress.org/Child_Themes


3) Modifying the *.less files in  wpv_theme/assets/css
This method is the hardest to use and it will complicate future updates. If you need to make substantial changes to the CSS, you can edit these files. Once you've made the required changes, you have to click "Save Changes" in the theme options in order to compile the LESS code to CSS. See the LESSPHP documentation for details about the LESS compiler we use: http://leafo.net/lessphp/docs/


Please note that you should always have a copy of your custom codes as sometimes you may mistakenly reset theme options to default and lose all your custom css.