Log in

Stats

  • Category: Themes
  • License: GNU General Public License (GPL) version 2
  • Updated: 2012-6-9
  • Downloads: 41947
  • Recommendations: 90

Other Projects

View Evan Winslow's plugins

Facebook Theme for Elgg 1.8

Make your Elgg site look (and in some cases behave) like Facebook

Last updated 801 days ago

This Elgg plugin is a theme built for Elgg 1.8 that will make your site look very much like Facebook. It is meant to be a demonstration of what is possible with the very strong theming capabilities of Elgg 1.8. Disclaimers

If I haven't been clear enough yet: this theme is written for Elgg 1.8. It is guaranteed to break on 1.7.

  • This theme will not and cannot be backported to 1.7.
  • This theme is not in any way affiliated with Facebook or anyone working at Facebook.
  • This theme has been written without any research into the legality of its use on a production site, therefore I urge you not to use it on a production site until you have done proper research. If you are unwilling to do the research, please use this theme only as an example or starting point, and not as your final theme.

I've been short on time lately and haven't been able to contribute as I'd like. However, if you have the ability, I'd love your contributions on github. I'll incorporate them into the plugin if they are high quality and that way we can avoid splintering into several different versions of the plugin. Thanks for your help!

 

Contributors:

  • imoni

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.

