Elggzone

New plugin, Elggzone Update Info

KappeD — Sun, 12 May 2013 09:38:26 +0000

Our new free Elgg plugin, Elggzone Update Info, is now available for all our customers. The plugin adds a widget to the admin dashboard, showing the status of your Elggzone plugins.

Sometimes we release minor fixes and improvements without telling you. That’s where Elggzone Update Info comes in. The plugin makes it easy for you to keep an eye on new releases. When a new version is available, you will get a notification in the Elgg admin dashboard. Then, if you want to update, just log in to your Elggzone account and download the new package.

To take advantage of this new update service, log in and go to Member > Plugin Downloads to download a copy of Elggzone Update Info. Note that only purchased products are supported, not our free plugins.

Elggzone Update Info makes use of a new element that is added in the plugin manifest file,

Elggzone

If the element is not in your manifest.xml already, you can add it yourself or download the latest version of your product. We hope that you like this new service.

How to create a custom page in Elgg

KappeD — Sun, 21 Apr 2013 14:45:02 +0000

In this tutorial we walk through all the steps to creating a custom Elgg page. A custom page can be used to organize and manage any content. You can add static content like Company Information or pull content from the Elgg database.

We’re going to create a page and populate it with a heading and three modules. The modules will display a user avatar, friends and latest blog posts.

The Plugin

Create a new directory called custompage. In this directory, create a manifest file and an empty file named start.php. A manifest file contains information about the plugin, like author and version. Open manifest.xml and add the following code,

manifest.xml



    Custom Page
    Elggzone
    2013.04.21
    Custom Page plugin for Elgg
    http://www.perjensen-online.dk
    (C) Elggzone - perjensen-online.dk 2013
    GNU General Public License version 2
    
        elgg_release
        1.8

To run our plugin during initialization, we need to register the elgg event handler function, which will register our function custompage_init(). Add the following code to start.php,

start.php


Now that we have the basic files in place, we can activate our plugin. Go to Administration > Plugins > Custom Page and click Activate.
Page Handler
This plugin does not change anything yet. To create our custom page, we still need a page handler and a new file with the content we want to display. Update start.php with this piece of code,
start.php
 'custompage',
        'href' => '/custompage',
        'text' => elgg_echo('custompage:custompage'),
    )));

}

function custompage_page_handler($page, $handler) {

    if (!isset($page[0])) {
        $page[0] = 'index';
    }

    $plugin_path = elgg_get_plugins_path();
    $pages = $plugin_path . 'custompage/pages/custompage';

    switch ($page[0]) {
        case 'index':
            include "$pages/index.php";
            break;
        default:
            return false;
    }
    return true;
}
Besides the page handler we’ve added a menu item to the site menu to let visitors find our page. The page handler function determines which page to display and in this case it will look for the file index.php in custompage/pages/custompage/.
Let’s add the file. Create a sub directory named pages, in pages create another sub directory named custompage. In this directory create the file index.php. To check out that everything is working, add this code snippet,
pages/custompage/index.php

Refresh the browser window and click the “Custom Page” menu item to go to the new web page. You should see the output “My new page! ”. We’ve now created a custom Elgg page and displays it using a page handler.
Content
Now that the page is available, let’s pull some content from the Elgg database. Replace the code in index.php with the following,
pages/custompage/index.php
 false));

$title = elgg_echo('custompage:contact');

// Get friends
$options = array(
    'type' => 'user',
    "limit" => 100,
    'relationship' => 'friend',
    'relationship_guid' => elgg_get_logged_in_user_guid(),
    'inverse_relationship' => false,
    'full_view' => false,
    'pagination' => false,
    'size' => 'small',
    'list_type' => 'gallery'
);
$friends = elgg_list_entities_from_relationship($options);

// Latest 4 blog posts
$params = array(
    'type' => 'object',
    'subtype' => 'blog',
    'owner_guid' => $user->getGUID(),
    'limit' => 4,
    'full_view' => false
);
$blogs = elgg_list_entities($params);

