Developer

SolutionBase: Customize the look and feel of phpwebsite

By using phpwebsite, you can create a powerful in-house content management system. Here's how you can customize phpwebsite's default graphics to match your organization's needs.

This article is also available as a TechRepublic download.

The phpWebsite content management system is a powerful open source solution for a company that's looking to deploy a CMS without a huge investment. But even with the system up and configured, how much good is it to you if the theme doesn't work with your company? Let's face it. Brand is everything when you're working with a company. So let's set out to match up your phpWebsite system to your company. What you are going to see in this article is the selection of a theme for phpWebsite followed by the manipulation of that theme to suit the needs of a specific company.

Author's Note

This article will require some skills with an image editing package. Naturally I will be using the open source solution The Gimp. If you are in an environment that doesn't allow for open source solutions, Photoshop will do. For the purpose of this article, we are going to go with my company, TransLinux. So, without further adieu, let's get on with the show.

Choosing a theme

Choosing a theme with phpWebsite is very simple. Log on to your site with your administrator username/password and go to the Control Panel. Once in the Control Panel go to the Administration tab and then select Layout Admin tool. Within the top panel, you will see a drop-down list from which you can choose a theme as seen in Figure A.

Figure A

Choose a theme in the Control Panel.

For this article, let's choose the "clean" theme. Once you choose them click the Set Default Theme button. Now you will be presented with a nice blue-ish theme with each module neatly enclosed in its own box. However, the first thing you will notice is that the top graphic will boldly state PHPWEBSITE. Chances are this will confuse your users, so let's start out by changing the main banner of the site.

Before you do so, let's take a look at the structure of the "clean" theme directory. If you move into your phpWebsite's main directory you'll see the theme directory. Change into that directory and then in the clean directory. Within that directory you'll see the following:

boxstyles

explorer.css

img

templates

transfers.tpl

browsers.txt

images

style.css

theme.tpl

Open up the theme.tpl file and notice this line:

<td width="10%"><img src="{THEME_DIRECTORY}img/logo.gif" alt=""/></td>

 

The THEME_DIRECTORY should be obvious to you. If not, it's the one you are currently working in – clean. But what is important right now is the logo.gif section. That is the image you are going to manipulate as seen in Figure B.

Figure B

You'll modify this GIF.

Fire up your image editing software and open up logo.gif. The first thing to do is make sure you know the exact colors you will be using for your site (preferably to match your company's colors). For our company we're going with pink and brown. What I am going to do is first change the mode of the image. Currently the logo.gif file is in indexed mode and, in order to alter the colors, we want the file in RGB mode. Once that is changed I will alter the CCCCFF color to f8b6f4 and the color C8C8C8 to color 948363. We are working in hex because you will need to use those hex colors later. Our new image looks like Figure C.

Figure C

Make the GIF match your desired logo.

If you place the new image into the /var/www/html/phpWebsite/themes/clean/img directory and refresh the browser view, you'll notice the new banner is going to look a bit out of place as you can see in Figure D.

Figure D

When you customize the banner, it may be out of place initially.

Our next step is to take care of that blue bar. If you right-click that blue bar you can select View Background Image. Do that and then save the file. What you are going to do is change the color of that bar to match the pink in the banner. Once you have matched up the colors transfer the file back over and refresh your page. Your banner and your bar should now match up perfectly.

NOTE: When I saved both the banner and the bar files I had to save them in the .png format. Exporting both back into Indexed color saw a loss in the clarity of the image. If you do have to change the file format, make sure you change the file names in the theme.tpl file in the clean theme directory.

Now that you have a matching header section of the Web page you have to match the boxes up. Change to the /var/www/html/phpWebsite/themes/clean/boxstyles/img directory. Within this directory you will see eight image files. These eight files comprise the edge graphics of the individual boxes within your Website and they are currently shades of blue. Change those shades to match your new theme.

Open each file up and change the colors to match. To do this you are going to have to set the view to about 400% because these files are tiny. Once you are actually viewing these files you should be able to tell exactly what to do with them. I prefer to change the darker, thin outline to brown and the inside blue-tint to pink.

Once all eight files are saved moved them back to their native directory and you're ready to do a little bit more coding. You'll notice that, when you refresh your browser, the outline is perfect but the inside of the boxes is still a cool shade of blue. This must be changed in the default_box.tpl file within the boxstyles directory. Open that file up and look for the color "eeeeee". You want to change that to match the pink shade of f8b6f4. The offending line is:

<td width="100%" style="background-color : #eeeeee">

and will change to:

<td width="100%" style="background-color : #f8b6f4">

There are a lot of other tweaks you can make with the graphics. For instance, the color of the box titles doesn't currently match. If you look at the default_box.tpl file you'll see this line:

<!— BEGIN title —><div style="color : #777777; font-family : arial, helvetica; font-size : .8em; text-transform : uppercase; text-align : left; font-weight : bold">

Change the 77777 to 948363 (the hex representation of our brown color) so your box titles match.

Photos

Many content management systems deal with photos. Fortunately phpWebsite has the perfect modules for using photos. The first module is the Photo Albums module. If this module is not installed go to the Administration tab in the Control Panel and then click the Boost module. Once inside the Boost module, scroll down until you see Photo Albums listed and click Install. Quick and easy.

Now let's set up some photo albums. Go to the Photo Albums modules in the Control Panel. Click on the Site Content tab. In this tab you'll see an empty listing of Albums. Above that empty listing you'll see the New Album link. Click that.

Creating a new album is simple: Give the album a title, a short description, an extended description, and click Save. Done! If you happen to get an error that the directory was not writable you have to give the following directory write permissions:

/var/www/html/phpWebsite/images

you can do this with the command:

chmod -R 777 /var/www/html/phpWebsite/images

If weren't able to, try again. Now it should work.

With the album created, adding photos is self-explanatory. One word of caution: If you use the batch add tool you must upload the exact amount of photos that you select. By default the batch add adds five photos at a time. If you are loading less or more then you must select the exact number from the drop-down. If you change the number from the drop-down, make sure you click the update button to make the change.

Once you've selected the proper number of files, start adding them. You do have to give each photo a short description. You do not, however, get to add an expanded description in the batch add tool. To add an expanded description you would have to go into the edit action while viewing the individual photos. So if you plan on needing expanded descriptions, it's best to add one photo at a time.

Last touches

Before you bring you phpWebsite on line there are a few more final touches you'll want to take care of. One of the first is to edit the footer at the bottom of the page. For every theme there is footer text at the bottom of the theme.tpl file in the theme's directory. Edit that text to reflect your needs. Keep in mind though you might want to retain the GPL information as well as the phpWebsite creator's name (just for good karma.)

Finally, you might not be happy with the collection of themes available to phpWebsite. If not there are a few locations where you can get both free and not-so-free themes. One particular designer is Sharondippity. Sharondippity does custom themes but also offers some free themes for download.

Another location is the theme design gallery in the phpWebsite help forum located at: http://www.phpwsforums.com/forumdisplay.php?f=28

If you don't find what you're looking for, don't hesitate to take one of the available themes, tear it apart, and create your own.

Powerful and easy to use

The phpWebsite tool is amazingly versatile in both its look and feel. I've used phpWebsite for years and have found it to be all the tool I need for creating fully-functional, good looking Web sites. By following this article, and with a little work, your phpWebsite will also be all the tool you need for an outstanding, professional Content Management System.

About Jack Wallen

Jack Wallen is an award-winning writer for TechRepublic and Linux.com. He’s an avid promoter of open source and the voice of The Android Expert. For more news about Jack Wallen, visit his website jackwallen.com.

Editor's Picks

Free Newsletters, In your Inbox