One of our clients wanted to have the Elgg Profile table in one single column with Profile Info Fields below the Profile Icon so other widgets can be flush on the top of middle and right columns with the Profile.

To make these sorts of changes you need to get familiar with Elgg’s view system. This is not easy to achieve as it is controlled by Elgg core/plugin files (even though in this particular project, code was done in such way that layout is controlled by the theme itself – photo above)

The layout of the profile widgets and dashboard widgets is handled in: /views/default/canvas/layouts/widgets.php

Right now it is using tables to display profile. With some css styling and php coding this can be achieved for unique, single column user profile view.

Everything looked good until I logged in and popup message showed up letting me know that I was now logged in but it was not disappearing from the screen. Even clicking on “click to dismiss” link did not work.

Another problem was that elgg topbar tools dropdown menu did not drop down. It took me a while to realize that I was using elgg theme for Elgg ver. 1.5 which uses older javascript files. I wanted to use the same theme but upgraded version of the theme was not available so I uploaded js files from Elgg 1.5 vendors/js folder and replaced ones on my new 1.6.1 elgg installation. It worked but that was only a temporary fix.

To get the permanent fix you have to update code in your theme folder/views/default/page_elements/ header.php file so it will call the new javascript files that are included in elgg version 1.6.1

Look for this code:

<script type=”text/javascript” src=”<?php echo $vars['url']; ?>vendors/jquery/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript” src=”<?php echo $vars['url']; ?>vendors/jquery/jquery-ui-personalized-1.5.3.packed.js”></script>

And replace with this:

<script type=”text/javascript” src=”<?php echo $vars['url']; ?>vendors/jquery/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”<?php echo $vars['url']; ?>vendors/jquery/jquery-ui-1.7.2.custom.min.js”></script>
<script type=”text/javascript” src=”<?php echo $vars['url']; ?>vendors/jquery/jquery.form.js”></script>

And that should do the trick. So instead of changing to a different theme with a little copy and paste you can make your older theme work with new Elgg 1.6.1

If you have any problems, comment below.