Personalizing the dotProject Environment

From ThemesWiki

Personalizing the dotProject Environment

Source Book

ISBN	978-1-847191-64-9
Publisher	Packt Publishing
Author(s)	Lee Jordan

The dotProject environment is very malleable. We will learn new ways to mold the dotProject environment so it matches our requirements as users and administrators.

This tutorial will include:

Customizing themes
Using different icons
Stylesheet editing
Customizing module text strings

[edit] Setting User Preferences

User Preferences are found under the System Administration screen. They have the same structure as the personal user preferences available to each user. Even though these are global settings, they may not apply to current users. Determine and configure these settings before creating any additional users if at all possible. Let's take a closer look at the User Interface Style themes that can be set for users.

[edit] User Interface Style

dotProject installs with three available interface styles. These control the appearance of the tabs, the background colors, and the overall look of the dotProject environment. Which one to use is a matter of site requirements and user preference. Users can also change the style they see when they log in.

( Note - Users created before the User Interface Style is changed in System Administration will not have the new theme instantly applied.)

Grey Slimline Style: Shiny, sleek, and silver, this style has a clean, modern look that mimics the Apple.com site.

Default Clean Style: A blue and gray interface with minimal images. Screenshots of this theme have been used almost throughout this book.

Classic DotProject Style: The original dotProject theme uses a left-hand menu system which has a mint green background. It has a clunky interface compared with the Default Clean style. It may not load properly on all installations. The following screenshot gives an overview of what the GUI would look like:

[edit] Finding Other Themes

There are other themes available to use with dotProject. Mats Dj rf is a theme creating machine. He has several themes available for free download:

http://www.w8.se/dotproject/download

A variety of themes are available, including the popular WPS-Redmond theme shown in the screenshot overleaf:

The WPS-Light theme has soft light gray 3-dimentional menu bars and tabs for a smooth, modern look.

[edit] Custom Themes

In this section we will learn how to customize themes to suit our requirements.

[edit] Altering an Existing Theme

Altering an existing theme is a great way to become comfortable with the different presentation elements in dotProject.

Download an existing theme you want to alter.
Copy the theme. Use the original as a backup.
Rename the copy. Webteam_style is the name given for the YourWebTeam theme.
Make any changes you want. Do you not like the background color? Want to replace the dotProject logo with your own? Just want to add your logo? It can be done by altering the theme.
The next sections will include information on changing background colors, replacing fonts, and other aspects of customizing a theme. We will end up with an altered theme similar to the one shown in the following screenshot. It is a version of the WPS-Light theme with the background of the title header area and the logo area on the right altered using techniques learned in this tutorial.

[edit] Changing Images

Administrators often want to change the images to match a company style-guide or to create a customized look. How difficult it is to do will depend on what images need to be changed. Altering the icons of individual modules is a more involved task than altering the background behind the title of the entire dotProject environment.

[edit] Altering Icons

Icons are the small images usually stored in the images file of individual module folders or in a special icons folder within a dotProject style. The icons can be easily downloaded, altered in an image editing program, and then uploaded back to the original folder.

[edit] Replacing Icons

Mats Dj rf has packaged up a slick set of icons labeled Novola for dotProject. This is available for download at www.w8.se/dotProject. The original author David Vignoni, also known as the Icon King, has many more icons available at www.icon-king.com.

Replacing icons involves a series of careful steps:

Download an icons package. They are usually available packaged in tar.gz.
Unpack the package in a new folder on your computer. Use a program such as WinRar.
Back up the original images folder of the dotProject installation located under the root folder of the dotProject installation (such as /public_html/dotProject installation/images/ ) and of every module subfolder.
Example: The YourWebTeam dotProject installation is located in a subfolder. Its image path is as follows: /public_html/yourwebteam/images/.
The images folders for the modules can be found under each module name in the modules subfolder. In the YourWebTeam installation, the images folder for the admin module can be found at this path: /public_html/yourwebteam/modules/admin/images/.
Upload the images folder within the icons package to the root of the dotProject installation. It should replace the original dotProject installation/images/ folder.
( Note - To avoid deleting any other images, select all the image files in the new images folder, then drag and drop them to the dotProject images folder or select 'upload' using your FTP client to send them to the images folder.)
Navigate to the sub folder of each individual module in the core_images/modules/ folder of the icons package.
Upload the images folder of each individual module to the respective images subfolder of the module in the dotProject installation under /modules/your module/. This should replace the images folder of each module.
Clear your browser cache and examine the results.

