Elgg customization tutorial for beginners

What is Elgg?

Elgg is one of the most popular social network engine.Social network engine is package to create social networking websites.It can be used to create social networking sites for your institution.The best part is Elgg is open source (free) software.It is based on PHP and MySQL.So you can install this on any hosting provider with PHP and MySQL support. Learning this platform may also help you win projects aimed at creation of groups and communities for institutions like School,Club etc.Recently while searching for social engine I landed on Elgg.I gave it a try on my local system.Below are some of the customizations performed by me while working with it.

Remove powered by Elgg footer text

Elgg by default has this footer text.After installing Elgg one of the most common task is removal of powered by Elgg footer text.You can keep the footer text as it is.There is no harm in it.But removing the footer text is important for personalizing the installation. Follow below steps to remove powered by Elgg footer text
  • Open your Elgg installation directory.
  • Open the directory elements situated under views –> default –>page.
  • Under elements directory you will see the file footer.php
  • Open the file footer.php
  • Search for below code in footer.php file
echo elgg_view_menu('footer', array('sort_by' => 'priority', 'class' => 'elgg-menu-hz'));

$powered_url = elgg_get_site_url() . "_graphics/powered_by_elgg_badge_drk_bckgnd.gif";

echo '<div class="mts clearfloat float-alt">';
echo elgg_view('output/url', array(
	'href' => 'http://elgg.org',
	'text' => "<img src=\"$powered_url\" alt=\"Powered by Elgg\" width=\"106\" height=\"15\" />",
	'class' => '',
	'is_trusted' => true,
));
echo '</div>';
  • In above code the line starting with $powered_url and the line echo elgg_view are responsible for powered by Elgg footer text.
  • We can delete these lines or we can comment out the lines.I prefer to comment out the lines.Since this is PHP code we can use /* and */ to comment out the line
  • The modified code is shown below.You can see that lines starting with $powered_url and echo elgg_view are commented out with /* and */.Make same changes as shown below in your file.
echo elgg_view_menu('footer', array('sort_by' => 'priority', 'class' => 'elgg-menu-hz'));

/*$powered_url = elgg_get_site_url() . "_graphics/powered_by_elgg_badge_drk_bckgnd.gif";*/

echo '<div class="mts clearfloat float-alt">';
/*echo elgg_view('output/url', array(
	'href' => 'http://elgg.org',
	'text' => "<img src=\"$powered_url\" alt=\"Powered by Elgg\" width=\"106\" height=\"15\" />",
	'class' => '',
	'is_trusted' => true,
));*/
echo '</div>';
  • The above method works for any theme you have installed on your elgg installation..
  • After making above changes save your file and browse your site to see the changes.

Changing default Elgg favicon icon

Elgg comes with default Elgg favicon icon.So after installing it you need to change default favicon icon with that of yours.This is indeed important task as favicon is identity of your website.There are plugins to achieve this task but I would not suggest using them. As number of plugins increase performance of CMS goes down.This is applicable for Elgg as well.You should avoid using plugins for simple task. You can follow below steps to replace default Elgg favicon icon with favicon icon of your own
  • Open _graphics directory under Elgg installation directory.
  • You will find favicon.ico file in that directory.
  • Delete the file and then upload your favicon file..
  • The name of your file is important.It should be exactly the same (favicon.ico).You can use any other name as well but for that you will have to make some code changes.
  • I will not advice code changes so it will be good to go with same name as above.
  • Browse your website to see the change.
  • In case you do not see your favicon then you may need to clear browser cache.

Deleting Elgg Top bar

Elgg topbar is displayed to logged in users.There are some quick access buttons on topbar.It does contain useful quick access to messages,profiles,friends and other links like log out.This links are quite handy and does provide beautiful navigation facilities to the user.I prefer displaying topbar to admin but removing it for rest. Having said that you might want to remove topbar for customizing your site according to your need.Some Elgg themes also remove topbar.But in case you are using default theme or any theme which displays topbar and you want to remove it then follow below steps
  • Open the folder views –>default –>page in your Elgg installation directory.
  • In the page folder you will see file default.php.This file controls display of default theme shipping with Elgg.In case you are using other theme making change here will work unless other theme has overridden this.
  • Open the file default.php.
  • Search for below code in the file
<?php if (elgg_is_logged_in()): ?>
<div class="elgg-page-topbar">
   <div class="elgg-inner">
   <?php echo $topbar; ?>
   </div>
</div>
<?php endif; ?>
  • This code is responsible for topbar display on your theme.
  • Delete the code from the file.
  • You should backup the file before making these changes so that you can revert back in case of any mistakes while removing the lines.
  • Again if you want to display topbar to only admin users then instead of elgg_is_logged_in() in the code above use elgg_is_admin_logged_in ().Rest of the code remains the same.
  • I have found enabling bar for admin very useful so will recommend to keep it activated.For other users you can disable it.
  • Save the file and enjoy.

Adding Google Analytics to Elgg

Follow below steps to add Google Analytics code to your Elgg website.You can use this method to add other JavaScript based codes to your website.
  • Open the folder views –> default –> page under your Elgg installation directory
  • In the page directory you will see file default.php.
  • Open the file default.php.This file displays the HTML structure of default theme.
  • Locate the </head> tag in the file.
  • Copy your Analytics code and paste the same just above </head> tag in the file.Remember to backup the file before making these changes so that you can revert back in case anything goes wrong while pasting.
  • Save the file and enjoy.
  • If you do not want to use Analytics code in header ie </head> area then you should paste it above </body> tag.
  • In the same file near the end you can see </body> tag.
  • Paste the analytics code just above the </body> tag.
  • Save the file and enjoy.
I would recommend adding Google Analytics code above </head> tag.You should add all other codes above </body> tag. What’s Next I would be updating the post with time.There are some plugin based customization which I would talk about in other post.Feel free to post your queries and suggestions. In case you found this post useful consider sharing this.

Share this post on

9 thoughts on “Elgg customization tutorial for beginners

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. travel umroh murah

    nice

    Reply
  2. rasel

    This is a wonderful post for a beginner like me.
    I want to keep the topbar but i just want to remove the elgg logo and the link. but i want the remaining menu to be appeared. can you please help me regarding this.
    thank you.

    Reply
  3. santosh

    hi guys…
    I am working on Elgg. I have one problem please help me.
    after 2 full days I didn’t find any proper solution plz help me in my Elgg I want to change the toolbar avatar image size to 100px how can I change the image size?

    http://vijaypawar.com/new/activity this is link please suggest me thanks.
    thanks in advance

    Reply
  4. santosh

    hi guys…
    I am working on Elgg. I have one problem please help me.
    after 2 full days I didn’t find any proper solution plz help me in my Elgg I want to change the toolbar avatar image size to 100px how can I change the image size?
    and also I want to change toolbar ?
    http://vijaypawar.com/new/activity this is link please suggest me thanks.
    thanks in advance

    Reply
    1. Esha Upadhyay

      Santosh could you please wait for sometime as I am occupied in other stuff.. In the meantime you can browse your site and analyze it using Chrome (developer tools) to see the HTML forming the toolbar then you can get idea of the file or css controlling the display and customize it

      Reply
  5. abhijit ghosh

    What is question patern in WBSETCL for the post of Jr.engineer electrical??

    Reply
  6. Richard William Baffoe

    how can I install ellg.

    Reply