Templates and CSS Tips
You’ll want to customize the look and feel of your Review App site and the first step to doing so is to create a copy of the default Review App template. Copy the files in the ra-content/templates/vapor_trail/ to a new directory within the “templates” directory (for example: ra-content/templates/mytemplate/). Don’t forget to activate your new template in the admin dashboard.
Advanced users: If you’re creating a new template for an existing site, add a bit of logic to the config.php file that selects the template under development for only certain user ids (for example, your own). This way everyone else will see the existing template while you’re testing the new one.
We’ll go through each template file below and give you some tips for working with the files. Note: a bit of PHP knowledge will go a long way here, though it’s not necessary.
header.php, footer.php, and ad_code3.php
These three files form the overall wrapper for your Review App website. We recommend building your site template/theme as a standalone HTML document first then transferring the relevant sections to the header, footer, and ad_code files.
The ad_code3.php file is used to place content in the right column in the vapor_trail template for things like – you guessed it – ads!
section.php
This page is linked in your site’s header navigation and contains links to all categories within each section of your site. If you have a section with zero categories, this page will automatically re-direct users to the category page.
For sites with multiple sections you may want to add a bit of logic to give each section page a unique look and feel. Here’s an example:
<? if ($sectionID == '2'){ ?>
# # HTML for section 2 page # #
<? } elseif ($sectionID == '3'){ ?>
# # HTML for section 3 page # #
<? } ?>
The categoryListing() function is handy for producing a list of the categories within a given section. Just plug in the section ID, the #2 (this tells the function to return HTML), and the number of columns for your category list.
category.php
The category page is the workhorse of your Review App site. Fortunately it’s easy to customize.
The PHP variable $breadCode displays your breadcrumb navigation; move it around the page or delete it if you prefer.
$catNotes pulls in any category descriptions/notes you added in the Review App admin dashboard.
$addLink displays a link to allow users to add new listings within this section.
$navCode is the navigation code for your category pages – next/previous arrows and a page # menu. Move this around or delete as needed.
$rowCode brings in the list of listings returned for the category.
$filterCode displays any available filters you configured in Working with Categories.
item.php
This page has the greatest potential for customization and in some cases you may even want to create multiple versions of item.php for each section of your site. For example, if you want your mountain bike trail pages to look different from your mountain bike review pages you’d create two copies of item.php – one called trail.php and one called review.php. See this article (second half) to learn how to utilize multiple item page templates.
All of the item page data is available to the template designer via the $item array. This array has multiple parts so after studying the list below, try adding <? arrayOut($item); ?> on your listing template to see what specific variables and values are available.
$item['i']: Contains listing-level data.
$item['i']['a']: Array of basic listing data keyed off each field ID. This allows the template designer to access the data in a particular field (for example, if your listing title is stored in field 45 you’d display the title typing <? echo $item['i']['a'][45]; ?>.
$item['i']['d']: Array of default data fields keyed off default field names. Here you can access meta info like the date the listing was added, rating, default photo url, category name, and submiter ID and name.
$item['i']['c']: Array of custom data fields keyed off their field names.
$item['i']['ca']: Array of custom data fields keyed off field IDs and presented as field name:value pairs.
$item['r']: Array of reviews (if any) for this listing. Each review is numbered and within each review array you’ll find:
- $item['r'][review#]['m']: Meta info for the review (an edit link if the user is an admin or the original poster).
- $item['r'][review#]['a'], $item['r'][review#]['c'], $item['r'][review#]['d']: similar to the a, c, and d arrays described above.
$item['p']['photos'][photo#]: Array of photos of the item. Step through this array create a thumbnail photo gallery on the item page, for example.
$item['p']['default']: Default listing photo as determined by # of likes or date posted (configure this on the photo collector page).
$item['b']: Breadcrumb code.
$item['m']: Meta info. An edit link may be available here for authorized users.
$tagCode: Any user tags that have been added to this listing page.
$recArray: Array of recommended similar listing IDs.
ra_item_action_format(): Function to build the list of actions available on this listing page (add photo, tag, etc.).
Other pages
The other Review App template pages should be fairly self-explanatory. For more information on specific functions found on template pages, refer to the available functions article.
CSS
Review App has extensive CSS ids and classes built into most functions which allows you to style almost any portion of your review app site. All the CSS style information is contained in style.css located in your template directory and you can add your own styles to this file as well.