$vars = array(
    'name' => $user->name,
    'icon' => $icon,
    'friends' => $friends,
    'blogs' => $blogs
);
$content = elgg_view('custompage/content', $vars);

$vars = array(
    'content' => $content,
);
$body = elgg_view_layout('one_sidebar', $vars);

echo elgg_view_page($title, $body);
Here we use some of the functions provided by Elgg to get content from the database. In line 46 we use the view system in elgg.
The view system let us break content into smaller chunks of code and include it with for example elgg_view(‘custompage/content’), where custompage is the directory and content is the file in that directory.
Since views live in views/default, let’s create the directories we need, views/default/custompage/, and the file content.php in the custompage directory. Open content.php and add the following piece of code,
views/default/custompage/content.php
 'ptm elgg-divide-bottom');

$hello = elgg_echo('custompage:user', array($vars['name']));
echo elgg_view_title($hello, $class);

$icon = elgg_echo($vars['icon']);

$title = elgg_echo('friends');
$content = elgg_echo($vars['friends']);

echo '';
    echo elgg_view_module('custompage icon', '', $icon);    
    echo elgg_view_module('custompage', $title, $content);    
echo '';

$title = elgg_echo('blog');

if($vars['blogs']) {
    $content = elgg_echo($vars['blogs']);
} else {
    $content = elgg_echo('custompage:noblogs');
}

echo '';
    echo elgg_view_module('custompage', $title, $content);
echo '
';
In this file we’ve organized our content into modules and prepared a few new classes that we will soon add to our css file, in order to render the html output, just like we want it.
Language support
As you can see in our files, we have used the function elgg_echo() quite often. The function outputs the appropriate string from the language file. Add the directory languages in the plugin root. In languages, create a file named en.php and add the following code,
languages/en.php
 'Custom Page',        
    'custompage:custompage' => 'Custom Page',
    'custompage:noblogs'    => 'No blog posts yet!',
    'custompage:user'       => 'Hello, %s!',

);
add_translation("en", $english);
Refresh the browser window and have a look at the updated content. You should see three modules with your avatar, friends and latest blog posts. Now let’s add some styling to the new modules.
Extend CSS
We need to tell Elgg that we want to extend the core CSS with our own CSS file. We can do that with a single line of code. Open start.php and add the following line to the init function,
elgg_extend_view('css/elgg', 'custompage/css');
Create the new file css.php in the directory views/default/custompage/ and add the following code,
views/default/custompage/css.php


/* ***************************************
    CUSTOM PAGE CSS
*****************************************/
.elgg-css-table {
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0;
    margin-top: 20px;
}
.elgg-css-table .icon {
    width: 220px;
}
.elgg-css-table .elgg-list {
    border: none;
}
.elgg-module-custompage .elgg-gallery li {
    padding: 1px;
}
.elgg-module-custompage {
    display: table-cell;
    vertical-align: top;
    background-color: #F7F7F7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: inset 0 0 3px #FFF;
}
.elgg-module-custompage .elgg-head {
    border-bottom: 1px solid #CCC;
    margin-bottom: 0;
    padding: 10px;
}
.elgg-module-custompage > .elgg-body {
    padding: 10px 10px 5px 10px;
}
Save all files, reload the page and check out the final result. As mentioned you can add any content to an Elgg page like this, and with some CSS you can easily adapt the appearance and layout to your existing theme.
We’re done
This is how to create a custom page in Elgg. Please fell free to comment on this tutorial. Thanks for reading.
Download Custom Page 1.8 


1f44

How to add a custom logo to your Elgg site

KappeD — Fri, 12 Apr 2013 09:22:47 +0000

In Elgg, you have the ability to add a header text from within the admin panel. In this tutorial you will learn how to replace this header text with an image logo.

Create Plugin

First and foremost, you must create a new plugin, which should contain all your changes to your Elgg site. If this is new to you, read here first!

