Difference between revisions of "New Themes in JReviews 2.3"
| Line 11: | Line 11: | ||
| − | Like in the earlier versions if JReviews, '''Default Theme''' is the main | + | Like in the earlier versions if JReviews, '''Default Theme''' is the main theme which contains all required files, while '''Compact Theme''' and '''Dark Theme''' contain only modified files which override original files in the Default Theme. |
| − | If you are using GeoMaps Add-on, you will notice that '''GeoMaps Theme''' no longer exist. If you | + | If you are using GeoMaps Add-on, you will notice that '''GeoMaps Theme''' no longer exist. If you enable displaying maps on List and Detail pages, the maps will now be outputted regardless of which theme you use. |
== Creating Custom Themes == | == Creating Custom Themes == | ||
| − | It is very important (to make future upgrades easier) that you don't make modifications to the default themes, instead create your own theme | + | It is very important (to make future upgrades easier) that you don't make modifications to the default themes, instead create your own theme folder and put your customized files there. |
You should use [[JReviews Code Overrides]] and create the custom theme folder there. | You should use [[JReviews Code Overrides]] and create the custom theme folder there. | ||
| Line 23: | Line 23: | ||
A good example on how to create your own theme are the Compact and Dark themes. Both themes have a lot of changes, but they contain only several files. | A good example on how to create your own theme are the Compact and Dark themes. Both themes have a lot of changes, but they contain only several files. | ||
| − | It is no longer necessary to customize core css files, you can put all your css modifications into the new <span | + | It is no longer necessary to customize core css files, you can put all your css modifications into the new <span style="color: blue">custom_styles.css</span> file. The styles you add there will override the core styles. A great benefit of this solution is that you will not need to worry about changes in core css files when you upgrade JReviews. |
| − | To add your custom styles for JReviews pages, use <span style="color: blue">custom_styles.css</span>, and for custom styles for | + | To add your custom styles for JReviews pages, use <span style="color: blue">custom_styles.css</span>, and for custom styles for modules and community plugins use <span style="color: blue">custom_styles_modules.css</span>. These are the only css files you should have in your custom theme! |
=== Examples === | === Examples === | ||
| − | If | + | If you want the modify certain css style that exists in core theme.css, first copy that style into custom_styles_modules.css and then make the modifications. |
| − | If you want to change the rating stars, | + | If you want to change the rating stars, you only need to define a different background image in your custom_styles.css. There are several sprite images for rating stars available: |
[[File:RatingStars.jpg]] | [[File:RatingStars.jpg]] | ||
| Line 53: | Line 53: | ||
| − | Since you only override background image, you don't need to have other rating | + | Since you only override background image, you don't need to have other rating css attributes in your custom_styles.css. Background position and dimensions will be read from the default css file. |
== Other important changes in the new default theme == | == Other important changes in the new default theme == | ||
| − | The | + | The theme file of the listing detail page (detail.thtml) contains much less code than before and it's easier to add tabs and other modifications. |
| − | In | + | In fact, we included the <span style="color: blue">detail_tabs.thtml</span> (which contains some predefined tabs) into default theme, and the only thing you need to do to have the tabs is to enter "_tabs" theme suffix in the [[Theme Manager]] for categories where you want this file to be used. |
Revision as of 15:23, 8 April 2011
JReviews 2.3 comes with 3 new themes which replaced the old ones:
- Default Theme
- Compact Theme
- Dark Theme
Some of the main theme improvements:
- Easier to customize
- Performance improvements
- Design and layout improvements
Like in the earlier versions if JReviews, Default Theme is the main theme which contains all required files, while Compact Theme and Dark Theme contain only modified files which override original files in the Default Theme.
If you are using GeoMaps Add-on, you will notice that GeoMaps Theme no longer exist. If you enable displaying maps on List and Detail pages, the maps will now be outputted regardless of which theme you use.
Creating Custom Themes
It is very important (to make future upgrades easier) that you don't make modifications to the default themes, instead create your own theme folder and put your customized files there.
You should use JReviews Code Overrides and create the custom theme folder there.
A good example on how to create your own theme are the Compact and Dark themes. Both themes have a lot of changes, but they contain only several files.
It is no longer necessary to customize core css files, you can put all your css modifications into the new custom_styles.css file. The styles you add there will override the core styles. A great benefit of this solution is that you will not need to worry about changes in core css files when you upgrade JReviews.
To add your custom styles for JReviews pages, use custom_styles.css, and for custom styles for modules and community plugins use custom_styles_modules.css. These are the only css files you should have in your custom theme!
Examples
If you want the modify certain css style that exists in core theme.css, first copy that style into custom_styles_modules.css and then make the modifications.
If you want to change the rating stars, you only need to define a different background image in your custom_styles.css. There are several sprite images for rating stars available:
By default, rating_stars.png is used. If you want to use different stars, just add this into your custom_styles.css:
.rating_star_user, .rating_star_editor , .rating_star_user div, .rating_star_editor div { background-image: url(images/rating_stars2.png); } /* rating form */ .ui-stars-star a { background-image: url(images/rating_stars2.png); }
Since you only override background image, you don't need to have other rating css attributes in your custom_styles.css. Background position and dimensions will be read from the default css file.
Other important changes in the new default theme
The theme file of the listing detail page (detail.thtml) contains much less code than before and it's easier to add tabs and other modifications.
In fact, we included the detail_tabs.thtml (which contains some predefined tabs) into default theme, and the only thing you need to do to have the tabs is to enter "_tabs" theme suffix in the Theme Manager for categories where you want this file to be used.