Translations of this page:

Modifying Expression Engine Forum Themes

I’ve recently been doing some forum hacking on ExpressionEngine. The forum module is a separate part of the ExpressionEngine suite but it integrates very well so that administration is through the same web interface, you can include forum posts in your main weblog and it shares member registration/signon with the weblog. If you are running EE it is a no-brainer if you want forum capabilities. It does cost money, $49.95 for the non-commercial license but you do get a responsive development team.

The main thing that worried me is that the look of the forums differed greatly from my current website. For the end user it looked as if they were jumping into some alien site with unfamiliar navigation. I started taking a look at hacking the themes but this seemed quite an overwhelming task. There were quite a few and because of the dynamic nature of the forum layout they were a mix of HTML and PHP code.

Finally I decided it was best to edit the files directly in the system/forum_themes subdirectory, after first having made a backup. The task turned out to not be as hard as I first imagined. I had three main aims

  • Reduce the size of downloaded pages
  • Blend the forum into the existing website’s colour scheme and navigation
  • Remove some of the options from the forum

Oh and I had a budget of half a day from learning how the themes worked to producing the end product. After a quick tour of the themes I decided that the developer theme really was the best jumping in point.

Style Sheets

The first thing I noticed was that large amounts of style sheet and javascript information were being downloaded with each page. This added to code bloat and network traffic. Ideally this information should be in a separate file which can be cached and reused for each page. I decided to leave the Javascript code for later as the themes seemed to be doing optional includes.

I renamed theme_css.php to theme.css and removed the PHP wrapped and moved the file into the images directory. I then edited the html_header() function in theme_global.php. This function produces the standard HTML header. I replaced the lines:

  <style type='text/css'>
  {include:forum_css}
  </style>

with

<link rel="stylesheet" href="{path:image_url}/theme.css" type="text/css">

I then opened the CSS file and changed the background of a number of elements. This was pretty straightforward. For example say I wished to change a medium grey for a medium blue I would search for all the

background #777

codes and replace the #777 with say #568. I did this on a case by case basis rather than a global search and replace. A CSS editor such as StyleMaster is ideal for this task.

As a final step I copied the image directory from default to developer as the icons are more stylish.

Changing the Top Bar

I wanted my site logo and navigation bar in the top bar and I wanted them centered with no styling. So I changed the code in the top_bar function to:

  function top_bar()
  {
  return <<< EOF
  <div align="center">
  <a href="{path:forum_home}" title="{forum_name}"><img src="http://mysite.com/images/logo.png" border="0"/></a><br/>
  <a href="http://mysite.com/">Home</a> |
  <a href="http://mysite.com/news/">News</a> |
  <a href="http://mysite.com/contact.htm">Contact</a> |
  <a href="http://mysite.com/about.htm">About Us</a> |
  <a href="http://mysite.com/map.htm">Site Map</a>
  <div class="spacer"></div>
  </div>
  EOF;
  }

The code that I had cut from top_bar was pasted into page_header() and I also changed page_header_simple() to just include my forum name. The idea behind removing the “Powered by ExpressionEngine” text is that it makes hacking your website slightly more difficult for script kiddies. They can’t just do a search for the string in Google to find a selection of sited powered by Forum X to apply known exploits to.

Theme Switcher

I only wanted to provide a single theme for my forum so I removed the theme switcher code from the html_footer() function:

{if in_forum}
<div class="itempadbig">
<select name="theme_switcher" class="select" onchange="if (this.value != '') lation.href=this.value">
<option value="">{lang:select_theme}</option>
{include:theme_option_list}
</select>
</div>
{/if}

and the Powered By string.

<a href="http://www.pmachine.com/">Powered By ExpressionEngine</a><br /> ExpressionEngine Discussion Forum - Version {module_version} ({forum_build})<b/>

I would much sooner leave this but it just gives too many clues to the bad guys.

Atom and RSS feeds

The RSS feeds included the whole text of forum posts. I felt this mean that two much information would be displayed elsewhere. Remember that search engine duplicate content filters will attempt to weed out duplicates from search results. If referrals from search engines are important for your traffic figures then this might be an issue for you. I also felt this would hit my bandwidth consumption and slow my webserver.

In theme_atom.php I deleted the following code

<content type="html">
<![CDATA[
{body}
]]>
</content>

and in theme_rss.php

<description>{exp:xml_encode}{body}{/exp:xml_encode}</description>

Search

I wanted to use Google site search rather than the built in forum search engine. This was done to reduce the load on my server and Google search does a pretty good job. I replaced the standard search code in quick_search_form() in the file theme_search.php with Google’s site search code (found from your Google Adsense account).

File Upload

I didn’t want to host images or other files so removed this functionality from the themes. I edited theme_member.php, theme_submission.php and theme_thread.php and removed all the code related to attachments. Normally you can disable attachments in the control panel but I didn't seem to be able to do this. Removing the code means slightly quicker page generation.

Google Analytics

This should go in the html_footer() function located in theme_global.php. Put the code right above the </Body> tag as the javascript can take some time to chat with the analytics server and will slow down page display if you put it higher up.

Images

I ran all the Icon images through a gif compressor to squeeze a few more bytes out of them.

Expression Engine forum hacking

New and old (inset)

tech/expression-engine/forums-themes.txt · Last modified: 2009/02/12 21:56 by davidof
Recent changes RSS feed