Basic Structure of website

• Most of the view files/HTML code are in app/views folder.
  

All elements (reusable templates which appear on multiple pages) like navigation and other small elements are in app/views/elements folder

• Basic layout (header/footer) or wrapper of the website is in app/views/layouts/default.ctp However, if you are using any other theme than 'default' then you can find its wrapper file in app/views/themed/YourThemeName/layouts/default.ctp
  
• Default theme's css is in app/webroot/css/style.css and images in app/webroot/img/
  
• All theme's css are in app/webroot/themed/ThemeName/css folder for example business theme's css is in app/webroot/themed/Business/css/
  
• All files related to our plugins like user login, register, comments are in app/views/plugins/ folder
  

Creating a new theme

Say you wish to create a new theme which is similar to our electronics theme but you want it in green color and some other changes. Lets name our new theme as Greenery

1. You will create a new folder in app/webroot/themed/ named greenery.

2. Create folders css and img inside greenery folder.

3. Create a file named style.css in css folder and paste css from electronics theme in that file Also, add all generic icons used in website like review icon, comments icon and other icons and images in img folder under greenery folder.

4. Also, copy ext_config.php file from electronics folder and upload it in greenery folder.

5. Upload a screenshot of your theme in jpg format and name it greenery_preview.jpg, preferable size is 300x200.

6. Now go to app/views/themed/ create a new folder with the name greenery and create a folder under greenery named layouts in it and paste default.ctp inside layouts folder from electronics folder.

Now, our structure for greenery theme is ready, you can edit your style.css or default.ctp file of greenery theme to do changes accordingly. Since, Crowd Vox uses css compression you must either refresh cache from admin to see your changes or else you can edit- app/config/core.php and set debug mode to 1, so that you don't have to refresh cache after every single change.

Creating custom views

Now, lets imagine that you want to do some structural changes in our navigation say you wish to have a drop-down navigation, in that case we don't suggest you to directly edit the element->navigation_links.ctp as this will create problem for you in future when you'll upgrade your Crowd Vox. So, here are the instructions to create your custom views for your theme-

1. Copy the file that you wish to edit.

2. Go to app/views/themed/greenery folder, now since navigation is an element you need to create a folder named elements in greenery folder and paste your navigation_links.ctp inside it. So, that the path of your new navigation file becomes - app/views/themed/greenery/elements/navigation_links.ctp

Similarly, you can create other custom views too, just make sure that path of the file should be same, for example path of default login box is - app/views/plugins/users/elements/LoginBox.ctp and if we want to do some custom changes in login box then you should copy loginBox. ctp file here - app/views/themed/greenery/plugins/users/elements/LoginBox.ctp , we must create a folder plugins inside greenery folder, then users folder, and then elements folder inside it.

Creating new modules placements

If you look at our gadgets demo here- http://gadgets.demos.crowdvox.com/ you can see that we have created a footer with 3 sections and in admin's add module form, you can see footer_left, footer_mid, footer_right in section dropdown. You can easily place any module you want in any of these modules position. So, here are the steps of how to create custom module positions:

1. Decide the names of your section, in this case I wanted footer_left, footer_mid, footer_right

2. Now, open your theme's ext_config.php file

3. Find this section:

\**
* Module sections
*\
$blocks = array(
'left_sidebar', 'right_sidebar', 'top', 'bottom'
);

Now, you can define your new sections from here like this:

$blocks = array( 'left_sidebar', 'right_sidebar', 'top', 'bottom', 'footer_left','footer_mid','footer_right' );

Now, you must place a call for these modules in appropriate files where they should be displayed, in our case we need to edit our default.ctp file. Go to app\views\themed\greenery\layouts\default.ctp and write

<?php

if(isset($section))
{
echo $section->render('footer_left');
}

?>

wherever you want this section to be displayed, you can repeat the same code, just change "Footer_left" to your section name. Here is the sample code used for our gadgets theme's footer:

<?php

  if(isset($section))
   {
   echo $section->render('footer_left');
    }

?>

<?php

  if(isset($section))
   {
   echo $section->render('footer_mid');
    }

?>

<?php

  if(isset($section))
   {
   echo $section->render('footer_right');
    }

?>

These are some basic instructions needed to customize your theme, if you need to know about any specific file or element feel free to contact us.