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:
To modify the text of your existing Drupal pages:
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
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:
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:
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:
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:
blog comments powered by Disqus