The steps below are for people who have built their own theme prior to v1.5 and want to update it to work with the v1.5 Elgg engine. If you are new to Elgg theming, or want to create a new theme from scratch, check out the Theming documentation.

Page structure

The first thing to change (if you have overridden the pageshell in your theme plugin) are the calls to the page_elements file includes. This is because the old page_elements/header.php is now split into several files in v1.5 namely:

<?php echo elgg_view('page_elements/header', $vars); ?>
<?php echo elgg_view('page_elements/elgg_topbar', $vars); ?>
<?php echo elgg_view('page_elements/header_contents', $vars); ?>

So your pageshell.php override will have to include these new lines in order to display correctly.

Have a look at the Elgg core theme (in views/default/page_elements/) to see what goes in each theme.

In short, header.php contains everything from the opening html tag down to the the opening body tag - so you only need to override this one if your theme, for example, adds extra javascript files (that you want included on all pages), or you need to alter/add meta-tag data etc.

elgg_topbar.php contains all markup for the default page-top grey horizontal toolbar. You can remove this from your themes pageshell.php file if you don't want it to display, or include your own in the theme bundle if you are modifying it in any way.

header_contents.php is the one most likely to be overridden by themes as it contains the markup for the web pages header area (anything below the Elgg toolbar and above the page content area).

If you override footer.php and you're running the new external pages mod, and want those external page links (About, Terms, Privacy) to appear in the footer you'll need to add to your footer

<?php  echo elgg_view('footer/links');  ?>

if not, you can leave the footer.php alone.

Main css file

If you override the Elgg default css file (most themes will): First replace all the topbardropdownmenu css (this has now changed from an id to a class so it can be reused on the page, and also has new javascript contained in initialise_elgg.php in the Elgg core). Open up Elgg's main css file views/default/css.php and copy it from there - line 593 - 678.

Add z-index: 9000; to #elgg_topbar System messages: .messages and .messages_error change z-index from 9999 to 8000 These changes are so the toolbar drop-down menu appears above the green message div.

Change #elgg_topbar_container_left img { margin:2px 0 0 5px; } to #elgg_topbar_container_left img { margin:0 0 0 5px; } This is a small tweak to the profile image position (not crucial, and not even necessary if you have removed the Elgg logo in the toolbar)

Add the following new layout boxes:

#two_column_left_sidebar_maincontent_boxes {
	margin:0 0px 20px 20px;
	padding:0 0 5px 0;
	width:718px;
	background: #dedede;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
	float:left;
}
#two_column_left_sidebar_boxes {
	width:210px;
	margin:0px 0 20px 0px;
	min-height:360px;
	float:left;
	padding:0;
}
#two_column_left_sidebar_boxes .sidebarBox {
	margin:0px 0 22px 0;
	background: #dedede;
	padding:4px 10px 10px 10px;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
	border-bottom:1px solid #cccccc;
	border-right:1px solid #cccccc;
}
#two_column_left_sidebar_boxes .sidebarBox h3 {
	padding:0 0 5px 0;
	font-size:1.25em;
	line-height:1.2em;
	color:#0054A7;
}
 
.contentWrapper {
	background:white;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
	padding:10px;
	margin:0 10px 10px 10px;
}
span.contentIntro p {
	margin:0;
}
.notitle {
	margin-top:10px;
}

if you use the spotlight, ie. haven't commented it out or removed it from pageshell.php add:

#spotlight_table {
	margin:0 0 2px 0;
}
#spotlight_table .spotlightRHS {
	float:right;
	width:270px;
	margin:0 0 0 50px;
}

Add:

#profile_info_column_middle .profile_status {
	background:#bbdaf7;
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px;
	padding:2px 4px 2px 4px;
	line-height:1.2em;
}
#profile_info_column_middle .profile_status span {
	display:block;
	font-size:90%;
	color:#666666;	
}
#profile_info_column_middle a.status_update {
	float:right;	
}

Replace all river_object_xxx and river_user_xxx css to the new river css from the Elgg default css file, remembering to change the file path to the icons if you are providing your own river icons in your theme. (This river icon change is because the new riverdashboard generates different classnames to the old activity plugin.)

Add

.plugin_details a.pluginsettings_link {
	cursor:pointer;
	font-size:80%;
}

Update css for admin_plugin_enable_disable to:

.admin_plugin_enable_disable {
	width:150px;
	margin:10px 0 0 0;
	float:right;
	text-align: right;
}

Add

.contentIntro .enableallplugins,
.contentIntro .disableallplugins {
	float:right;
}
.contentIntro .enableallplugins {
	margin-left:10px;
}

Add .contentIntro .enableallplugins, to .not-active .admin_plugin_enable_disable a and .active .admin_plugin_enable_disable a and .not-active .admin_plugin_enable_disable a:hover

Remove friendsPickerNavigationTabs css and replace with elgg_horizontal_tabbed_nav which is used on friends collections, external pages admin area, and the new riverdashboard.

Add

/* reusable generic collapsible box */
.collapsible_box {
	background:#dedede;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
	padding:5px 10px 5px 10px;
	margin:4px 0 4px 0;
	display:none;
}	
a.collapsibleboxlink {
	cursor:pointer;
}

Update

div.ajax_loader {
	background: white url(<?php echo $vars['url']; ?>_graphics/ajax_loader.gif) no-repeat center 30px;
	width:auto;
	height:100px;
	margin:0 10px 0 10px;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
}

Add

.toggle_editor_container {
	margin:0 0 15px 0;
}

That's it for your themes main css file.

Groups css file

The Groups css has changed significantly, I would suggest duplicating the groups plugin css file and modifiying it again to match your theme. However, if you don't, at the very least you'll need to change .right_column to #right_column and update your Groups css from there (Of course if you're not running the groups mod, you can skip this one).

Blog css file

Again Blog has changed significantly (with a new edit blog area and a new canvas layout), so I would suggest duplicating the blogs plugin css file and modifiying it again to match your theme.

Additional css files

There are several new tools in Elgg v1.5 namely

custom_index
thewire
riverdashboard
notifications
categories
members

so you'll need to copy the css for each of these from the Elgg core and add to your theme (if you are running those mods and want to theme them).

Theme manifest file

The final thing to add is a an Elgg version number, this number specifies what version of the Elgg core is required to display the theme correctly. Open manifest.xml from your theme package and add the key

<field key="elgg_version" value="2009031301" />

This value corresponds with the value specified in the version.php file in the Elgg core, and is in the format: YYYYMMDDxx