[edit] Replacing the dotProject Logo

The Yo'urWebTeam' administrator has been given a logo that is being used on every YourWebTeam site. The administrator decides the logo should go in the top right corner of the dotProject installation. This will replace the dotProject logo. The larger the logo is, the more space the header area will take up.

Back up the original logo. It can be found in the /dotProject installation/theme name/images/ as file dpicon.gif. Note that the size is 120 by 20 pixels in gif format. The YourWebTeam dotProject installation has the logo located at the following path:/public_html/yourwebteam/style/default/images/.
Crop the new logo to closely match the original size. The larger the logo is, the more space the header area will take up. The YourWebTeam logo will display without distorting at a size of 120 by 39 pixels.
Save the logo as dp_icon.gif.
Upload the new image to the /style/your theme/images/ folder of the dotProject installation.
Refresh the browser and view the results.

[edit] Replacing the Header Background

Is the dark blue gradient stripe of the default dotProject theme clashing with your company colors? Change the color of the title background in a few easy steps.

Create a new image file in an image editor such as Photoshop, Paint Shop Pro, or Gimp. Set the width to 2048 pixels and the height to 2 pixels. You can create an image with greater height, as long as you remember to reduce the height to 2 pixels later. The file will repeat horizontally in the header space once it is uploaded.
Fill the background image with any color or gradient. Save the image as titlegrad.jpg in your personal theme folder.
Upload the new image to the images folder of your dotProject theme (dotProject installation/images/). Refresh the screen. The new image will tile (repeat continuously) behind the dotProject Installation title in the header area as in the following screenshot:

(Note - Download the titlegrad.jpg image. Open it in any image editing program. Make any cosmetic changes to the image file, including changing the color, adding patterns, or a different gradient. Save the changes in a new folder, and then upload the file to the dotProject installation as described above.)

[edit] I Don't Want to See an Image There

If you do not want to see an image in a certain area at all, there is a simple hack to prevent an actual image from being seen. Any image in dotProject can be "hidden" this way. It is a smart idea to download a copy of the original image file and save it in case you change your mind later.

The easiest way:

Create a transparent background image with the same width and height as the original background image. Save it as the same type of file and with the same name.
Upload it into the image folder of the old image. This will replace the original image in the dotProject installation. The original image will no longer be visible. The placeholder image will take its place, acting as a clear film.

[edit] Editing the Style Sheet

dotProject uses style sheets extensively for design markup. Be sure to back up any files you want to change. Beware of changing the names of any existing style sheets as well. Comment changes you make. It will make things easier a month from now when you have forgotten what color the background used to be.

We will explore making changes to the existing styles in the style sheets, and perhaps adding a few of our own. If you already have styles from other web projects that you think would be a good fit, you can incorporate them into the altered style sheet.

[edit] Altering Existing Styles

Before any changes are made, the style sheet should be backed up. Being able to revert back to the original style sheet is a real-world necessity. Documenting changes made to style sheets is another good practice to use. Weeks or months later when the reasons why styles were changed have been forgotten, you will be glad the notes were made.

There are many styles and tags that can be altered in a style sheet. Describing each one in detail is beyond the scope of this book. Instead, several basic styles that frequently need to be altered will be explored.

[edit] Changing Fonts

Does your company use a preferred font? Do the fonts in dotProject need to closely match the fonts used on other company sites? Changing the font in the style sheet is a simple procedure that will reap big rewards. The default font of the dotProject default theme is Osaka. We will be replacing it with a different font in the following steps.

Save a backup version of the main.css style sheet. It is located in the theme name subfolder of your /styles/ folder of the dotProject installation. For example the stylesheet for the default theme of YourWebTeam is located at: /public_html/yourwebteam/style/default/main.css.
Open the style sheet in an editor such as HTML-Kit or even a basic text editor.
If you are using a Windows PC, click Ctrl + H to activate the find and replace function. Type Osaka in the find portion of the window and enter the font you want to use in replace. Click the Replace All button. All instances of the Osaka font will be replaced with the new font. There are only about thirteen occurrences of the font, so they can also be replaced by cutting and pasting.
Save the CSS file in a special folder.
Upload the file to the /styles/theme name/ folder of your dotProject installation.
Refresh the screen to see the change. Lucinda Console has a distinct look and is shown in the following screenshot. Any web-safe font such as Arial, Georgia, Courier, Trebuchet MS, and Verdana can be used.

(Note - Web-safe fonts can be boring, since there are only a few of them to choose from. Any font can be used, but be aware that not all users may have the font installed on their computers. Fonts such as Tahoma, Calisto MT, and Century Gothic are relatively safe alternatives.)

[edit] Adjusting Links

We will change the color of the default link style and also set its text decoration element to underline. The default link style of the default dotProject theme uses a dark blue color with a hexadecimal value of 08245b:

To change the color, begin by opening the main.css style sheet in an editing program such as HTML-Kit.
Go to line number 36 and replace the current hexadecimal code 08245b with a new color. We will use#006600 in the following example 006600 a bright web-safe green. Change the text decoration value from none to underline.
```
A:link{

color: #006600;/*was 08245b*/

text-decoration: underline;/*was none*/

}
```
Save the CSS file.
Upload the file to the /style/your theme/ folder of the dotProject installation.
Refresh the browser. The calendar, links under the page title, and many other areas are affected by this change.

(Note - Commenting Style Sheets - Style sheets can be commented, and it is a best practice to add comments when changes are made, especially in development. The example above is commented. The forward slash and asterix symbols '/*' are typed in order begin a comment block. The asterix and forward slash symbols '*/' in reverse order together indicate the end of a comment block. )

[edit] What Styles Should I Leave Alone?

If you have a test installation of dotProject, and you have backed up the style sheets, then go ahead and experiment. It is the best way to become comfortable with dotProject and CSS. Do not remove any of the required dotProject styles. All the original style names should be left in the dotProject main.css stylesheet. Any of the information within the styles contained in the brackets '{}'can be changed.

( Note - The colors and other attributes such as background colors and margins can be altered, but beware that altering margins and other positioning elements can cause errors and disrupt the display of modules and information. )

Currently I only have a production copy of dotProject (well several production copies) running on my web server, so I won't make any changes that cannot be fixed by uploading a copy of the backup file. Some of the styles in dotProject control the framework of the site itself. It is possible the site will break and strange things happen. Sounds fun. Let's try it.

[edit] Changing the Required Body Style

The background color, font, or other styles can easily be changed. A backup copy should be set aside in case the altered style sheet needs to be replaced. We will be replacing the background of the body tag.

Open up the main.css style sheet from the copied theme folder.
The required dotProject body style is located on line number 2 of the main.css file. The default dotProject body style has a light gray background color. Change the background color to a medium purple with the code #cc66cc. The bright hue of the color will be easy to see on the screen against the other objects in the dotProject environment.
```
 BODY {

background-color: #cc66cc;/*was #f0f0f0*/
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  font-family: Osaka,verdana,Sans-Serif;
  font-size: 10pt;
  }
```
Save the changes in a special folder labeled "altered" or in a new styles folder. I like to comment my changes in the CSS code as well to avoid confusion. If compression is an issue, save a special uncompressed version with comments for editing purposes.
Upload the changed style sheet and take a look. Wow! Even in black and white the change should look dramatic. It is easy to see what portions of the dotProject environment are affected by the background color style in the body tag. Any color can be used for the background, as long as it is in hexadecimal format.

