This article stands as support and resource for the User Theme Video Tutorial. Here you can explore all phases with code changes and also images and graphics used for the user-theme development documented in the video.
First, please click here to download the samples you need for the user-theme development. The .zip archive holds all codes, images and graphic for each phase. You may want to study all of them before we walking you through all the phases.
JAT3 Framework - UserTheme Video - Part 1
Phase 1 - Design Goals
In this phase you should identify the elements of the template that you want to customize. Below we will give you an example of what this "design goals" is all about.
In order to recreate the JA Purity II Template, we decided to customize for the purpose of our video tutorial the following elements:
- the header and it's modules and elements: search module, logo, CPanel
- the Mega Menu System
- the spotlight blocks (topsl and botsl)
- the pathway (navhelper block)
- the leading article of the frontpage view
- the links, buttons and the Read More.. link
- the rounded modules and additional style classes
Phase 2 - Downloading JAT3 Framework
- Please visit the Downloads section and download latest version of the JAT3 Framework 2.0 Quickstart.
- Install this package as any Joomla! 1.5 Distribution Package.
Phase 3 - Prepare Development Environment
Create user-layout
In the your_site/templates/ja_t3_blank/local/etc/layouts folder you will need this user-layout.xml file. Click here for a detailed step-by-step guide on creating/editing layouts.
If you have downloaded the resources, please check the Phase3/templates/ja_t3_blank/local/etc/layouts folder. You will need this code below:
{codecitation}
<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="header" type="header" main-inner="1"></block>
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
</blocks>
<blocks name="middle" colwidth="20">
<block name="left1">left</block>
<block name="right1" style="jarounded">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block>
<block name="navhelper" type="navhelper" main-inner="1"></block>
<block name="footer" type="footer"></block>
</blocks>
</layout>
{/codecitation}
Create user-theme file & folder structure
Please check the Phase3/templates/ja_t3_blank/local/themes/user-theme folder. You will have the file & folder structure you need to go forward.
Edit theme info file
Please check the Phase3/templates/ja_t3_blank/local/themes/user-theme/info.xml file. Please use your information, sample code below:
{codecitation}
<?xml version="1.0" encoding="utf-8"?>
<theme>
<name>User-theme</name>
<description>User theme for myWebSite</description>
<date>September 2010</date>
<version>1.0.0</version>
<author>myWebsite.com</author>
<copyright>myWebSite.com</copyright>
</theme>
{/codecitation}
Create user-profile
Please go to the Profiles tab of the template administration, and follow this step-by-step guide:
- click the New button
- in the pop-up window fill in a profile name, we used user-profile, but you can use what ever profile name you like/need.
- scroll bottom and assign the user-theme & user-layout to this user-profile profile (or any profile name you have used)
Click here for a more detailed step-by-step guide. Code of this profile should look like this:
{codecitation}
themes=local.user-theme
desktop_layout=user-layout
{/codecitation}
Phase 4 - Customizing the header
The header design
We start filling up the user-theme/css/template.css file.
{codecitation class="brush:css;"}
/* HEADER
--------------------------------------------------------- */
/* Header main style */
#ja-header .main {border-bottom:none; padding:0;}
#ja-header {border-bottom: 1px solid #555; background:#333;}
{/codecitation}
The logo
For this you will also need the logo samples in the phase4 folder of the general resources archive. These are logo.png and user-logo.png. You can play around with the user-logo.png, just remember you have to update the dimensions in the user-theme/css/template.css file.
/*--- User Image Logo Image ---*/
h1.logo { width: 207px; height: 80px;}
h1.logo a {
background: url(../images/logo.png) no-repeat left;
width: 207px;
height: 80px;
}
The CPanel button & UserTools Titles
/*-- Cpanel --*/
a#ja-cpanel-toggle {background:#555; color:#ccc;}
a#ja-cpanel-toggle:hover, #ja-cpanel-toggle.open {
background: #00A9DD;
color: #FFFFFF;
border:none;
}
#ja-cpanel-main h3 {
font-family: Helvetica, sans-serif;
}
The search module
/* Search ---*/
#ja-search .inputbox {
background: #444444;
border-color: #555555;
color: #CCCCCC;
}
form.search {
background: url(../images/icon-search.gif) no-repeat center left;
padding-left: 20px;
}
Phase 5 - Customizing the navigation bar
/* NAVIGATION
--------------------------------------------------------- */
/*-- Navbar --*/
#ja-mainnav .main {border-bottom: none;}
#ja-mainnav {
background: #444 url(../images/grad1-mask.png) repeat-x center top;
border-bottom: 1px solid #ccc;
}
Phase 6 - Customizing the top spotlight & bottom spotlight
/* SPOTLIGHT Blocks
--------------------------------------------------------- */
#ja-topsl .main-inner1, #ja-botsl .main-inner1 {border:none; padding: 0;}
/* Top spotlight ---*/
#ja-topsl {border-bottom: 1px solid #ccc; background:#f6f6f6;}
#ja-topsl .main { padding: 10px 0;}
/* Bottom spotlight ---*/
#ja-botsl {border-top: 4px solid #ccc; background:#e6e6e6;}
#ja-botsl .main {padding: 10px 0;}
Phase 7 - Customizing the pathway
/* PATHWAY
----------------------------------------------------- */
/* Breadcrumbs ---*/
#ja-navhelper {
border-bottom: 1px solid #ccc;
border-top: 1px solid #CCCCCC;
background:#f6f6f6;
}
#ja-navhelper .main {border:none;}
JAT3 Framework - UserTheme Video - Part 2
Phase 8 - Customizing the Mega Menu System
Please open the user-theme/css/menu/mega.css file and add these samples of code, according to each level of the menu items.
Please note that this requires the transparent grad1-mask.png image used also for the Phase 5.
Level 0 (root) menu items
/* root menu */
.ja-megamenu ul.level0 li.mega a.mega {color:#ccc;}
/* active items */
.ja-megamenu ul.level0 li.mega a.active {
background: #00A9DD url(../../images/grad1-mask.png) repeat-x center top !important;
color: #fff !important;
}
/* hovered items */
.ja-megamenu ul.level0 li.mega a.over {
background: #555 url(../../images/grad1-mask.png) repeat-x center top;
color: #fff !important;
}
/* borders */
.ja-megamenu ul.level0 li.mega {border-left:1px solid #555;}
.ja-megamenu ul.level0 li.last {border-right:1px solid #555;}
Level 1 and above menu items
/* lv - 1 and above
-----------------------------------*/
/* fixing borders */
.ja-megamenu ul.level1 li.mega {
border-left:0;
border-right:0;
}
.ja-megamenu ul.level1 li.mega ul li, .ja-megamenu ul.level1 li.mega {
border-top:1px solid #777;
}
.ja-megamenu ul.level1 li.mega ul li.first, .ja-megamenu ul.level1 li.first {border:0;}
/* hovered items */
.ja-megamenu ul.level1 li.mega a.over, .ja-megamenu ul.level1 li.mega a.haschild-over {background: #777;}
/* active items */
.ja-megamenu ul.level1 li.mega a.active {
background-image:none !important;
color: #333 !important;
font-weight:bold;
}
Child content
/* CHILD CONTENT
-----------------------------------*/
.ja-megamenu .childcontent-inner {
background: #555;
border: 1px solid #777;
border-top: 0;
}
.ja-megamenu .level1 .childcontent-inner {border-top: 1px solid #777; }
.ja-megamenu .childcontent .ja-moduletable {color: #ccc; }
.ja-megamenu .childcontent .ja-moduletable a {color:#00A9DD;}
.ja-megamenu .childcontent .ja-moduletable a:hover {color:#fff;}
.ja-megamenu .childcontent .ja-moduletable h3 {border-bottom: 1px solid #777;}
/* Grouped --- */
.ja-megamenu .group-title { border-bottom: 1px solid #777; }
.ja-megamenu .group-title .menu-title {color: #e6e6e6;}
.ja-megamenu .group-title .menu-desc {color: #ccc;}
Phase 9 - Customizing the links, buttons and the Read-more
Now we are going back editing the user-theme/css/template.css file.
The links
/* Normal links ---*/
a { color: #00A9DD;}
The Read-More.. link
The Read-more.. link will also require a small image arrow-white.png you can find in the Phase9/templates/ja_t3_blank/local/themes/user-theme/images folder of the resources archive.
/* Read-more link ---*/
p.readmore a {
background: url(../images/arrow-white.png) no-repeat 8% 47% #00A9DD;
border: 1px solid #00A9DD;
padding: 2px 8px 2px 20px;
color: #fff;
text-transform: uppercase;
font-family: Helvetica,Arial,sans-serif;
font-size:10px;
font-weight:bold;
-moz-border-radius:5px;
-moz-box-shadow:0 0 3px black;
}
/* Hovered ---*/
p.readmore a:hover, p.readmore a:active, p.readmore a:focus {
background: url(../images/arrow-white.png) no-repeat 8% 47% #333;
text-decoration: none;
border-color: #333;
}
The buttons
/* Button Styling */
.button {
border:none;
background: #00A9DD;
padding: 2px 8px;
color: #fff;
font-weight:bold;
text-transform:uppercase;
-moz-border-radius:5px;
-moz-box-shadow:0 0 3px black;
}
/* Hovered Button */
.button:hover {
background: #333;
cursor:pointer;
}
Phase 10 - Customizing the content
Customize the leading article in frontpage view
This step requires the default.php HTML template file of the frontpage view, you can find it in the Phase10/templates/ja_t3_blank/html/com_content/frontpage folder.
/* HTML Override ---*/
.leading-frontpage {
padding: 10px 15px;
border:1px solid #ccc;
background: #e6e6e6;
border-bottom: none;
}
Customize the article meta
{codecitation class="brush:css;"} /* Article meta */
.article-tools {
background: #f9f9f9;
border-top: 1px solid #CCCCCC;
padding: 2px 5px;
} {/codecitation}
Phase 11 - Customizing the rounded modules
Create normal rounded styling
This step also requires images located in the Phase11/templates/ja_t3_blank/local/themes/user-theme/images folder. Images list here:
- b-bl.gif
- b-br.gif
- b-tl.gif
- b-tr.gif
Stylesheet here:
/* MODULE STYLES
--------------------------------------------------------- */
/* Rounded Module */
.ja-box-br {
background: url(../images/b-br.gif) no-repeat bottom right #fff;
}
.ja-box-bl {
background: url(../images/b-bl.gif) no-repeat bottom left;
}
.ja-box-tr {
background: url(../images/b-tr.gif) no-repeat top right;
}
.ja-box-tl {
background: url(../images/b-tl.gif) no-repeat top left;
padding: 0 15px 10px;
}
Create a blue class
This step also requires images located in the Phase11/templates/ja_t3_blank/local/themes/user-theme/images folder. Images list here:
- bb-bl.gif
- bb-br.gif
- bb-tl.gif
- bb-tr.gif
Stylesheet here:
{codecitation class="brush:css;"} /* blue */
div.moduleblue {
background: url(../images/bb-br.gif) no-repeat bottom right #00A9DD;
}
div.moduleblue .ja-box-bl {
background: url(../images/bb-bl.gif) no-repeat bottom left;
}
div.moduleblue .ja-box-tr {
background: url(../images/bb-tr.gif) no-repeat top right;
}
div.moduleblue .ja-box-tl {
background: url(../images/bb-tl.gif) no-repeat top left;
color:#fff;
} {/codecitation}
Check progress on a live demo!
Link to starting version:
http://demo.t3.joomlart.com/usertheme/
Link to version completed at the end of Video 1
http://demo.t3.joomlart.com/usertheme/1/
Link to version completed at the end of Video 2
http://demo.t3.joomlart.com/usertheme/2/
Resources
Link to download all files used in both 2 Videos
http://demo.t3.joomlart.com/usertheme/phases.zip