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.
Contents:
The user-theme video tutorial comes with a support article providing code samples and additional information.
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:
/* 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 */ }
You also have a short video tutorial on this technique here.
Please note that this change also apply to offline page.
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:
/* Logo Image ---*/ h1.logo { height: 45px; width: 180px; } /* update the width and height here */ h1.logo a { background: url(your-logo.png) no-repeat center; /* update the path to the new logo here */ display: block; height: 45px; /* update the width here */ width: 180px; /* update the height here */ }
/* Logo Image ---*/ h1.logo { height: 45px; width: 180px; } /* update the width and height here */ h1.logo a { background: url(your-logo.png) no-repeat center; /* update the path to the new logo here */ display: block; height: 45px; /* you must update the width here */ width: 180px; /* update the height here */ }
<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
<small><?php echo $lineone; ?></small>
This change affects all layouts.
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:
setting_screen="fixed" screen_fixed_width="980px" themes="core.your-theme-name"
The next thing to do is to assign this profile as default for all pages in the Global Panel. Click here for instructions.