themes

You are currently browsing articles tagged themes.

I thought most of what I have seen with Elgg 1.0 themes, including my own, seemed boxy. Not that this is bad, but I thought it was time for variation. This theme, Step Out of the Box, uses graphic elements as backgrounds introduce a rounded upper left hand corner. It returns Spotlight to the default configuration. Again, this is not a radical departure form the default theme, rather it represents another exploration of elements that can change the appearance of Elgg.

Customizing this theme requires a bit more work because much of what was done via hex codes in CSS has been done by changing the backgrounds to graphics. There are several posts that will help you alter this and any other theme:

Like all my other themes, it installs as a mod and overrides the default, leaving it intact. To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. It’s probably a good idea to disable any other theme you may have installed first.

Again, not tested in Internet Explorer. Let me know if you find any issues. As always, feedback is welcome! Download:

Step Out of the Box Theme

Tags: ,

In addition to CSS, Elgg 1.0 themes use images to enhance their appearance. The default Elgg theme contains several graphic elements. Sometimes it can be a little tricky finding and changing these images. As usual,the FireFox Web Developer is a great tool. You’ll also need an html text editor, an ftp client, and image editing software. You work with the files and structures outlined here. It is best not to work directly with the views/default/. You might also want to read my post on hacking elgg themes.

Let’s start with a generic blog view in the default theme:

Click to enlarge

Click to enlarge

The orange text represents the name of the file creating the background for each part of the theme. If you are working from the core default theme, these files reside in /_graphics. Otherwise, they would be in the graphics folder in your mod/whatevertheme. Again, the latter route is the best way to go as it leaves your core installation intact. These graphics are called to the page by the css.php file residing in views/default in the core or in your mod/whatevertheme/views/default.

Starting with the footer_back.gif, we open up css.php and go to line 353 and find:

#layout_footer {
354 background: url(<?php echo $vars['url']; ?>_graphics/footer_back.gif) repeat-x left top;
355 height:80px;

The text in blue refers to the image file for the footer background. The text in red tells us that the image keeps repeating horizontally. If we look at the actual image file we find that it is 75x90px. If we want to change the appearance, we need to make another such graphic file to replace the existing. You can simply give it the same name and overwrite the original file, or you could give the file another name and change the blue test above to reflect the name of the new file. Alternatively, you could delete:

url(<?php echo $vars['url']; ?>_graphics/footer_back.gif) repeat-x left top

and replace it with a color:

background: #f3f3f3;

Next we will look at the background for the whole page: page_back_linen.gif around line 79:

79 body {
80 text-align:left;
81 margin:0 auto;
82 padding:0;
83 background: #4690d6;
84 font: 80%/1.4 “Lucida Grande”, Verdana, sans-serif;
85 color: #333333;
86 background: url(<?php echo $vars['url']; ?>_graphics/page_back_linen.gif) repeat left 1px;
87 }

The file page_back_linen.gif is a 97x1624px image that repeats horizontally. Again you replace it with another image as specified above, change it to a color, or use the technique described with Spotlight and Owner’s block. There’s one more element to that body background: the drop shadows to the left and right of the layout canvas. It is a 1013 x 184 px image that repeats vertically:

143 #page_container {
144 margin:0;
145 padding:0;
146 background: url(<?php echo $vars['url']; ?>_graphics/page_back_linen_shadow.gif) repeat-y center top;

If you want to retain this effect, you need to edit to match your background color or pattern. It can also be deleted if you’d rather not bother with it.

Finally, both spotlight_back,gif and onwers_block_back.gif are applied to elements with variable heights, so they need a slightly different approach if you are changing colors. This technique can also be applied to the page background. Let’s look at the code for Spotlight:

336 #wrapper_spotlight .collapsable_box_content {
337 margin:0;
338 padding:20px 20px 10px 20px;
339 background: #ffffff url(<?php echo $vars['url']; ?>_graphics/spotlight_back.gif) repeat-x left top;
340 min-height:60px;
341 border:none;

Note that line 339 has both a color and a graphic for a background. Spotlight is set up to expand as more text is added, yet the graphic header is finite. In order to keep the background from dropping off suddenly, the color of the bottom of the graphic is added to the background.

The graphic for owner_block_back.gif does not need to do this with the default template because the inherited background is white matching the bottom of the graphic. However, if you change the bottom of the graphic to anything else you will need to use this technique (The CSS pertaining to the owner_block_back.gif is found around line 1287). It also could be used if one wanted to use a gradient for the page background.

Graphic elements can assigned to more elements of the layout to further customize the appearance of the site. The header area is an excellent example. Whatever element you want to spice up with an image element, simply look for the backgound attribute, and replace a color with the file path to the image.

Tags: , ,

Some early users were disappointed by the lack of features upon Elgg 1.0′s release. What they didn’t realize is that the new Elgg was designed as an extensible core engine to drive plugins and interact with other social platforms. Elgg 1.0 developers are starting to release plugins that extend the basic Elgg 1.0. What has started as a trickle appears to be picking up momentum. There are already many great plugins.

As mentioned earlier, the full version of Elgg 1.0 includes a spartan set of features. While it is easy enough to modify this popular wysiwyg editor, many are uncomfortable editing a little code. Furthermore, many have been trying unsuccessfully to make embedded content such as videos and video sharing. A couple days ago, developer Lee Teague released Tinymce Advanced.

Tinymce Advanced is simple to install: download, unpack, and upload to your server’s elgg/mod directory. You simply activate it in  Administration–>Tools Administration. That’s it provided you like the way it is configured. Refer back to my post on hacking Tinymce if you want to change the feature set. Depending upon the desired results, it may be easier to modify this than the default Tinymce.

Lee Teague’s Tinymce plugin is full featured, adding several formatting features including alignment, fonts, colors, indents, and tables. Best of all the media button really works allowing you to embed several popular multimedia formats. It also can embed YouTube and other video sharing when you insert the code snippet into the post using the html source editor.

If you use this plugin, it is recommended that it only be available to trusted and accountable users because these tags can make the site vulnerable to attacks. While not yet developed, it would be great if it could be configured so that trusted logged in members could have access to an extended editor, while others has access to a leaner tool set. In a shout back to me, developer Dave Tosh suggested extending textarea to include links to user’s or friends’ file uploads.

Another great plugin puts Spotlight to use as an RSS reader. ThinkTank Studio created a Magpierss reader that displays the latest articles from your favorite rss feed in Spotlight.

Download, unpack, and upload to your server’s elgg/mod directory. Activate it in  Administration–>Tools Administration. It requires a bit of hand coding to configure. Don’t let that thwart you. Just keep a back up copy of any file you edit in case you make a mistake. If the site breaks, just upload the backup so it overwrites the errant code.

Once uploaded, use your ftp client to access the file elgg/mod/magpierss/views/default/page_elements/spotlight.php, then find this (it’s easy to find):

<!-- !! START MAGPIERSS !! -->
<!-- I put the title of the feed here -->
<!-- you can lay things out all pretty with divs or tables or something.  This is just a quick and dirty example -->
<strong>Discovery News</strong><br /><br />
<?php
    require_once('magpierss/rss_fetch.inc');
    $url = $_GET['url'];
    $num_items = 3;
    $rss = fetch_rss( 'http://dsc.discovery.com/news/topstories.xml' );
    echo $rss->channel['title'] . "<p>";
    foreach (array_slice($rss->items, 0, $num_items) as $item) {
        $href = $item['link'];
        $title = $item['title'];
        $description = $item['description'];
        echo "<b><a href=$href target='_new'>$title</a></b><br>$description<br>";
    }
 ?>
<br />
<br />

All you need to edit is the blue text: a title for the feed, the numbers of items to display, and the address to the feed. Overwrite the original file and if you did it properly, you should see your feed displayed in Spotlight. The example illustrated above it the simplest. You could use formatting such as tables in the above code to change the display. The developer has thrown this out hoping others will build upon it.

Finally, there is the Default Widgets plugin. Out of the box, Elgg delivers a new user to a blank dashboard without widgets and a link to edit the page. The profile is also empty. Default Widgets built by Jade Dominguez and Chad @ NCR at the Google elgg developer group populates both the dashboard and profile with a preconfigured set of widgets. Again, download, expand, and upload to your elgg/mod directory, then activate. As configured a new user sees this dashboard:

The profile:

Widgets can be configured differently, but that involves editing code. Open elgg/mod/default_widgets/start.php and look for:

/*
	the add_widgets function only executes if the user has permissions to add widgets to his profile/dashboard.
	Since there is no user yet logged in, we need to artificially login the new user
	*/
	$log_user_in = login($object);	

	if($log_user_in){
		$profile_handler = array("friends", "a_users_groups", "messageboard", "filerepo", "status", "river_widget", "river_widget_friends");
		$dashboard_handler = array("river_widget_friends", "friends", "status", "bookmarks");

		$profile_column = array(1, 1, 2, 2, 3, 3, 3);
		$dashboard_column = array(1, 2, 3, 3);

Edit the values highlighted in blue using the the guidelines from readme.

More Elgg 1.0 plugins are available and even more in the works. As I try them out, I will feature them here. It appears that the trickle may soon be a steady stream.

Tags: , , , , , , ,

Elgg developer Ben Werdmuller gave a very quick overview on how to create an Elgg 1.0 theme as a plugin. This approach has the advantage of leaving the core code intact. It is also handy because using the plugin system makes it easy to enable and disable themes within the Tool Administration interface.

The first step is to create a folder for your theme plugin:

/mynewtheme/

Within that folder create a blank text document entitled start.php. While not necessary, it is best to create a manifest.xml file in the same directory. This file gives a little information about your theme. Here is an example:

<?xml version=”1.0″ encoding=”UTF-8″?>
<plugin_manifest>
<field key=”author” value=”Steve O’Connor” />
<field key=”version” value=”1.0″ />
<field key=”description” value=”This is an alternative theme for elgg 1.0.” />
<field key=”website” value=”http://www.openedweb.com/” />
<field key=”copyright” value=”(C) Steve O’Connor 2008″ />
<field key=”licence” value=”GNU Public License version 2″ />
</plugin_manifest>

Now you should have:

/mynewtheme/
/mynewtheme/start.php
/mynewtheme/manifest.xml

The next step is to add a views directory and within that a default folder:

/mynewtheme/views/default/

You changes will all reside within that directory and any needed subdirectories.

If all you have done is taken the original css.php from elgg/views/default/ folder and hacked it as suggested in the previous post, you just pop your hacked css.php into your new theme:

/mynewtheme/views/default/css.php

Your changes can go beyond just altering the css.php. Let’s go back to the elgg core:

elgg/views/default/

Besides the css,php, there are other places one can edit. One such directory of particular interest is:

elgg/views/default/page_elements

It contains the following:

elgg_topbar.php
footer.php
header.php
owner_block.php
spotlight.php
title.php

Obvious places to edit include: elgg_topbar.php, footer.php, and header.php.

Once you are done editing any of these files, you need to place copies in your theme in a way that reflects the core view folder:

/mynewtheme/views/default/page_elements

Editing the elgg/views/default/pageshells/pageshells.php file would allow you to delete elements  (or add if you know how) to be displayed on the page. Again, save the edited file to your theme:

/mynewtheme/views/default/pageshells/pageshells.php

When you are done, you may have something like this:

/mynewtheme/
/mynewtheme/start.php
/mynewtheme/manifest.xml
/mynewtheme/views/default/css.php
/mynewtheme/views/default/page_elements/elgg_topbar.php
/mynewtheme/views/default/page_elements/header.php
/mynewtheme/views/default/page_elements/footer.php
/mynewtheme/views/default/pageshells/pageshells.php

Obviously, there are more modifications that can be made, but this gives everyone a starting point.

All that remains is to upload and activate the new theme. Use an ftp client to upload your new theme into the elgg/mods directory. Log in to Elgg as an administrator, Go to the Administration section and select Tools Administration. Click to enable your new theme. Now your changed files will override the core Elgg files.

That should get users started. You can do quite a bit by simply working with the css.php and packaging it as a plugin. I will continue to explore other options for customizing new themes.

Tags: ,

Now that Elgg 1.0 is released, administrators may want to distinguish their site for all the other installations. As of this writing, there are no Elgg1.0 themes available nor has the Elgg Documentation Wiki yet been updated with instructions on theme development. There are some quick and easy ways to significantly change the appearance of your site.

The first thing you need to do is grab your ftp client and access yourelggdirectory/views/default/css.php and open it in your text editor. This is the heart of the appearance of your Elgg site. Now that you are looking at the code, it’s time to start hacking. Make sure you are working on a copy of css.php. If you mess things up, you can always upload your backup and restore the original theme.

Where do you start? First of all, the file is well commented by the elgg developers. There are also some cool tools can be a lot of help. One great free tool is a Firefox Plugin called Web Developer. Once you install Web Developer you will see a new tool bar on your browser.

Click to enlarge

Click to enlarge

Look for the CSS button, click it and select “View Style Information.”

Now, as you mouse over elements of the page, Web Developer will display the CSS style information for that element, giving you a pretty good idea where to alter the code to change its appearance.

Note the element is outlined in red above and the styles impacting it displayed directly below the tool bar. A quick peak at the code under those divisions should quickly reveal which needs to be edited.

Some elements such as the background are based upon graphics:

body {
	text-align:left;
	margin:0 auto;
	padding:0;
	background: #4690d6;
	font: 80%/1.4  "Lucida Grande", Verdana, sans-serif;
	color: #333333;
	background: url(<?php echo $vars['url']; ?>_graphics/page_back_linen.gif) repeat left 1px;
}

In that case you have the option of finding another graphic, or in some cases simply replacing it with a color.

Another handy option is to use your find/replace command to change colors en masse. This css file makes it easy because around line 70, you will find:

70 /* ***************************************
  71 	DEFAULTS
  72 *************************************** */
  73
  74 /* elgg open source		blue 			#4690d6 */
  75 /* elgg open source		dark blue 		#0054a7 */
  76 /* elgg open source		light yellow 	#FDFFC3 */

These are color elements that repeat many times in the file. By choosing a replacement color appropriate for each of the three is a quick and easy way to make changes to the theme.

Once you have made your changes, you can overwrite the css.php file to see the results, but a better approach is to use the override system. Simply save the file as css.css and upload it to yourelggdirectory/_css. This way, you still have the default available to fall back on if things did not work out as expected. Please refer to this post on installing themes as plugins.

You may want to change a few elements at a time then upload and view results. There are also some really handy css editors out that give real time feedback. CSSEdit for the Mac makes this process even easier! I’m sure there is something similar on other platforms.

Another thing that you may want to change is the text within Spotlight at the bottom of pages. One option is to write plugins to populate Spotlight, but that is beyond the scope of this post. The other way to edit it is to go to yourelggdirectory/views/default/spotlight/default.php. The commenting makes it clear where to edit.

While this in all probability does not represent the full procedure for developing an Elgg theme, this information will help change the look of your installation. You can do so with very little knowledge of CSS, but of course, the more you know, the easier it will be to make more significant changes.

Tags: ,