Sometimes you see something that’s close to right, but just needs a little tweak. In that case, you could call in your web designer, or you can take a look and see what would happen if you did a tweak yourself.
I’m not advocating that the pastor get arms and elbows into the code of the church website. I just know that sometimes churches hire a designer to create the site and then need to change something minor after the designer has been paid and moved onto a new job. At this point, someone local is usually tasked with keeping the website up-to-date. Let’s say that’s you. Let’s say you know a little about CSS and HTML, but you wouldn’t dare try to make a living at it. Still, you’re the most qualified person at your church, so you get the job.
Everything is fine until you try and use the “blockquote” feature for the first time. It’s just a little too light against the background, so what do you do? Do you get approval to hire the person who did the site eighteen months ago to fix it?
If you’ve got Google’s Chrome browser, you already have a powerful tool to ferret-out where the offending color is located and in what CSS document. It’s called “Inspect Element.”
Inspect Element
Bring up the offending page in Chrome and right-click (or command-click in OS X) on the offending piece of the page. From the menu that shows up, you should see a choice near the bottom called “Inspect Element.” Click on that and the bottom third of the page will appear with a bunch of HTML on the left half and CSS on the right half.
If you selected the right element, it should highlight in blue on the main page. If you didn’t, just use your mouse to scroll over all the html until you find the right element. You may need to click on the little triangles next to a chunk of HTML to expand it and show a more specific section. Click on it and you’ll see the CSS on the right change to reflect the CSS that’s in use for that element.
In our example, the page is white and the blockquote is a light gray. You see the “blockquote” element blockquote: {
in the CSS, but you’re not sure if the font color will actually change it or if it’s somewhere else, or worse if it will affect things you don’t want to change.
color:#f0f0f0;
}
Here’s a quick test. Click on the color and change it to something obvious like a pink. blockquote: {
If that does the trick, you can find what stylesheet this CSS is located on just by going to the right and hovering your mouse on the file name that’s underlined in the same box as the attribute you just tweaked.
color:#FF99CC;
}
If it didn’t do what you expected, keep looking. Sometimes one change affects a bunch of things, so you might need to add a div or class to the specific piece you want to tweak. Play around all you want in the inspect element box because it only affects what you’re seeing in your browser, but not the site itself. The actual CSS file is where it gets serious.
This is actually a great way to learn CSS, too. If you see an attribute that you don’t know what it does, click on it and uncheck it. Checking it restores it.
Remember, that “Inspect Element” is just a tool to find problems or learn what things do. Use it as another tool in your tool box to help out.
What tweaks have you had to make to websites you didn’t create? Have you ever changed one little thing and regretted it?
[Image via Paul Clifford]
Speak your mind...