Home arrow Site Administration arrow Page 2 - Drupal: Working with Themes, Templates, and Blogs

Modification of Drupal Pages and Site Name - Administration

This is the third part of the Drupal web development in Ubuntu tutorial. This article will cover some of the very important things you'll need to do to complete your Drupal website. The tasks discussed in this article will help you customize the site to make it truly yours.

  1. Drupal: Working with Themes, Templates, and Blogs
  2. Modification of Drupal Pages and Site Name
By: Codex-M
Rating: starstarstarstarstar / 2
October 26, 2010

print this article



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:



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:

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

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

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


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:

>>> More Site Administration Articles          >>> More By Codex-M

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Coding: Not Just for Developers
- To Support or Not Support IE?
- Administration: Networking OSX and Win 7
- DotNetNuke Gets Social
- Integrating MailChimp with Joomla: Creating ...
- Integrating MailChimp with Joomla: List Mana...
- Integrating MailChimp with Joomla: Building ...
- Integrating MailChimp with Joomla
- More Top WordPress Plugins for Social Media
- Optimizing Security: SSH Public Key Authenti...
- Patches and Rejects in Software Configuratio...
- Configuring a CVS Server
- Managing Code and Teams for Cross-Platform S...
- Software Configuration Management
- Back Up a Joomla Site with Akeeba Backup

Developer Shed Affiliates


Dev Shed Tutorial Topics: