Turn HTML into a Joomla template in one hour

Under: Joomla 8 comments

Development • Joomla template
Follow responses leave a responseTrackback

Somehow I think Joomla template is easier to develop than WordPress. The only inconvenience is actually gathering all components you need. A couple of weeks ago, Smashing Magazine released a html template called delli store. I happily saved it and turned it into a joomla template.
You can view the Demo (sorry demo is temporarily not available, it will be back soon . )or download it for free.

Developing a Joomla theme is easier than you think

Take a simple joomla theme myBusiness as an example, you only need two files to make Joomla template working

index.php
templateDetails.xml

What is inside templateDetails.xml

Xml file is an index, it points out where things are. This is my xml file. It includes three part of information

Author detail and copy right crap
file name and directory
Joomla Modules name (usually indicates position)

 
        delli store
        2009-05-11
        
        
        http://www.design-notes.info
GNU/GPL
        1
        DelliStore Template
 
                index.php
                templateDetails.xml
                template_thumbnail.png
                images/background.png
                css/template.css
 
breadcrumb
left
right
mainnav
user1
user2
user3
user4
footer
top1
top2
top3
top4
top5
top6
lower1
lower2
lower3
lower4
promo1
promo2
promo3
promo4
banner1

This is my joomla theme module layout:

Head

Joomla’s language is jdoc … similar to wp_… in WordPress. For the head part, copy line 1 to 9.They are same in every template. The default Joomla template is more complicated at this part, cause it has more features. For a simplest template, this is all you need. Pay more attention on line 10, this links to your css file.

Nav

This is the original html code

<div id="page">
<div id="header">
<div class="background">
<h1><a href="index.html">DelliStore</a></h1>
<ul>
	<li class="active"><a href="index.html">Home</a></li>
	<li><a href="about.html">About Us</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>

Change the store name in h1 with

<a title="&lt;?php echo $mainframe-&gt;getCfg('sitename');?&gt;" href="index.php"><span>getCfg('sitename');?&gt;</span></a>

Replace the menu with a Joomla module called “top1″ (line 6). I also made another module called “promo1″ which is the school board area.

<div id="page">
<div id="header">
<div class="background">
<h1><a title="&lt;?php echo $mainframe-&gt;getCfg('sitename');?&gt;" href="index.php"><span>getCfg('sitename');?&gt;</span></a></h1>
<div class="promo"></div>
</div>
</div>
</div>

Content

Replace what ever in the block-content class with

original html:

<div id="content">
<div id="leftcol">
<div class="block">
<div class="block-content">
<h2>Welcome to the <span>DelliStore!</span></h2>
<img class="cake" src="img/img-cake.jpg" alt="Cake" />
								liquam suscipit. <strong>Integer justo</strong> erat, bibendum sed, lacinia eu, tristique condimentum, magna. Aliquam augue dolor,
                                tempus sit amet, pharetra nec, blandit elementum, diam. Proin pharetra odio eu lectus sollicitudin ultricies. Suspend
								isse turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.
 
						<a class="yellow-button" href="#"><span>Learn More</span></a></div>
</div>
</div>
</div>

joomla template php:

<div id="content">
<div id="leftcol">
<div class="block">
<div class="block-content"></div>
</div>
</div>
</div>

Sidebar

Replace sidebarblock-content with module “right” using

countModules('right')): ?&gt;

Then I copied the code within

<div class="block"></div>

and pasted it right after module “right” to add another module called “user1″ . We wouldn’t want anything to appear if I dont activate module user1 so I put

<div class="block-content"></div>

within the if loop
original html:

<div id="rightcol">
<div class="block">
<div class="block-content">
<h3>Our <span>Specials!</span></h3>
<ul>
	<li><a href="#">Burger</a><strong>$4.99</strong></li>
	<li><a href="#">Chicken Wings</a><strong>$5.99</strong></li>
	<li><a href="#">French Fries</a><strong>$4.99</strong></li>
	<li><a href="#">Large Pizza</a><strong>$12.99</strong></li>
</ul>
<a class="yellow-button"><span>See Menu</span></a></div>
</div>
</div>

joomla template php:

<div id="rightcol">
<div class="block">
<div class="block-content">
						 countModules('right')): ?&gt;</div>
</div>
<div class="block">countModules('user1')): ?&gt;
<div class="block-content"></div>
</div>
</div>

Rest of the code – footer

I added the joomla footer module and rss code after copy rights

    <!-- end #footer -->

<div id="footer">
 
©2009 The DelliStore. Design by <a href="http://www.dellustrations.com/templates.html">Dellustrations.com</a> for <a href="http://www.smashingmagazine.com">Smashing Magazine</a> Powered by <a title="Joomla" href="http://www.joomla.org" target="_blank">Joomla</a> Developed by <a href="http://design-notes.info"></a>
 
    <!-- end #footer --></div>

CSS

After getting php done, there are a few issues need to be taken care of by css

The promo section in header: I replaced the school board with a blank school board graphic (you can find it in the PSD template).
Stylize it with css

#header .promo{
	font-size:120%;
	font-weight:bold;
	color:#fff;
	position:absolute;
	top:180px;
	left:630px;
	width:450px;
	height:100px;
	padding:2em;}

joomla headings:

h2,h3,.contentheading{
	color:#C0D765;}
.componentheading{
	display:none;}
#rightcol .block h3,#rightcol .contentheading,#leftcol .contentheading{
	margin:0;
	padding:0 0 4px;
	font:bold 2.09em 'Trebuchet MS', Arial, sans-serif;
 
	background:url(../img/bg-h2.gif) repeat-x 0 100%;
}

ul in content:

#leftcol .links ul,.contentpaneopen ul {
	float:left;
	display:inline;
	width:170px;
	margin:0;
	padding:0;
	list-style:none;
}
#leftcol .links ul li,.contentpaneopen ul li{
	float:left;
	width:100%;
	margin:7px 0 0;
}
#leftcol .links ul li a,.contentpaneopen ul li{
	float:left;
	padding:0 0 0 20px;
	color:#90B094;
	background:url(../img/bg-link-bullet.png) no-repeat 0 4px;
}

readon button equivalent to the yellow button in original template:

#content a.readon,#header a.readon{text-decoration:none;
	padding:.5em 2em 1em 1.5em;font-weight:bold;
	color:#4A3915;
	font-size:12px;
	background:url(../img/bg-submit.png) no-repeat 0 0;margin:24px 0 0 0;
	display:block;}

That’s it all done!! Im sure it is only around an hour’s work. If you need more information on configuring joomla system please go to joomla’s official site. I also used a plugin called placehere which displays contents on sidebar (and any other module).

Design-Notes

Popular Posts