Modifying the Default v4.1.x template in 68 Classifieds

This article will take you through the most popular design modifications that people like to do with their new 68 Classifieds Website. I will cover the basics of what a template is and how templates are used in 68 Classifieds. Then we will cover the most common changes that people want to make their site. This will include changing the logo and the copyright information at the bottom in the footer. This article is for use of 68 Classifieds version 4.1.x default template.

What you need:

  • An ftp client to upload and download files to your webserver
  • A text editor that saves files as PLAIN TEXT
  • A basic understanding of HTML/XHTML
  • A basic understanding of CSS
  • A basic understanding of the Smarty Templating system

Templates

Templates – The Term
Sometimes the use of the word template becomes confusing, especially when you are talking about 68 Classifieds. In 68 Classifieds the word “template” can refer to, a complete folder also known as the “Template folder”, however it can also mean a single file which is assigned to be displayed by the Smarty templating system. To ease this burden for this article, I will always refer to a “template folder” or a “template file.” You should be aware that if you are posting on the 68 Classifieds support forums and you are asked, “What template are you using?”, this is typically meaning what template folder are you using. It also is being asked so that those that want to help know if you are using a 68 supplied template or a third party template which may be completely different in how it is structured. To be a good 68izen on the forums, you should go to your account control panel and put your 68 information in your signature. This will help you as well as help those that are trying to help you. You should put the version type (Developer, Designer, Hosted), what version (3.1.x, 4.0.x, 4.1.x) and the name of the template folder that you are using (default, purple, deepsea, 3col, fluid, custom-default).

Templates – Explained
When you purchase 68 Classifieds, it comes with 4 template folders that are in the “templates” folder. They are 3col, deepsea, default and purple. Of these four template folders only one of them is mandatory and I’m sure you can guess which one it is. Yes, the default template. If you open any of these template folders, you will notice that they have quite a difference in the number of files and folders within them. This is something that confuses many folks that are new to 68 Classifieds.

Let’s clear this up right now so that we can get to the good stuff. The basic structure of a template folder in 68 is the following. You must have a main template file which is called “layout.tpl”, which people in the web design industry would commonly refer to as the “skin”. The layout.tpl file along with the style.css and the images are what sets what your site will look like period. This determines every color used, whether or not you have columns, the size of the header, footer and width of your site. For a template folder to be valid for use, 68 requires a template folder which contains a config.php file, a layout.tpl file and a css file. That’s it. If another template file is called and it is not available in the template folder then it will automatically go to the “default” template folder and use the file from there. I would add that it is strongly recommended to also have an images folder in your template folder as well.

Templates – How they work
Now that you know why the other template folders don’t have as many files in them as the default has, it’s time to explain what all of these other files are. As we have already covered, the layout.tpl file is your main template file and is used to display your site, within that file there is a “Smarty” variable which is called $body. In the code, it is called like this {include file=$body}. Two things that you need to know right now, first is that you will see items contained within braces, “{ … }” everywhere in the code. When you see that, you know that the “Smarty” templating system is at work. This is known as a smarty call. Smarty is actually much more than just templates, but to explain further is outside the scope of this article. The second thing that you need to know is that this call to $body is smarty saying put another template file here. The $body is the content that changes what you see whenever you click on a link in your 68 site. It is the “main content” that is displayed.

That brings us round robin to all those other files that are in your template folder. Those files are all of the “other” template files that are used for the $body. Think of them as subtemplates. Behind the scenes in what many refer to as the “backend”, are all those other files which are mostly php files outside of your template folder. Those files tell smarty what subtemplate file to use for the $body. When you visit your site without clicking on anything the index.php file tells smarty to use the layout.tpl file in your template folder as well as tell smarty to use the home.tpl file in the $body. If you click on “Register”, then the register.php file tells smarty to display the layout.tpl file and use the userjoin.tpl file for the $body.

Templates – Starting your template folder
“Woa, I thought we were modifying the default template like it says in the title of this article!”

We are! However, we want to do things right and we also want to make sure that if you mess something up by accident, you can still have a working site. You do want to do things right and you do want to always have a working site, right? Yea, I thought so.

OK, so let’s get started. I am assuming that you are working on your own computer and not trying to use the administration to do this or to edit your files. So first find your original download of the 68 Classifieds software. Got it? OK, now make a copy of it. Yes the whole thing!!! Now take the original and add something like original to the end of the name of the folder. So it should be something like this: “Designer-v4.1.4.original” Now put that away somewhere else and never touch it again unless you absolutely need to. Now name your copied folder and add something like “working” to the end of it so that there is NEVER a doubt in your mind that you are working with the non-original files like this: “Designer-v4.1.4.working”

