Youjoomla Blog

First we open our template/templatename/index.php file located on our server . Now days you can find many  Joomla components   that will help you  edit files on server or you can simply use the edit HTML in your template manager.  

Now you see a bunch of code and lines that you might not understand but here is where every web designer or web admin should start.  Learn what  tags are and how you can use them http://www.w3schools.com/ .

Lets start coding:

You need new module position let say under your top menu . Many coders use notes while coding , you can see example here at Youjoomla . Here is a partial code from our Younews index.php

<!--top menu-->
<div id="top_menu">
    <div id="horiznav">
        <?php mosShowListMenu($menu_name); ?>
    </div>
</div>
<!-- end top menu -->  

As you can see the notes are very easy to find and you know where the code block ends.  So now we will first add new div container for our in works module position.

Right under <!-- end top menu -->  we add 

<div class="newposition">
</div> 

That was easy. Now let us test text paragraph inside our newposition div class  and refresh our  frontpage to see if we did it right.

<!-- end top menu -->
<div class="newposition">
    <p> This will be my new module positions </p>
</div> 

and save index.php
After the test we simply add Joomla module call instead our paragraph. Like this :

<div class="newposition">
    <jdoc:include type="modules" name="user10" style="xhtml" />
</div> 

and save index.php

Note!

style="xhtml":
will generate module output as simple div wrap with class .moduletable. 

<div class="newposition">
    <div class="moduletable">
        <h3>Module Title</h3>
        MODULE CONTENT
    </div>
</div> 

style="rounded" :

will have output with 4 additional divs that can be used for rounded corners module style and class changes from moduletable to module

<div class="newposition">
    <div class="module">
        <div>
            <div>
                <div>
                    <h3>Module Title</h3>
                    MODULE CONTENT
                </div>
            </div>
        </div>
    </div>
</div> 

style="raw" : will have output with no div wrappers and no module title :

<div class="newposition">
    MODULE CONTENT
</div> 

And test again . Please publish simple module in user10 module position. If the module position user10 is not available please open templateDetails.xml and find <positions>  tag . Right under tag

<positions> 

add

<position>user10</position> 

and save templateDetails.xml. Is module  visible ? Yes ? Great job!  You can continue with styling your module class by adding 

following styles to your templates.css file

.newposition .moduletable{
color:#ff6600 ;/*orange text color :) */
}
/*rounded corners*/
.newposition .module{ 
color:#ff6600 ;/*orange text color :) */
}
.newposition .module div{
}
.newposition .module div div{
}
.newposition .module div div div{
}
.newposition .module div div div div{
}

Now let us take this a step further and make this module collapsible ( module and module div wraps appearing on assigned pages only ) . All we need to do is add small php code snippet before your module code div wrapper:

<? php  if ($this->countModules('user10')) { ?>
<div class="newposition">
    <jdoc:include type="modules" name="user10" style="xhtml" />
</div>
<?php } ?> 

All done! Now call your friends and tell them that you are Joomla Template Developer :) . Cheers!