Blog

Learn how to build a jT CarFramework template from scratch.

Building jT CarFramework Template

OVERVIEW

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

Each page available in the framework is a combination of 5 files: Page, Language files, Controller class, CSS and Javascript associated with the current authentication group. For instance, non logged users have the group set to public. Understanding the group concept is very important for, it dictates what is accessible to the front-end user.

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).

chrome_inspector

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.

Instead, I’ve separate the CSS and Javascript files into a different directory which can be selected according to administration selection (back-end). Therefore, a template is composed by CSS and Javascript files only.

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

Within your theme directory you will find two files in two directories: css/global.css and js/global.js . Those two files serve for one purpose only – they are the only CSS and Javascript files loaded in all pages.

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.

 

 

3 Comments

  1. Maks

    Hello Jay!
    I cannot find (view/theme/jtheme/)
    There is no theme folder in view.
    I wanted to change the top page, and thought to make it by changing template.
    If theme does not exist, should I work with each related file separately?

    1. Jay

      Hello, as mentioned on the tutorial, 2 Series does not uses templating system but, it works in similar way. Notice that you still have a view directory which holds all files for each page, including css and js files.

      The top header and footer can be found on the header directory. Let me know if I can be of further help.
      Kind regards.

  2. Maks

    Sorry!
    Forgot to mention that I am on jT CarFramework 2.x Series

Leave a Comment

Your email address will not be published. Required fields are marked *

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>