Open the working copy of your 68 classifieds. Now open the upload folder. Now open the templates folder. Create a new folder in the templates folder and call it whatever you want to name your template. It is best to use only one word, but if you feel compelled to have more than one word use an underscore between words like this: my_custom_template. For this article, I will refer to this folder as “custom” and you may want to just use that name. As this article said, we are going to modify the default template, let’s now open the default template folder. Copy the config.php, layout.tpl and the css and image folders to your “custom” template folder. MAKE SURE YOU COPY THESE AND DO NOT MOVE THEM!
You should now have a folder called Custom and it should contain the following:

  • config.php
  • css (folder)
    • style.css
  • images (folder)
    • many
    • many
    • image
    • files
  • layout.tpl

Now we have to make your template folder valid for use with 68. Open the config.php file with your text editor. Ensure your text editor is set to save files as PLAIN TEXT.

You should see this code:

< ?php
$data['template']['name'] = "default";
$data['template']['description'] = 'The default 68 Classifieds theme. Created by <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a>';
$data['template']['version'] = "1.0.0";

The items that are in red above are what you want to change to make the template yours. Make sure that you leave the text that you change within either the single or double quotes that they are in. You may also change the version if you like. Now save your file.

You now need to connect to your web server where your site is hosted with your ftp client. Upload your new Custom template folder to the templates folder on your site. Once that is done and if you’ve made the changes to your config.php file correctly, your “custom” template should be available for use within your site’s administration. (You won’t see a picture preview, because we didn’t create one of those). Alternatively you could also copy the “preview.png” image into your custom template folder too.

Modifying The Template

The Footer
We’re going to start with the footer. The footer is at the very bottom of every page on your site and is in the template file, layout.php.

Obviously, you need to open the layout.tpl file in your custom template folder with your plain text editor. Scroll all the way down to the bottom of that file. The footer starts around line 129 and looks like this:

<div>
<p>
<a href="{$smarty.const.URL}/index.php">{$smarty.const.LANG_TPL_HOME}</a> &middot;
<a href="{$smarty.const.URL}/search.php">{$smarty.const.LANG_TPL_SEARCH}</a> &middot;
<a href="{$smarty.const.URL}/category.php">{$smarty.const.LANG_TPL_BROWSE}</a> &middot;
<a href="{$smarty.const.URL}/toplistings.php?pg=featured">{$smarty.const.LANG_TPL_FEATURED}</a> &middot;
<a href="{$smarty.const.URL}/toplistings.php?pg=new">{$smarty.const.LANG_TPL_NEW}</a> &middot;
<a href="{$smarty.const.URL}/toplistings.php?pg=top">{$smarty.const.LANG_TPL_TOP}</a> &middot;
{foreach from=$templatepages item="entry"}
<a href="{$smarty.const.URL}/pages.php?pg={$entry.pURI}">{$entry.pPageTitle}</a> &middot;
{/foreach}
<a href="{$smarty.const.URLS}/usercheckout.php">{$smarty.const.LANG_TPL_PLACE_AD}</a> &middot;
<a href="{$smarty.const.URL}/contactus.php">{$smarty.const.LANG_TPL_CONTACT}</a>
<br />
&copy; Copyright 2009 <a href="http://www.68classifieds.com">68 Classifieds</a>, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a></p>
</div>

What we’re interested in changing here is the copyright information which I have made red in the code above. Everything above that is the navigation links that you most likely will want to keep there. What we are going to do is simply delete all of the above in red with the copyright set to the name of your website domain. So don’t be scared, just delete the code that I have in red above in your layout.tpl file. Now to make this easier, I have written new code that you can copy and paste it into your layout.tpl file.

&copy; Copyright 2009 - your website name here</p>

Copy and paste the above code into your layout.tpl file in a new line right after the <br />. Now replace what I have in red above, “your website name here” with the name of your website. That’s it. Save your file and upload it into your custom template folder on your web server. Now if you go to your site, you can revel in the beauty of the changes that you just made. :)

Changing The Logo

I’m sure that you have already seen the default log. It consists of two lines of text which are, “68 Classifieds” in big bold black text and “Your site description” which is right under it in smaller grey text.

The Logo replacement is something that has changed in version 4.1.x. As this is almost always something that folks want to change, 68 decided to make that easier to do for their customers without having to muddle in anything in code. This can now be done within the administration. I applaud 68 for adding this feature, however it does come with it’s pros and cons. We will first go through changing the logo within the administration. Then we will go through the process of “fixing” the cons (in my opinion)

