Facebook Theme v1.3

Release Notes

Thanks to @imoni for his many contributions and willingness to have them incorporated into the original version.

Following changes:

  • Incorporates many of imoni's changes 
  • Adds support for tidypics 
  • Updates manifest (might help with messageboard problem?)
  • Updates topbar (now floats, single color, etc.)
  • Fixes header login problem in 1.8.1 (may no longer work in 1.8.0)
  • Adds icons to several menu items

Just as an update, I haven't been able to fix the messageboard problem, but I also think it may be a server config issue/messageboard issue. I haven't personally been able to reproduce it, for instance, so I'm not sure the fault lies with this theme.

  • Event manager plugin not working in facebook theme. Anything do i want to do to make that plugin work?... Otherthan that, Excellent job.

    Thank you.

  • i use event_manager_V2.0.2 and it works fully on facebook theme 1.3, go to its start.php and remove all list_entities with elgg_list_entities,get_entities with elgg_get_entities & extend_view with elgg_extend_view

  • css theme some times fits in to whole browser and side bar dis appears, do any one know how do i make it constant to fit in to browser, the default style or if i want to strech out without side bar how can we do the same? thanks.

  • How can we successfully use the hypeFramework / hypeAlive plugins with the Facebook theme?

  • Is adsense plugin available for Facebook theme?

    Which chat plugin is more suitable for facebook theme? look like facebook chat?

  • hypeFramework plugins are workig perfectly.. but it takes time to render the page. I want to know, Is it my server problem or plugins bahavior? 

    Livesearch is amzing. 

  • 1.8.2 - difficult to see other members when joining uninvited and settings > configure your tools page fails. Other than those two issues works well.


    Issue: when u comment on a river item it shows up as a comment and duplicates as a new river (or wire) item (so it shows up twice)

    This fix changes it to: only show up as a comment and not a river (or wire) item

    The Fix: go to this folder /public_html/yoursite.com/views/default/river/annotation/generic_comment/ Open up create.php, once this is open, delete everything in this file and make it a blank file but still save it as create.php and reupload

  • BTW Evan, This issue does is not in your theme but in the default views of elgg

  • jpardee as you faced the issue of css theme getting adjusted to the browser, and it keeps changing dynamyically to fit the browser, can you share the solution formaking it fixed size withfixed side bar, whenevr theresize happens to browser therewill not be a side bar, how can we make it fixed.

  • give me on sec i will share my css code let me drag it up

  • Dont forget i have all my colors changed and whatnot so you will have to change them to whatever u see fit for your network but anyways here is my css located in /public_html/yoursite.com/mod/facebook_theme/views/default/css/elements

    this file is "layout.php"

     * Page Layout
     * Contains CSS for the page shell and page layout
     * Default layout: 990px wide, centered. Used in default page shell

    /* ***************************************
    *************************************** */
    /***** DEFAULT LAYOUT ******/
    .elgg-page-default .elgg-page-header > .elgg-inner {
     width: 1347px;
     margin: 0 auto;
     height: 90px;
    .elgg-page-default .elgg-page-body > .elgg-inner {
     width: 1170px;
     margin: 0px;

    .elgg-page-footer {
     width: 1347px;
     margin: 0px;
    .elgg-page-default .elgg-page-footer > .elgg-inner {
     margin-left: 200px;
     padding: 8px;

    .elgg-page-footer > .elgg-inner:after {
     content: '.';

    /***** TOPBAR ******/
    .elgg-page-topbar {
     background: #B700CA;
     min-width: 1303px;
     position: relative;
     padding-left: 17px;
     height: 41px;

    .elgg-page-topbar > .elgg-inner {
     width: 1153px;
     margin: 0px;
     padding-top: 11px;

    .elgg-page-topbar > .elgg-inner:before {
     position: absolute;
     display: block;
     background: #D300EC;
     height: 30px;
     bottom: 0;
     right: 0;
     left: 183px;
     border: 1px solid #1D4088;
     content: " ";
     width: 0 auto;
     border-bottom: 0;
     top: 10px;

    /***** PAGE MESSAGES ******/
    .elgg-system-messages {
     position: fixed;
     top: 24px;
     right: 20px;
     max-width: 500px;
     z-index: 1000;
    .elgg-system-messages li {
     margin-top: 10px;
    .elgg-system-messages li p {
     margin: 0;

    /***** PAGE HEADER ******/
    .elgg-page-header {
     position: relative;
     background: #B700CA;
    .elgg-page-header > .elgg-inner {
     position: relative;

    /***** PAGE BODY LAYOUT ******/
    .elgg-layout {
     min-height: 1200px;
            background-attachment: fixed;


    .elgg-layout-one-column {
     padding: 10px 0;

    .elgg-sidebar {
     position: relative;
     padding: 20px 0;
     float: left;
     width: 200px;
     min-height: 360px;
    .elgg-sidebar-alt {
     position: relative;
     float: right;
     width: 240px;
     margin-left: 20px;
     min-height: 360px;

    .elgg-main {
     position: relative;
     min-height: 360px;

    .elgg-layout-two-sidebar > .elgg-body,
    .elgg-layout-one-sidebar > .elgg-body {
     border: 1px solid #B3B3B3;
     border-top: 0;
     padding: 15px 20px;

    .elgg-layout > .elgg-body > .elgg-head {
     padding-bottom: 3px;
     margin-bottom: 10px;

    /***** PAGE FOOTER ******/
    .elgg-page-footer {
     position: relative;
     color: #999;
    .elgg-page-footer a:hover {
     color: #666;

    That should make it the same pre definded size that i have it set for my network

  • great, thanks for the sollution will try and see if it fixes the resize issues in css,

  • should work, the basic idea is to make the theme act as if the browser is in full screen at all times, so basicly even when the window is open on the computer super small, the page still requires u to scoll over cause the header,topbar ect ect is pre set to somewhere around 1400 pixels, but its hard because in this theme changing one requires changing another and it uses alot of math.....but math is my specialization! :)

  • cool, i would defintely require this web math, its really hard lol :) i was struggling to make these simple changes with this, its been crazy and time consuming, as php is totally new and as some one wrote earlier seems like it requires some phd in php :)

  • is it possible to use that empty space just beside side bar like in facebook we have for sort of friends suggestions, people you may now sort of things, where in i can modify the code and in which file i can put some code, may be adding widgets in the little space beside side bar also looks neat.

  • @Jpardee  About the solution proposed to solve the comments duplication.  Congradulations.

    Bt, try to include the 'copy' of the core view inside the theme. That´s the correct way to solve it.  Do not hack the core code, cause when you update the system the problem will return.

    So, I´ve copied all the diretory tree


    to the


    and then edited the 'create.php' to delete all information.

    Working fine!  Thanks again!




    @eggie   I´ve could reproduce your problem using IE8.

    The label for "Register" and "New Password" in the upper right corner on the login page (pic here) is overlapping with the password white box.

    Just copy the archive 'login.php' from




    Then just add a '<BR>' to code:

    if (elgg_get_config('allow_registration')) {

    echo '<BR><li><a class="registration_link" href="' . elgg_get_site_url() . 'register">' . elgg_echo('register') . '</a></li>';


    <!-- end of generic_comment_details -->


    To enhance the experience using tablets, I´ve put a mark (list from ell_sprites).  It made the access to menu easier.

    // elgg_register_menu_item('topbar', array(
    // 'href' => "#",
    // 'name' => 'account',
    // 'priority' => 1000,
    // 'section' => 'alt',
    // 'text' => '',
    // ));

    elgg_unregister_menu_item('topbar', 'profile');
    elgg_register_menu_item('topbar', array(
    'href' => "#",
    'name' => 'account',
    'priority' => 1000,
    'section' => 'alt',
    'text' => elgg_view_icon('list'),




  • iv changed my icons to be inline-block and they have no issues in FireFox Or Google Chrome but icons dont show up on the dashboard in IE, they show up everywhere esle in IE though......any ideas?, the dashboard just doesnt look the same without small user icons.....

  • How to add menu to right site of river dashboard similarly to facebook?

  • hi very good theme for elgg I have a question I want to add the chat pfchat which asks me for a new button, but do not know where to add or cinfiguralo thema appears in the file could indicate that I do.
    many thanks john

  • @R.Cerceau i followed what you did with the


    but it don't work for me, i deleted all the content of that file, it is right?

  • river:messageboard:group:default

  • @holyguard



Evan Winslow

Software Engineer at Google. Elgg enthusiast. I wrote the Javascript and CSS frameworks for 1.8.


  • Category: Themes
  • License: GNU General Public License (GPL) version 2
  • Updated: 2014-11-17
  • Downloads: 67257
  • Recommendations: 81

Other Projects

View Evan Winslow's plugins