Difference between revisions of "How does the JReviews Theme Engine work"

From JReviews Documentation
Jump to: navigation, search
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
JReviews uses a php templating system. This means you can mix html with php code, which provides a lot of flexibility to create conditionals and add snippets of php code.
 
JReviews uses a php templating system. This means you can mix html with php code, which provides a lot of flexibility to create conditionals and add snippets of php code.
  
JReviews themes are located in this folder: /components/com_jreviews/views/themes/ and the theme files have the .thtml extension.
+
== JReviews Themes ==
  
In that folder you'll find several themes:
+
JReviews themes are located in this folder:
*/components/com_jreviews/views/themes/'''default'''/
+
*/components/com_jreviews/views/themes/'''default_02'''/
+
*/components/com_jreviews/views/themes/'''default_dark'''/
+
  
 +
*<span style="color: blue">/components/com_jreviews/jreviews/views/themes/</span>
  
You will notice that '''/default_02''' and '''/default_dark''' theme folders contain much less files than the '''/default''' theme folder.
+
You will find several themes there:
 +
*/components/com_jreviews/jreviews/views/themes/'''default'''/
 +
*/components/com_jreviews/jreviews/views/themes/'''dark'''/ - for using with dark Joomla templates
 +
*/components/com_jreviews/jreviews/views/themes/'''mobile'''/ - for mobile devices
 +
You will notice that &quot;dark&quot; and &quot;mobile&quot; theme folders contain less files than the &quot;default&quot; theme folder. The default theme is a &quot;fallback&quot; theme which contains all the necessary files, while dark and mobile themes are variations of the default theme and contain only &quot;modified&quot; files and images. If a theme doesn't contain a certain file, JReviews will load that file from the default theme. That makes updating themes easier.
  
The /default folder contains all the theme, css and image files, while /default_02 and /default_dark are variations of the default theme and contain only "modified" files and images. Files that don't exist in those folders are used from the /default theme folder.
+
If you want to make theme customizations, create a custom theme similar to the dark theme. Theme files in the default theme should never be modified.
  
This is because the /default theme should always be intact to make JReviews upgrades easier.
+
Instead of creating your custom theme in <span style="color: blue">/components/com_jreviews/jreviews/views/themes/</span> folder, you should use the [[JReviews Code Overrides]] functionality to place your custom theme outside the /com_jreviews folder. That way you won't lose your custom theme when you upgrade JReviews.
If you want to modify theme files, you can create your own theme or copy the files you want to modify into "jreviews_overrides" folder.
+
  
 +
You will find 3 settings for theme selection in JReviews Configuration:
  
== Creating your own theme ==
+
[[File:theme-settings.png]]
  
#Read the [[Default theme overview]] to learn the file structure
+
'''Site theme''' - this is the main theme that will be used for the JReviews frontend. If you will create a custom theme, this is where you'd select it.
#Create a new folder for your theme
+
#Copy the /theme_images folder with all its images from the default theme folder into your theme, because they are always read from the currently theme and not from the default one
+
#Copy the /theme_css/images folder also
+
#Copy the files you want to modify into your theme folder (other files leave in the default theme folder)
+
#After your theme is done, to use it go to JReviews Configuration, tab 'General' and select it from the dropdown
+
#'''Important:''' For JReviews to recognize new files, you must click on 'Clear File Registry' link in JReviews Administration
+
  
 +
'''Mobile theme''' - here you can choose a theme that will be used on smartphones. It is recommended to select the same theme that you selected for '''Site theme'''. The ''Default Theme'' is responsive and works fine on mobile devices by default. The only reason why you might want to use a separate mobile theme is if you want to delete certain page elements only for smartphones. JReviews includes a ''Mobile Theme'' that you can use for this purpose.
  
== Modifying theme files ==
+
'''Fallback theme''' - all theme files that the selected '''Site theme''' doesn't have will be loaded from the fallback theme. The ''Default Theme'' should always be selected here (unless JReviews will have two different fallback themes in the future).
  
Creating your own theme is not necessary if you only want to modify several files from the default theme.
 
 
Instead, use the [[JReviews Code Overrides]] feature to create a copy of theme files you want to modify outside the /com_jreviews folder, and those files will be used instead of the ones in /themes/default folder.
 
 
For example, if you want to make modifications to the detail page theme file:
 
*<span style="color: blue">/themes/default/listings/detail.thtml</span>
 
 
 
Create a copy of the file into this folder:
 
*<span style="color: blue">joomla_root/templates/jreviews_overrides/views/themes/default/listings/detail.thtml</span>
 
 
and then make the modifications.
 
 
Do the same for any other theme file.
 
 
After copying the files into /jreviews_overrides folder, you need to click on 'Clear File Registry' link in JReviews Administration.
 
  
  
 
[[Category:JReviews]]
 
[[Category:JReviews]]
 
[[Category:Themes]]
 
[[Category:Themes]]

Latest revision as of 13:08, 6 January 2014

JReviews uses a php templating system. This means you can mix html with php code, which provides a lot of flexibility to create conditionals and add snippets of php code.

JReviews Themes

JReviews themes are located in this folder:

  • /components/com_jreviews/jreviews/views/themes/

You will find several themes there:

  • /components/com_jreviews/jreviews/views/themes/default/
  • /components/com_jreviews/jreviews/views/themes/dark/ - for using with dark Joomla templates
  • /components/com_jreviews/jreviews/views/themes/mobile/ - for mobile devices

You will notice that "dark" and "mobile" theme folders contain less files than the "default" theme folder. The default theme is a "fallback" theme which contains all the necessary files, while dark and mobile themes are variations of the default theme and contain only "modified" files and images. If a theme doesn't contain a certain file, JReviews will load that file from the default theme. That makes updating themes easier.

If you want to make theme customizations, create a custom theme similar to the dark theme. Theme files in the default theme should never be modified.

Instead of creating your custom theme in /components/com_jreviews/jreviews/views/themes/ folder, you should use the JReviews Code Overrides functionality to place your custom theme outside the /com_jreviews folder. That way you won't lose your custom theme when you upgrade JReviews.

You will find 3 settings for theme selection in JReviews Configuration:

Theme-settings.png

Site theme - this is the main theme that will be used for the JReviews frontend. If you will create a custom theme, this is where you'd select it.

Mobile theme - here you can choose a theme that will be used on smartphones. It is recommended to select the same theme that you selected for Site theme. The Default Theme is responsive and works fine on mobile devices by default. The only reason why you might want to use a separate mobile theme is if you want to delete certain page elements only for smartphones. JReviews includes a Mobile Theme that you can use for this purpose.

Fallback theme - all theme files that the selected Site theme doesn't have will be loaded from the fallback theme. The Default Theme should always be selected here (unless JReviews will have two different fallback themes in the future).