CTM Laboratorio

Customization Guide

Your theme

The template comes with various themes ready to use but you can also use them to develop your own themes. I recommend customizing your own theme and not modify the core default theme or core theme variations (makes it really easy for you to track changes and maintain/update the design). Basically, you can copy one of the themes, customize it's code and rename it to your convenient name. Finally you can update it's info.xml file accordingly. Here more info.

Now, to make it a core theme, you must copy it to your-site/templates/your-template/core/themes folder. You can also make it a local theme by copying it to your-site/templates/your-template/local/themes folder, or simply using the theme upload feature in the Themes Panel.

You can now continue customizing your own theme, you know.. details. Below, you have some video tutorials on how to customize any T3 Framework 2 Template by developing a theme, so you have some quick guides on customizing the logo, top panel and footer. The videos are for you to learn the basics, more advanced stuff you can learn from me.

The user-theme video tutorial comes with a support article providing code samples and additional information.

Logo Customization

Desktop Layout Logo

Remember I don't recommend changing the core default theme (read the above paragraphs). However, if you are an advanced user, here is how to do it:

• Copy your logo to your-theme/images or your-site/templates/your-template/images folder.
• With your favorite code editor, open your-template/css/template.css or your-theme/css/template.css and find (for core default theme) or copy (for your theme) the following code (see more instructions below):
  
  Example:

  /* Logo Image ---*/
  h1.logo { width: 180px; height: 45px; padding: 30px 0;} /* update the padding, width and height here */
  
  h1.logo a {
  	background: url(../images/your-logo.png) no-repeat left; /* update the path to the new logo here */
  	display: block;
  	width: 180px;	/* update the width here */
  	height: 45px;   /* update the height here */
  }
  

• Save the file and check the front-end. At this point you can only check changes made to the core default theme. To check changes applied to your custom theme, you must create your own setup. Please check below.

You also have a short video tutorial on this technique here.

Please note that this change also apply to offline page.

Mobile Layouts Logo

If you choose to use the mobile ready layouts, you also need to customize the same new logo. These layouts are styled outside the themes. Here is how to do it:

Footer Customization

To remove the "Designed by" and "Powered by" signature, please follow this quick guide:

• With your favorite code editor, open template/html/mod_footer/default.php
• Find
  
  This code

  <small><?php echo $lineone; ?> Designed by <a href="#dnp" title="Dan Partac">dnp</a>. Powered by <a href="http://t3.joomlart.com" target="_blank" title="T3 Framework 2.0">JAT3</a>.</small>
  

  replace with
  This code

  <small><?php echo $lineone; ?></small>
  

• Save the file and check the front-end.

This change affects all layouts.

Your setup

This refers to creating your own custom settings for profile and global template configuration. Your custom theme have to be assigned to a profile you have to create, and then assign this profile as default in the Global Panel.

All these settings are be maintained over updgrade via JA Extensions Manager.

To create your own profile to use your theme, your custom layout and all the settings that you need, please follow this guide:

• To make it a core profile, copy one of the profiles provided; let's say template/core/etc/profiles/silver.ini and rename it into your-profile-name.ini.
• Open this newly created file and edit accordingly. See example below:
  
  Example:

  setting_screen="fixed"
  screen_fixed_width="980px"
  themes="core.your-theme-name"
  

  
  *You can also add some more settings.
• Save the file.
• To make it a local profile, simply click the New button in the Profiles Panel, type in a name for it and start customizing the settings. More instructions here.

The next thing to do is to assign this profile as default for all pages in the Global Panel. Click here for instructions.