Modification of Drupal Pages and Site Name - Administration

There are times when you need to edit the text of your Drupal pages as well as the site name. To edit the site name (e.g changing "About our travel agency" to "Welcome to my Drupal website"), go through the following steps:

1. Click Administer -> Site Configuration -> Site information.
   
   
2. Under "Name," assign a new name for your website. This will be reflected in the website header section.
   
   
3. Click "Save configuration."

To modify the text of your existing Drupal pages:

1. Go to Administer -> Content management -> click "Content."
   
   
2. Click "Edit" for each "Page" type.
   
   
3. You can then change the content of that page. If you are still developing your website and it does not have actual text, you can use http://www.lipsum.com/ as explained earlier in this article to generate sample text.
   
   
4. Click save to implement the changes.

This is how the website looks after implementing all the changes discussed in the above sections:

Adding a Background Image and Colors to Your Drupal Theme

To add a background image:

1. You can go to a website that offers free background images, such as http://www.designedtoat.com/backgroundsmain.htm. If you have an existing background image, however, you could use that.

Suppose you will use this image: http://www.designedtoat.com/backgrounds/blue7.jpg

You need to download it to your Ubuntu desktop.

2. In Ubuntu, go to Applications -> Graphics -> GIMP Image Editor.

3. In GIMP, go to File ->  Open and then open the image blue7.jpg

4. In GIMP, go to Image -> Scale Image and then set:

Width: 1 pixe l
Height: 300 pixels

Leave the resolution both at 72 pixels per inch. Scaling the image is done to reduce the file image size, which is beneficial for fast loading of the web page.

5. Click "Scale."

6. Go to File -> Save As, save the file as: background.png, and then save the  image in drupal/themes/fusion/fusion_core/css/images.

Important note: if you cannot see the "images" folder, you need to create that folder  first.

7. To implement this image into your Drupal theme, you need to edit the css file. Go to drupal/themes/fusion/fusion_core/css, and then open style.css using your favorite CSS editor -- or gedit will do.

8. Look for this body tag CSS entry:

body
{

}

If you cannot find that one, you need to create it, and then include a CSS line that instructs your theme to use the background image you specified previously, so it will be:

body
{
background: url("images/background.png") repeat-x;
}

You need to add the above code just below /*HTML elements. For example:

9. Save the style.css file and then reload your website in the web browser. This is how your website should now look:

You might observe that the background image is only implemented around one half of the web page's length. To correct this, you will be adding a background color similar to the background image color.

Adding a Background Color Similar to the Theme Background Image Color

To do this:

1. Go to the Linux terminal and in the prompt, type grabc. This is a program that will pick up color on the web page. Example:

codex-m@codex-m-desktop:~$ grabc

Note: If you do not have grabc installed, you can install it using the Synaptics manager.

2. After you press the Enter key, your mouse cursor will change to an arrow. Point this arrow to the last row area of your background image (where the color is still light blue) and then left click your mouse to get the color code. It will then pick up the color. For example, the results will be:

codex-m@codex-m-desktop:~$ grabc
#e8f4fb
232,244,251

3. Reopen your theme style.css file which you edited earlier and change:

body
{
background: url("images/background.png") repeat-x;
}

TO:

body
{
background: #e8f4fb url("images/background.png") repeat-x;
}

It will now implement the background color aside from the background image.

4. Save style.css. Reload your Drupal website in the web browser, and  the colors will be now evenly distributed throughout the page: