Perfect Layouts

I The spacing for all elements like headings, paragraphs and others are em based. Perfect vertical rhythm is now easy to work with!

Piecemaker 2

II I developed my own 3D slider extension to give you a smart solution and easy to use. The demo is ready for you! Give it a try!

Multiple Styles & Automatic Adjustments

III Skywalker comes with 8 beautiful color themes: Blue, Red, Green, Orange, Yellow, Purple, Grey, Magenta, and various scripts to keep the design XHTML valid and cross-browser compatible.

You are here: Home Template Documentation Development Customization
Today isMonday,22September,2014

Customization Guide

Your theme

The template comes with various themes ready to use but you can use to develop your own themes using the existing ones. 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.


User Theme Part 1

Click here


Contents:

  • Preparation: planning, creating files and folders
  • Customizing header
  • Customizing the spotlights

User Theme Part 2

Click here


Contents

  • Mega Menu
  • Links
  • HTML overrides
  • Suffix class

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 and find 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.

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:

Handheld Layout
  • Copy your logo to template/css/handheld/ folder.
  • With your favorite code editor, open template/css/handheld/template.css find and update the following code (see more instructions below):
    Example:
    /* 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 */
    }
    

iPhone Layout
  • Copy your logo to template/css/iphone/ folder.
  • With your favorite code editor, open template/css/iphone/template.css find and update the following code (see more instructions below):
    Example:
    /* 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 */
    }
    

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
    ** For Joomla! 1.5 template your profile settings must NOT have double quotes. Check more here.
  • 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.

Elegant Design

Crafted with 8 unique styles, Skywalker Template is a great kick start for professionals, corporate clients and blogs.

Awesome Typography

Enrich your content with block numbers, columns, text & code highlight, block quotes, list styles, image wrapping and much much more..

T3 Framework Inside

The man behind the T3 Framework Wikies releasing his first ever template for Joomla! 1.6. A fully featured template backed up by pure power and flexibility. Layouts, profiles, compression, Theme Builder, form replacements... everything you need packed up and ready to go!