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

Why haven’t you developed a single Mobile App yet?

Are you interested but have never gotten the courage to take the chance or have tried but upbeat by the long learning curve?

First of all, Rome wasn’t built in a day, so you are not to blame. I personally love to create solutions for myself and the other people around me.

I utilize the skills I have to create the solutions. Take for example, by having a HTML, CSS and PHP skills, I’m able to run a web agency which also gives printing and graphics design services. At this agency, I work as the operations manager and leader of the digital department.

Due to business dynamics, there is need to learn a new skill to strengthen my personal portfolio as well as that of the company.

What comes to my mind is developing mobile apps which can solve real life problems. For this I will concentrate on developing Android apps not Windows and iOS, due to my target consumers. Since am not a fan of Java, I chose to go Hybrid way because at least I wouldn’t have to learn a lot, I will port my HTML, CSS, PHP and SQL knowledge to reach my target. Additionally, I would have a chance of compiling my mobile app code, for other platforms as well we grow without investing money for another developer yet the client’s budget is too low.

Recently I posted about setting up the Android Hybrid App development environment article, to let you know how practically it’s easy to get started.

Right now, am creating my own App, which will be used for personal finance book keeping, with features such as automatic notification  a few days towards loan date expiry, loan amortization and so much more as time may allow. I hope to an api and remote storage in the cloud, in future to be able to attract more people to use it.

I think by now, I would have completed developing the app but looking at available resources, couldn’t manage learning one.

Listen I have set 10 days, of researching and studying about JQM. In a few days, I have been able to develop the login and logout screens.