August 2008

You are currently browsing the monthly archive for August 2008.

The extended Elgg includes the Tinymce wysiwyg editor with a well selected, yet limited set of tools. Many have asked about extending the options and, in fact, there are several more tools waiting to to activated. Some are very simple to implement, while others are more complex. We will start with the simple changes and deal with more complex modifications in the future.

The default Tinymce text editor in Elgg 1.0 appears like this:

This gives you the following tools:

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Bullet List  (bullist)
  • Number list (numlist)
  • Undo
  • Redo
  • Link
  • Unlink
  • Image
  • Quote (blockquote)
  • Source (code)

Many have grown fond of a larger tool set with other applications or would like to see more features suited to their use of Elgg. Most of these tools are already loaded on your Elgg installation just waiting to be activated. Some can be activated by typing a single word into a file.

Looking at moxiecode’s documentation, I found that I can easily configure tinymce by editing a file containing:

tinyMCE.init({

Which file is that? It’s hidden deep in the mod/tinymce directory (grep is your friend!):

mod/tinymce/views/default/input/longtext.php

Elgg’s default tinymce configuration is as follows:

tinyMCE.init({ mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" });

Note the text in above in blue. Those call up the options seen in the bulleted list above. Each of the lines starting with theme_advanced_buttons represent a row of buttons in the editor:

theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",

As configured above, there are only tools in the first row of buttons. Additional options can be added by inserting text in any of the three rows, depending upon where you weant them to appear.

There are many functions you can add to any of these three rows by adding words to bring up buttons. For example:

Text Justification:

  • justifyleft
  • justifycenter
  • justifyright
  • justifyfull

Basic Copy/Paste

  • cut
  • copy
  • paste

Indents:

  • indent
  • outdent

Fonts/styles:

  • removeformat
  • formatselect
  • fontselect
  • fontsizeselect
  • sytyleselect

Super/subscript:

  • sub
  • super

Color:

  • forecolor
  • backcolor
  • forecolorpicker
  • backcolorpicker

Here is one possible configuration:

 tinyMCE.init({

    mode : "textareas",
    theme : "advanced",
    plugins : "media, emotions, fullscreen",
    media_use_script : "true",
    cleanup : "true",
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
    theme_advanced_buttons2 : "media, emotions, fullscreen, forecolor, cleanup",
    theme_advanced_buttons3 : "fontselect, justifyleft, justifycenter, justifyright",
    theme_advanced_toolbar_location : "top",

Resulting in this:

More information may be found about options and functions here.

This should get you started. There are even more options that need further configuration–some simple, others complex.  I have found some vexing, but I plan on discussing more complex plugins allowing spell checking, embedding media, and other functions in the near future.

Tags: ,

I put together an Elgg 1.0 theme. Blue Gneiss (pronounced nice) represents modest changes from the default core theme. The main differences are the color scheme, an image in the header, and the use of Spotlight. Spotlight has been moved to the login page and does not appear once logged in. This can serve as a site introduction.

Blue Gneiss installs as a plugin and uses the override system. Any edits to the theme, including Spotlight contents, should be done in mod/blue_gneiss_theme/ directories. While I didn’t include all the core default view files, I included several that I had edited and yet others that I suspect some may want to edit. It also includes a full set of graphics from the core, allowing you to make changes to the theme while leaving the core intact.

This theme includes edits to:

views/default.css.php (several changes)
views/default/pageshell/pageshell.php (moved spotlight and made it load not logged in)
views/default/page_elements/footer.php
views/default/spotlight/default.php

In the graphics I added:

graphics/header.jpg

I also altered:

footer_back.gif
spotlight_back.gif
owner_block_back.gif

To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. The theme’s default spotlight has some customization hints,

I’m sure there are a few bugs and tweaks that I missed. I have not tested it with Internet Explorer. I would appreciate comments!

Update September 1, 2008:

This is a new version that eliminates the ability to collapse Spotlight and an error that occurred while trying to log on with Spotlight collapsed.

You can preview here. Download here.

Hints for hacking Elgg Themes.

Explanation of theme overrides in Elgg.

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: ,

In my previous post about Web publishing security, I proposed the following security matrix:

While this is an oversimplification of the options, I think it gives a framework for making decisions on what web publishing software to deploy, when to deploy it as well as how. As an illustration of how this framework can be used and the potential complexity, we will examine the popular multiple blog platform WordPress MU. Another reason is that we have deployed WPMU in the past and there has been some debate about how it should be used if it should be used at all.

Out of the box, WPMU has two options for access to content: Open to the world and open, but blocking search engines and archivers. It has four options for moderation: Unmoderated, Posts only moderated, comments only moderated, and both posts and comments moderated. With WPMU, then, our matrix looks like this:

As one can see, there are already eight potential options in terms of access to publishing and content. While all the content can be accessed by anyone in the world through both choices, blocking search engines and archivers would significantly reduce access unless one has a link, or goes to the site directly.

WPMU has a plugin that I discussed in an earlier post called More Security Options. This plugin offers three more content access options: Community members (all users with accounts on the WPMU installation), Blog (People who are at least subscribers of an individual blog), and Administrators (only the administrators of an individual blog). The security matrix with this plugin appears:

There are now 20 options in terms of publishing and content access! Arguable, there are even more. For example one could choose to allow unmoderated comments, but restrict comments to logged in members of a blog. Clearly there is enough flexibility in WPMU to accommodate a wide range of Web Publishing Policies.

It is up to school tech committees to consider the ramifications of all of these options in terms of security, audience, and ownership and weigh the pros and cons of each before committing to a particular configuration. Teachers can then decide within the constraints of the school web publishing policy which option best suits their class. Publishing student content to the web is not simply as choice of yes or no. There are several shades of gray. These are not the only considerations and options for deploying this software. For further discussion, refer to my other posts about WPMU for more information on managing and securing the software.

Tags: , , , ,

« Older entries