If you haven’t created a plugin already, you can download the plugin skeleton we’ve created to help you get started, Customizations.

Let’s get started. Open customizations and add your logo file to the folder customizations/graphics/. Start out with a moderate size, so you don’t break the layout. You can always change the size later.

The Code

The header text, which we want to replace, is in a file named header_logo.php. Since views in plugin directories always override views in the core directory, we may customize header_logo.php without touching Elgg core. We only need to copy/paste the file. Locate header_logo.php in Elgg core,

elgg/views/default/page/elements/header_logo.php

and copy/paste it to the same location in your plugin,

customizations/views/default/page/elements/header_logo.php

Now open header_logo.php in your editor, and edit the code to look like this,

name;
$site_url = elgg_get_site_url();
$logo_url = $site_url . "mod/customizations/graphics/logo.png";

?>


    
        " alt="" width="180" height="50" />

So, what happens here? We create a variable called logo_url, assigns the value “path to your logo file” to it, and replace $site_name; with an image tag, containing our new variable.

" alt="" width="180" height="50" />

Final Step

Save all files and reload your page to check it out. If you do not see any changes, you probably have caching enabled. Go to Administration > Advanced Settings and uncheck ”Use simple cache (recommended)” and ”Use system cache (recommended)”.

If you need to customize css in order to place your new logo exactly where you want it, follow the copy/paste procedure, mentioned above with the appropriate css file, typography.php and open the file for editing.

I hope you’ve now added a nice header logo to your Elgg site. Please feel free to comment on this tutorial. Thanks for reading.

Gianna, a Stylish, Elegant and Catchy Elgg Theme

KappeD — Sat, 23 Mar 2013 14:54:13 +0000

We are happy to announce the release of our new theme, Gianna. Gianna is a stylish, elegant and conspicuous Elgg theme. The theme comes with great features, such as responsive design, fullscreen custom background image and more.

Gianna allows you to easily add your own background images. Just upload your images to the specified folder and they will automatically be added to the dropdown list in Gianna options panel.

Then you can select a single image as background or select multiple images, to display one of them randomly.

As all our themes, Gianna is carefully worked through and supports all default Elgg plugins. Please go to Gianna product page to check out the full feature list of this awesome theme package.

Elgg 1.8.14, theme updates

KappeD — Tue, 19 Mar 2013 11:36:28 +0000

As you might know already, Elgg 1.8.14 has been released, and to keep our themes current with the latest Elgg version, we’ve just released a new round of theme updates.

The 1.8.14 release includes significant bug fixes to localization in JavaScript, saving blog drafts, and displaying system errors due to token timeouts. In all there were 40 bug fixes and enhancements.

If you are already a customer, the latest version of your theme is available from your download page.

Shippingcluster

KappeD — Thu, 14 Mar 2013 07:18:09 +0000

Shippingcluster is an industry initiative, enabling cloud services for shipping, under a cost sharing principle.

Visit Shippingcluster

Coming soon: Gianna

KappeD — Mon, 11 Mar 2013 15:46:04 +0000

Here is a new sneak peek for you. We are very excited to work on our next theme Gianna, which will be a theme with full screen background images.

Gianna will be a fully responsive minimalistic theme from Elggzone, as you know it. Carefully worked through and supporting all default Elgg plugins.

We hope that you like what you see! Please let us know what you think in the comments below.

Registration Page With Random Fullscreen Background Image

KappeD — Fri, 22 Feb 2013 10:08:08 +0000

When visitors want to register on your site, they probably already know what it’s all about. But why not stimulate their interest with some nice appealing background images.

Our new free Elgg plugin, Random Background, does just this. When visiting registration page, a jQuery function randomly select an image. The example above shows the result when used with theme Business.

You can easily replace the supplied images with your own backgrounds. Upload your background images to the folder graphics / backgrounds / and paste the file names in the file random.php.

We hope that you like Random Background. If you have any questions or comments, please leave your responses in the comments below.

Download Random Background 1.8