Building a template for jT CarFramework 1.x Series is fairly simple. To accomplish this you will need to know:
- CSS 2+
- HTML 4.1+
- Basic PHP knowledge
The layout structure is divided in 3 parts:
- Top header: holds the logo and links for My account, Register and Support.
- Menu header: holds the top horizontal menu.
- Banner header: holds the banner.
- Content: The page content.
- Footer header: the content of the page’s foot.
I will break down this tutorial in small parts so you can jump to the topic that fits your needs.
UNDERSTANDING THE FILE SYSTEM
Supposed you want to change the landing page (the home page). The fastest way is to copy the main theme files (view/theme/jtheme/) into a new directory (view/theme/mytheme/) and modify the CSS classes. A good browser will help you to locate classes and preview changes (like Chrome or Firebug plugin for Firefox).
If you need layout or even structural changes to be made, you can edit the Page file (view/page/public-home.php). Notice that you will also find admin-home.php and user-home.php. If the changes you need to make require server-side handling, use the controller file to handle it (controller/public-home.php). The controller is (basically) a class which is initialized before any content is output.
If you need to provide multi-language support for your changes, use the language/en/public-home.php file.
As you may have noticed by now, all files have the same name (with exception of the extension).
ABOUT JT CARFRAMEWORK TEMPLATE SYSTEM
jT CarFramework 1.x Series does not use a template engine. I’ve decided not to use it because I didn’t want to sacrifice speed. The other reason is, companies usually don’t need a template system because they simply have no interest to change their page’s layout.
In most cases, that’s enough but, in other cases, deeper customization is required and that’s what we will be discussing next.
CREATING A TEMPLATE PACK: THE TEMPLATE FILES
There are some requirements which must be followed when creating a new template pack. In the default jtheme folder, you will find a file called THEME_README file which gives you more information about templates. Make sure you start the templating process by reading it.
Follow the steps below to create a template pack:
Create a new directory under view/theme/. For the sake of simplicity, we will call it mytheme.
Copy all files within the main theme directory (view/theme/jtheme/) and paste them in the mytheme directory.
Open setting.php with the editor of your preference and change the variables information. Save the file and close it.
Make a thumbnail 300×200 pixels and name it screenshot.jpg. Save it to the mytheme directory.
Login as administrator and select your theme. Make sure you save the changes.
Now you’re ready to start. Open your view/theme/mytheme/public-home.css and start customizing it.
ABOUT THE GLOBAL.CSS AND GLOBAL.JS FILES
As you’ve guessed, the overall layout CSS declaration is saved in this file. The same is true for all js which must be initialized in all pages.
For instance, if you are trying to change the menu’s background color, you will find the css class within global.css. Now, if you want to modify the page content’s style, you will find that pages css classes within the public-page.css.
You will also find CSS files such as firefox.css, safari.css and ie.css. Those are CSS hacks for its corresponding browser.