Skip to main content

DIY Joomla! 3 One-Page site

I have always been fascinated by the fluidity one can find with one-page web themes. While common in Wordpress, one-page web templates were not the usual in Joomla!. I put the task of understanding them, and replicating such in Joomla, on my bucketlist last year, but I did not have cause to actually do either until recently when a client asked for it.
I turned to my good friend, Google, for help, and I found an answer on Joomla Stack Exchange channel that helped a lot (Thanks Sir Rene Korss!).

BREAKING DOWN THE WONDER OF THE ONE-PAGE SITE

The concept is to
  • place several modules on the home page, with different displays,
  • then create hyperlinks that, when enhanced with a sprinkling of java script, scroll to those modules smoothly.
Joomla! already has functionality for modules, and each template has varied types and position names. The twist here is to be able to call the module IDs within the designated hyperlink.
By carrying out the following steps, we can make any Joomla template, behave like a one-page theme:

1. Create a module chrome

A module chrome is the shell (usually with div, span or paragraph tags), surrounding each module. While there are default module chromes within the system folder inside templates, your new template probably has its own, that make the modules display how the template creator wants them to. It's quite easy to make your own custom module chrome, but the point here is to use a referable value in the initial tag's id, that you can call up later.

See an example below:
  1. Create a file called modules.php in the folder
    yoursitedirectory/templates/yourchosentemplate/html
  2. Add the following code to the file:
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    <?php
    /**
    Additional template module chrome(s)
    **/
    defined('_JEXEC') or die;
    
    /*
     * one page layout (output module content in one page layout)
     */
     function modChrome_onepager($module, &$params, &$attribs)
    { ?>
    <div id="slot-<?php echo $module->id; ?>">
        <!-- Module content here -->
    <?php  echo $module->content; ?>
    <span style="margin-bottom: 5px;">&nbsp;</span>
    </div>
    <?php } ?>
    
As illustrated above, the chrome is named modChrome_onepager, the div tag is the first tag within it, and its id uses a referable value, in this case, it calls the current module's id (module->id). I added the word, 'slot-' to the name, but you can use any value or format. Add any other optional frills to the module chrome.

2. Create your modules

Set up all the modules that will act as sections for the one-page theme. For example, let's assume that your proposed links are Home, About us, Our Services, and Contact us. Home section is the part of that the site visitor sees upon opening the site for the first time, so that's taken care of. You need to create modules for the other links, namely, About us, Our Services, and Contact us. Set them to show on the Home page, under your menu assignments.
Very important: Ensure that in each module, the module chrome you created in step 1 is selected. You can select a module chrome type under 'Advanced' tab, from the list tagged, Module Style.

3. Create the hyperlink menus

Go to Menus, and create external links, with the URL specified as the module names e.g. slot-22. 

Add the Javascript magic

 The script to use is from Paulund.co.uk and it allows a smooth scroll between the hyperlinks.

 ADDING A LITTLE EXTRA

  •  its preferable that you create your module chrome inside the systems folder, instead of inside the particular template folder. This is for occasions in which you have to change the template - the code should still work regardless of the change.
  • If its not in the template already, consider adding an arrow that leads back to the top of the page, at the right hand side corner of the screen. 

Want to check already-made one page Joomla! templates? Check out this collection at Evohosting.co.uk

Comments

Popular posts from this blog

EKITI KETE

What is this wahala now? Why must such a tiny state in Nigeria cause so much wahala? It is not even in the center, it is not even an original state but a cut out of another. I really dont understand why every newspaper feels they must print something about Ekiti on the front page every single day. And this has been the case since it was created. The latest sensation is the election rerun that even our busy President had to take time to go and see. I mean, you would think with all the monitoring eyes, everything would run smoothly but no, another twist in the saga has been announced.
The outside world thinks we should be ashamed of ourselves. I a just praying that it does not get bloody, and that Ekiti will stop trying to keep attention all the time.

Am not dissing Ekiti o[that was for Vicky who will soon be my husband, so he'll not quote me after the wedding - he's from Ekiti :D]. Am just saying they should behave themselves.

Hey Mum

Hey mum,
I just wanted to thank you.
I thank you for deciding to get married - some women didn't see the need.
I thank you for deciding to have kids - some women didn't want to mess up their figures.
I thank you for going through discomfort all through the pregnancy.
For going through all the pain.
I will be forever grateful to you for allowing God to use you to bring me to this world.
But that's not all.
You didn't give me away - some women did that to their kids.
So I thank you for putting your needs, your wants, your career aside, to raise me.
I thank you for taking the time to teach me the Lord's way.
I thank you for loving me with all my faults.
I thank you for ensuring that I had the best you could afford.
You are a mother, and blessed are you amongst all women.
I LOVE YOU

Plans List?Carried out or not?

Have you ever planned the next year of your life and then after a few months, realized that nothing went according to plan? Well it happened to me. Back in October, I knew where I wanted to be in a year's time: I was going to be married, with my husband and I studying in a foreign country for masters degrees. We had applied and then things began to happen.
First my Dad felt I was rushing to get married (Never mind that he'd insisted when I was 17 that by the time I reach my age, I should have given him 2 grandkids for him to spoil). Then my acclaimed alma mater university refused to send my transcripts to the schools I had applied to. As if that was not enough, I had not taken my TEOFL exam which was required to apply.

Its now June. I lost the admissions because my transcripts never arrived even though my university claims they have sent it. My father has finally agreed to let me get married BUT at his own convenient time, and his own way (he has just declared he doesnt want us …