Comments

  • imoni 871 days ago

    Evan can u provide change log?

  • Antonio Arebalo 871 days ago

    (/profile/admin)

    Hice una instalación nueva (1.8.1V) con este tema(1.3V) y no puedo acceder al Perfil. ¿Será un Bug?

    I did a fresh install (1.8.1V) with this theme (1.3V) and I can not access the profile. Is it a bug?

  • imoni 871 days ago

    Those who changed fb theme and use it and want to correct the header login

    In mod/facebook_theme/views/default/facebook_theme/css.php go at the end of file.

    replace these lines

    #facebook-header-login {
        right: 0;

        position: absolute;
        bottom: 15px;

    }

    #facebook-header-login label {
        color:white;

        font-weight: normal;
        padding: 2px 2px 4px;
        display: block;
    }

    #facebook-header-login input[type="submit"] + label {

        color: #98A9CA;
        position:absolute;
        left: 0;
        bottom: -3px;
        cursor: pointer;


    }

    #facebook-header-login div {
        display: inline-block;
        padding-right: 10px;
        margin-bottom: 3px;

    }

    #facebook-header-login .elgg-input-text,
    #facebook-header-login .elgg-input-password {
        padding: 3px 3px 4px;
        color: black;
        width: 150px;
        border-color: #1D2A5B;


        margin:0;
        font-size:11px;


    }

    #facebook-header-login .elgg-menu {

        margin-left: 166px;

    }

    #facebook-header-login .elgg-menu > li > a {
        color: #98A9CA;

    }

    #facebook-header-login .elgg-menu > li > a:hover {
        text-decoration: underline;
    }


    input[type="checkbox"] {
        vertical-align:bottom;
    }

     

    with these

    #facebook-header-login {

        bottom: 25px;
        position: absolute;

        right: 0;
    }

    #facebook-header-login label {
        color:white;
        display: block;
        font-weight: normal;
        padding: 2px 2px 4px;

    }

    #facebook-header-login .elgg-foot > label {
        bottom: -16px;
        color: #98A9CA;



        cursor: pointer;
        left: 0;
        position: absolute;
    }

    #facebook-header-login div {
        display: inline-block;

        margin-bottom: 3px;
        padding-right: 10px;
    }

    #facebook-header-login .elgg-input-text,
    #facebook-header-login .elgg-input-password {



        border-color: #1D2A5B;
        color: black;
        font-size: 11px;
        margin:0;

        padding: 3px 3px 4px;
        width: 150px;
    }

    #facebook-header-login .elgg-menu {
        position: absolute;
        margin-left: -160px;
    }

    #facebook-header-login .elgg-menu > li {
        display: inline-block;
        margin-right: 10px;
    }

    #facebook-header-login .elgg-menu > li > a {
        color: #98A9CA;
        display: inline;
    }

    #facebook-header-login .elgg-menu > li > a:hover {
        text-decoration: underline;
    }

    #facebook-header-login .elgg-button-submit {
        position: relative;
        top: 10px;
    }

    as Evan did this

  • Jpardee 871 days ago

    ok so if u want ads on your facebook themed elgg u need to do a few things....

    ok start by going to openads.org or simply searching for it in google, search for Openads 2.0.11-pr1 its an open source ad software, open ads has a newer version but i have been unable to intergrate it into an elgg, so anyways download the open ads software and upload it to your server (Note that some servers dont support this, i opened another acount through netfirms just to run my ads cause they have everything u will need, so if u run into apache errors and stuff, chances are ur going to have to do the same thing i did and buy another domain and hosting to host your ads) once you have downloaded and uploaded open ads on to your server (Anyway, doesnt have to be in a mod folder, can be in a folder called "ads" inside your public_html folder. anyways once its on your server, go to the address you installed it, example.com/ads/ it will take u through a set up alot like elgg does, connect it with your database and all that fun stuff, once its fully installed the next step is to start added example ads, as u see on my network we have 4 ad spaces (remember ads can rotate so u can put 500 millions ads in slot one and it will show a different ad on every refresh) so to add these ads u want to start by doing this in ur admin panel of the open ad server, first create a publisher (this is simple your site and where the ads will be at on the internet) then create a zone (the zone is the area the ads will be placed (Physical page), make sure to make the zone a specific size in both weight and height, THIS IS VERY IMPORTANT!) once you have a publisher and a zone set up now its time to set up advertisers, so click "add an advertiser" input all the info for this advertiser, once u have that then click the "add a banner" button and add a banner for that advertiser, now this is where stuff gets a little tricky, so u need to go make example ads in a graphics program or u need to redo an ad someone sent u, THIS AD NEEDS TO BE THE SAME SIZE AS YOUR ZONE OR THE ZONE WONT USE IT! u can upload the image and change its size in the admin panel but depending on the image when u change it to fit ur zone it might get streched all funny so u might just redo the image to what u need, once u upload it and have it the proper size, there will be a tab that says "Linked zones" click it and link this banner to the zone u have created, now once u have added as many advertisers as u want( u can also do this early and ad advertisers later, if u linked them to the zone they will show up without u having to change anything about the zone) its time to take this zone and add it somewhere so, go to your "zones" tab and click on your zone, there will be a tab that says "Zone invocation code" or somthing close to that, click on it and it will basicly allow you to embed the code somewhere, now take that code and place it on a random file all by itself (paste it to a notepad and save it as testads.html or whatever u want to name it)

    NOW things are going to get really hard!

    now its time to add this to the facebook themed elgg website so, since the facebook theme as u probly have seen, when u make ur browser smaller the facebook theme changes to fit the now smaller screen, WE DONT WANT THIS!!!!!! u need to go into your themes css files and preset everything to be a size that never changes (I Have my css all altered to stay put, if really need be i can send u those files, took me about an half hour to do this step), once everything is all one size and never changes u will note that on the right side of the facebook theme it has a nice almost 200 pixel area that it not being used (just pass the line the runs down after the navigation account drop down, so everything on the right side of that line, nice open space, so lets use it shall we!) now make sure u network's size doesnt change, take ur browser out of full screen, make it smaller, scoll around and test it) once its for sure a preset size u need to go into the folder public_html\mod\\facebook_theme\views\default\page and find the default.php file, open this file and ad the following just below the topbar:

    <DIV
    STYLE="position:absolute;
           left:1170px;
           top:112px;
           width:300;
           height:200;
           clip:rect(0,324,224,0);"
    >
    <IFRAME
    SRC="http://www.example.com/ads/testad.html"
    WIDTH="177"
    HEIGHT="480"
    MARGINWIDTH=0
    MARGINHEIGHT=0
    FRAMEBORDER="NO"
    SCROLLING="NO"
    STYLE="border-width:12;
           border-color:#445599;
           border-style:solid;"
    >
    </IFRAME>
    </DIV>

     

    So Again add this line under this:

    <?php if (elgg_is_logged_in()): ?>

     <div class="elgg-page-topbar">
      <div class="elgg-inner">
       <?php echo elgg_view('page/elements/topbar', $vars); ?>
      </div>
     </div>
     PUT IFRAME CODE RIGHT HERE

    Once u add this ur going to do a little more saving code, uploading, and checking the network to see its in the right spot, if its not, change its DIV
    STYLE="position:absolute; change the width and height to find that right spot where it fits perfectly into the open space, and walla! ur network now has an add system, u can add, delete banners or advertisers and u will never have to change any code, just log into ur open ads server, add the advertiser, add their banner, link that banner to the proper zone, click save and review the new banner on the network, good luck guys! like i said its quite a process, im more than willing to help so if u get into a snag and cant figure it out, calm down, relax, know that it is posible,stop messing with it, shoot me a message here on elgg leting me know where u were at and how ur getting snaged up and i promise I will get u through it! and again remember if anyone wants a copy of my css just let me know, Oh and Imoni, maybe if we work together maybe this could be somthing built into the plugin when u download it, seems like a facebook theme isnt complete without advertisments, seeing in how facebook is worth SOOOO much money due to advertisment dollars lol, anyways hope this helps, u can always review my network to see what it should look like, go to http://www.hazebook.net or if u dont want to sign up to get to the dashboard go to http://www.hazebook.net/adsadmin.png (ADMIN PANEL) http://www.hazebook.net/adsplaces.png (ADS ON NETWORK PAGES) to see screenshots

     

    ONE LAST THING, remember when putting that code into the default.php file, it must go under the topbar! the reason is because that topbar only comes up IF USER IS LOGGED IN, so placing this code under that makes the ads only show up when someone is logged in, so it wont mess with your custom index while logged out, and yes these ads are on every logged in page, and yes u can create more slots like down at the bottom on my network, its basicly a spotlight that is full of bigger ads,

    thanks again guys and good luck!

  • Jpardee 871 days ago

    i have a question......so i cant post on a friends wall (messageboard bug) but i also see that when i do try and post on a friends wall, the item posts to my own wall via thewire(i know this because it now shows up in my wire posts) so maybe the issue has somthing to do with the fact its using the wire and not the messageboard? i dunno just a thought.....

  • DhrupDeScoop 871 days ago

    @JP: ThX for the notes on OpenAds. Yr HazeBook site looks rather very nice pretty design ;) Have you posted that on the *several 'my site' Topics here ? I'll add to my ElggSItes Listings here - when I am back.. by Tuesday. Regards, DDS>

  • Jpardee 871 days ago

    so i dropped all my plugins other than the core plugins and the message board bug is still happening, still cant post on a friends wall,......really confused at this point....i also dropped the facebook theme and tried using the message board on the normal elgg layout and it was no problem i posted and it showed up no problem.........so it kinda rules out that the default core message board has an issue.......i dunno but i really really would like to figure our how all of u that are not having the issue fixed it.......

  • imoni 871 days ago

    ow ok jpardee now i got it, u are using old version of facebook theme. u need to upgrade to new version.......

  • Jpardee 871 days ago

    i just tryed dropping all but core plugins and loading the brand new 1.3 facebook theme, still no go, i also thought maybe u have to run the normal elgg layout and set up all the users with messageboard widgets and then load facebook theme and try again, yet again nothing, just cant seem to get it to work even with the basics like only these plugins running

    -the facebook theme, the profile, the messageboard, and the wire

    and still diddnt work.....im confused? what am i doing wrong....

  • Jpardee 871 days ago

    and now it says "Sorry. We could not find the requested profile" when i try to post on a friends wall, but still posts into my wire posts and onto my wall and the dashboard

  • Jpardee 870 days ago

    still just cant get it.....iv tried all the new releases and droping plugins, even core plugins, nothing i do can get it to work, and yes i have tried this new release without any of my extras like css changes and stuff, just straight out of the box cant get it to work.......i wanna post on my friends profile so freakin bad now! lol.....

  • Jpardee 870 days ago

    image

     

  • Jpardee 870 days ago

    got an idea, so everything works fine when i post to a friends wall it works but doesnt show up, example i post to their wall and its not on their wall but if i go to examplesite.com/messageboard/owner/friendsusername it shows that persons messageboard and the post is there, but the wall page is showing activity via the wire, so how do i make a page that is the NEW wall that has the same post options on the wall but displays the page owners messageboard feed? make sence?

  • imoni 869 days ago

    your core dashboard plugin is active? if yes, deactivate it

  • imoni 869 days ago

    @Evan what code you change to make the bar position fix no scroll?

  • imoni 869 days ago

    1 very important thing:

    Do not allow users(public) to open page "activity". Users will not be able to open "<yoursite>/activity" only admins will be able to do it

    in /mod/facebook_theme/start.php

        if(elgg_is_admin_logged_in()==FALSE)
        {
            elgg_unregister_page_handler('activity');
        }

  • imoni 869 days ago

    For those who want to add profile icon like in facebook on newsfeed side bar place the following code in start.php

     

    elgg_register_menu_item('page', array(
                    'section' => 'default',
                    'name' => 'profile',
                    'text' => elgg_view('profile/icon', array('entity' => $vars['entity'],'size' => tiny,'override' => true)) . elgg_echo('My Profile'),
                    'href' => "/profile/$user->username",
                    'contexts' => array('dashboard'),
                    'priority' => 1,
                ));

     

    or use this for better view

     

    elgg_register_menu_item('page', array(
                    'section' => 'default',
                    'name' => 'profileicon',
                    'text' => elgg_view('profile/icon', array('entity' => $vars['entity'],'size' => tiny,'override' => true)),
                    'href' => "/profile/$user->username",
                    'contexts' => array('dashboard'),
                    'priority' => 1,
                ));

    elgg_register_menu_item('page', array(
                    'section' => 'default',
                    'name' => 'profile',
                    'text' => elgg_echo($_SESSION['user']->name),
                    'href' => "/profile/$user->username",
                    'contexts' => array('dashboard'),
                    'priority' => 10,
                ));

     

    in line 'text' => elgg_view('profile/icon', array('entity' => $vars['entity'],'size' => tiny,'override' => true)),

    you can change the size of icon as your requirment. sizes are tiny, small, medium, large

  • Purus 869 days ago

    @imoni: You are doing a great job of helping all here. Thanks for that.

    It would be helpful if you could make these changes in the Github so these enhancements are available in the next release. Just a thought.

  • imoni 869 days ago

    these are the optional changes if anyone wants to do that.

    for sure i will make my account on github again and try to contribute there for the changes which should be done

    Thanks Paurus

  • Jpardee 869 days ago

    core dashboard is disabled, well fully deleted of the server for that matter, i dont use it

  • Joehenrique7 869 days ago

    Olá alguem sabe informar como coloco o menu para exibir todos os usuários mesmo os que não são meu amigos para eu poder fazer a solicitação de amizade?

    Hello Does anyone know how to put the report menu to display all users even those are not myfriends so I can make the friend request? 

  • imoni 869 days ago

    enable "members" plugin

  • Jpardee 868 days ago

    could i still be incountering the messageboard error because i am on 1.8.01 and not 1.8.1?

  • imoni 868 days ago

    @Jpardee this may be the case, create a test site of 1.8.1 and test on it

  • Joehenrique7 868 days ago

    o plugin "membros" está ativo e os usuários para acharem outros membros da comunidade pelo que vi somente digitando na caixa de busca tipo a letra "a" dai lista todos usuários com a letra "a", mas gostaria de colocar um link especifico que exiba todos os usuários do site para eu poder adicionar como amigo.

    the plugin 'members' is active and users to find other community members have seen only bytyping in the search box type the letter "a" give lists all users with the letter "a", but would like toplace a link to specific view all users of the site so I could add as friend