OK, I lied. Before we change the logo in the administration, I want to visit the site with the default logo first so that you will have an understanding of the default logo. Go ahead and go to your site… I’ll wait…

OK now that you can see the default logo, move your mouse over the big “68 Classifieds” text. I’m sure you will notice the familiar change in your mouse cursor to the pointer which indicates that is a link. If you click on it, the page simply refreshes. The link takes you to the home page, which you are already at. From any other page, it takes you home and the page will actually change. That’s all I wanted you to see.

Now we are ready to change the logo in the administration. Go ahead and login to the administration of your site. Once you are logged in, click on the “Settings” main tab. You’ve been here before, so things should look familiar to you. You will be in the “Site Template” sub tab below the “Template Settings” text. Click on the “Logo Settings” subtab now.

OK, now you will see a little form. The first thing I want to point your attention to is the second field in the form which is “Logo Title”. Notice that it already has the text, “68 Classifieds” in it. That is what you see as the big text part of the logo now by default. If you just want to input your own text, replace the 68 Classifieds with your text and click submit and you’re done. Simple as that! Your text will now be the big bold text on all of your pages.

But wait! I know, you want your very own image that you made or paid someone to create for you, right? Of course you do. That is what the very first field is for. the one called “Logo Image”. I’m not going to get into creating your own logo image as that is beyond the scope of this article, however if you already have your own logo image created let’s go ahead and put that up on your site.

I’m sure you know how this works. Just click the “Browse” button and that will open the familiar window on YOUR computer to find and select your logo image. Select it and click on the open/upload/ok button (Platform dependent on what that will say) at the bottom of your window. The window closes and your again looking at your form. Don’t worry about the text in the “Logo Title” field as that will be ignored since you’re uploading your logo image. Click on the submit button and you’re done. Feel free to visit your site again and see your new logo in all of it’s glory!

Now, wasn’t that easy? Unfortunately, now comes the caveats or cons as I mentioned earlier. While you’re now looking at your wonderful logo image on your home page, I want you to do what I asked you to do before. Mouse over the logo. Hey! What’s the deal? Yea, I know… The logo isn’t clickable any more. That’s con number one in my opinion. Con number 2 may or may not be noticeable to you depending on your logo image and especially your logo image size. Often, the logo image is now just above the “Home” tab in the tab navigation. With the default description text, this isn’t as noticeable due to the fact that the text is very short.

One thing that I want you to know is that the logo image that you uploaded is stored in the photos directory (folder) in the root of your classifieds installation. (yoursite/photos/) Now let’s address these two items regarding your new logo.

Let’s get that new logo image clickable. Open up your layout.tpl template file in your plain text editor that is in your custom template folder. You need to go the logo div around line #39. This is what you should see:


<div id="logo">
{if $template_logo <> ''}
<img src="photos/{$template_logo}" alt="{$template_title}" />
{else}
<h1><a href="index.php">{$template_title|default:'68 Classifieds'}</a></h1>
<p>{$template_description|default:'Your site description'}</p>
{/if}
</div>

Let’s go through this code line by line so that you can understand what it is and how it works. The first line creates a CSS box “div” and assigns it to the CSS class called “logo”. Remember our friend, Smarty? The next line is using Smarty code, however in this particular code is those “other” things that smarty can do besides just “templating”. This line essential says, “if there is a template_logo that is less than or greater than blank”. The $template_logo variable is the logo image that you uploaded. So, it is saying if there is a logo, (next line of code) display the logo. (next line of code) says, “else” (eg: there isn’t a logo) show the rest of this code which is the default title text and site description.

So, let’s get that link in there. The key is the anchor reference that surrounds the template title in the 5th line of code:
<a href="index.php"> ... </a>

Copy this code and replace the third line of code so that the anchor reference will now surround your uploaded logo image.

<a href="index.php"><img src="photos/{$template_logo}" alt="{$template_title}" /> </a>

That was easy! Now save your layout.tpl file and upload it to your server in your custom template folder to replace your existing layout.tpl file on the server. You’re logo image will now be clickable and take you to the home page as it should.

I’m not trying to cop out on you regarding con number 2, however to fix it is again a little beyond the scope of this basic tutorial. Don’t worry though, I won’t leave you completely in the dark. Here’s a couple of suggestions for you to over come this issue on your own.

  1. Add this right after the line that we just replaced with your linked logo: <br /><br />
  2. Edit your logo image by adding some space at the bottom of your logo
  3. If your image is big and it now causes the “Welcome message” on the right hand side of your page to sit above the top of your logo image, then you will need to edit the “style.css” file in your custom template. (Hint: the Welcome message has a CSS ID of “top_info”)

Comments are closed.