Find and Edit Drupal CSS Problems
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
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
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
We’re going to use a default Drual install for this tutorial.
Diagonse Your Problem
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
Click “CSS” in the toolbar and then click “View Style Information”
Click the item you want to edit
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
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.
{loadposition drupalnewsletter}