Latest news and resources from Youjoomla Team.
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!
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
Youjoomla.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.