Thursday, February 5, 2015

anil

How to make a Joomla template in 30 minutes with JAT3 Framework

    No comments:

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.xmlfile. Click here for a detailed step-by-step guide on creating/editing layouts.
If you have downloaded the resources, please check thePhase3/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.
    

  1.  /*--- 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;
}
    2.

The CPanel button & UserTools Titles

    

  1.  /*--  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;
} 
    2.

The search module

    

  1.  /* 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;
} 
    2.

Phase 5 - Customizing the navigation bar

    

  1.  /* 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; 
}
    2.

Phase 6 - Customizing the top spotlight & bottom spotlight

    

  1.  /* 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;}
    2.

Phase 7 - Customizing the pathway

    

  1.  /* PATHWAY
----------------------------------------------------- */
/* Breadcrumbs ---*/
#ja-navhelper {
 border-bottom: 1px solid #ccc; 
 border-top: 1px solid #CCCCCC; 
 background:#f6f6f6;
}
#ja-navhelper .main {border:none;}
    2.

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

    

  1. /* 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;} 
    2.

Level 1 and above menu items

    

  1. /* 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;
}
    2.

Child content

    

  1. /* 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;} 
    2.

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

    

  1. /* Normal links ---*/
a { color: #00A9DD;} 
    2.

The Read-More.. link

The Read-more.. link will also require a small image arrow-white.png you can find in thePhase9/templates/ja_t3_blank/local/themes/user-theme/images folder of the resources archive.
    

  1. /* 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;
}
    2.

The buttons

    

  1. /* 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;
}
    2.

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 thePhase10/templates/ja_t3_blank/html/com_content/frontpage folder.
    

  1.  /* HTML Override ---*/
.leading-frontpage {
 padding: 10px 15px; 
 border:1px solid #ccc; 
 background: #e6e6e6; 
 border-bottom: none;
} 
    2.

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:
    

  1. /* 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;
}
    2.

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}

Phase 12 - DO YOU KNOW?

Override reminder

  • files used in themes override the styling of the default design of the template and the core plugin.
  • if a class is styled twice within a CSS file, the later values will be used.

Limits reminder

  • you can create unlimited layouts with unlimited block configurations
  • you can create unlimited profiles with unlimited template settings configurations
  • you can create unlimited style classes for your XHTML, JAXHTML and JAROUNDED modules, just like the example in the Video 2
  • you can use your own text color, background-color, border-color, logo, images and graphics to add an unique design to the template.

Simplicity reminder

  • don't duplicate styling in your theme if the core plugin already use it
  • use an order of the styling according to the elements' order
  • keep the styling simple and optimized so you can improve&update it in time

Comments reminder

  • it is your custom theme now, so use your own comments for your styling & coding customizations

Updating reminder

  • avoid altering core files, use whatever file, code or image within your own theme, this makes easy updating the template core files.


About Author -

Hi, I am Anil.

Welcome to my eponymous blog! I am passionate about web programming. Here you will find a huge information on web development, web design, PHP, Python, Digital Marketing and Latest technology.

Subscribe to this Blog via Email :

Note: Only a member of this blog may post a comment.

© Copyright 2017-18 PHPMYPASSION. Designed by Anil.