Drupal

Find and Edit Drupal CSS Problems

September 2, 2010 | Written by Steve Burge

The purpose of this tutorial is to show you how to find and fix problems with your Drupal templates. We're going to focus on CSS issues such as fonts, colors and padding.

Download and Install Firefox

tutuploadsmedia_1272633877883_c86f942595ae98592417dbc295fccafd.png

No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from http://www.mozilla.com/firefox and install.

Install the Web Developer Plugin

tutuploadsmedia_1272633999346_0ec3909fa9a6aa31b4df38cd3b1a07ab.png

Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".

Visit Your Joomla Site

tutuploadsmedia_1283465887819.png

We're going to use a default Drual install for this tutorial.

Diagonse Your Problem

tutuploadsmedia_1283465932340.png

In this example, our welcome message is too small. We'd like to have "Welcome to your new Drupal website!" in larger text.

Start the Webdeveloper toolbar

tutuploadsmedia_1283465966628.png

Click "CSS" in the toolbar and then click "View Style Information"

Click the item you want to edit

tutuploadsmedia_1283466041231.png

Hover your mouse over any part of the page and a red box will appear around it. Click on that area.

See the CSS Code at the bottom of the page

tutuploadsmedia_1283466068610.png

At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 170%. We now know exactly which line in which file to edit.


 

 


To sign up for complete classes and support

 

Add comment