[edit] Replacing the Background Color with an Image

Images can also be used in the background style. Using a small image will work best. The same image is printed recursively on the background of the page. Images ideally should be no larger than 16 pixels by 16 pixels. Using larger images can cause display problems on the screen, including module information not displaying properly.

Alter background style in the body tag of the main.css file. We will replace the background-color attribute with the more general background attribute and add an image element to the background attribute. Replace the background-color attribute on line number 3:
```
 background-color: #f0f0f0;
```
With this new background attribute:
```
  BODY {
  background-image:url(images/ywt_bg.png)
  }
```
Make sure the image path is to the images folder of the style. Save and upload the altered CSS file.
Upload the new image into the style/theme name/images/ folder of the dotProject installation.
Refresh the page. This background image is dramatic so the change can be easily seen. A more subtle background would be easier on everyone's eyesight.

[edit] Adding New Styles

New styles can be added to affect the appearance of text, links, and other components that control the presentation of dotProject elements. Always back up the original style sheet before making any changes. Styles "cascade" in a style sheet, meaning if two styles are specified for the same element then style listed last will be used. This is important to remember when altering fonts or links in a style sheet.

[edit] Tips for Creating a New Theme

Creating a custom theme can be a difficult process. It is much easier to alter a copy of an existing theme. Before creating a custom theme, look at the files of other themes such as wps_light and wps_redmond. Make a note of the changes made by the theme author compared to the dotProject default theme.

If the different examples are followed in this tutorial, the fundamentals of creating a new theme will already be in progress. Altering the icons, colors, fonts, and images of dotProject will create a unique look for your own dotProject environment.

Why am I making such a big issue of this? Creating a new theme or converting a dotProject theme to a complete CSS-driven one has several obstacles to overcome. There are images and other elements embedded into the code of the dotProject environment, making replacing certain colors difficult for theme creators. Theme creation can take a great deal of time. dotProject does a good job of using CSS, but it does use tables extensively. It may not be possible to have full control of how the environment looks without a great deal of effort.

[edit] Customizing Module Text Strings

When is a company not a company? When it is a group, government entity, club, or any other organized association of people. It is possible to change the titles, labels, messages, and other strings of text in modules to better suit the needs of an organization. Karen, an active dotProject developer originally proposed how to do this on the dotProject forums. We will walk through how to customize the company module as an example.

Log in to dotProject as an administrator and navigate to the System' Administration screen. Click on the Translation' Management link under Language Support.
The language dropdown should already have English selected. Choose common from the Module dropdown.
Enter the word Company in the Abbreviation text field and the word Group in the English String text field. Scroll down the list of text strings until the word Company is found. Select the checkbox next to the word in delete column.
Click the submit button to finalize the change. The screen will refresh with the success message Locales file saved and the new English string displayed in the English String column.

If there are multiple instances where a word, such as Companies, is combined with another string in a text field listing in the English String column, such as Clients & Companies, the text string Companies would be deleted from the text field listing leaving only the word Clients using the method described above.

To replace English String text field entries that contain more than one word, the full phrase must be entered in the Abbreviation field. So Clients & Companies would be typed into the Abbreviation field, and Clients & Groups would be typed into the English String field in the new entry location. The current text string entry would then be found by scrolling down the list and replaced by selecting the delete checkbox. Clicking the submit button would finish the process.

It is repetitive, but this must be done for each instance of an English String under the common selection of the Module drop-down where a text string such as Companies is combined with other words.

[edit] Additional References

For instructions on installation of dotProject, click here
For instructions on Troubleshooting Dotproject, click here

[edit] Source

The source of this content is Chapter 6: Customizing the Look-and-Feel of Project Management with dotProject: Implement, Configure, Customize, and Maintain your DotProject Installation by Lee Jordan (Packt Publishing, 2007.)

Retrieved from "http://www.themeswiki.org/Personalizing_the_dotProject_Environment"

Categories: Open Source | PHP/MySQL