(Reading time: 2 – 3 minutes)
Great website design results in return visitors.
Problem: Making small changes to the design of a web page sometimes results in large effects.
Practical WordPress Tip: Test small style changes in your website design using inline styling before hacking your CSS file.
Here’s how to override the styles you’re interested inline:
- Here’s an example inline style which colors text within a paragraph red:
<p style="color: red;">. Colors are easy. Experiment with borders, padding and margins for more challenge. - Once your inline style is correct then create a class in your style file with those atttibutes. For example:
1 2 3
p.redtext { color: red; }
Make sure to back up your CSS stylesheet before you make modifications.
- Then replace the inline style:
<p class="redtext">. - If it doesn’t work, check your spelling, try again. Spelling is a very common cause of blunders.
- If it still doesn’t work, check how the style sheets are being loaded.
- Then check how the selectors are being used. For example, Thesis theme for WordPress requires a .custom class when you modify the CSS in a custom style sheet.
Why: When you’re operating on a running site, and I know that’s what you do because I do it too, it’s a little like doing open heart surgery with the whole family in the audience. If you mess it up, your site goes into cardiac arrest, publicly. Using inlines to handle small style tests reduces the risk to your website. If you are going to make major changes, you should install a local working environment and rebuild your CSS first, then deploy.
Previous Practical WordPress Tip: Practical WordPress Tip #3: Keep A Few Spare Posts Handy
Next Practical WordPress Tip: Practical WordPress Tip #5: Keep rough drafts ready to publish at any time
Do you have a Tip? Would you like to write a Practical WordPress Tip? Each Tip is very short, and focuses on a single action that anyone can use right away, no programming required! If you have a Tip that fits into this series, and you’d like to publish it here on Website In A Weekend, send it on!
Would you like more? Send me a letter...
{ 3 comments }
May I suggest an approach that seems slightly faster to me?
When tweaking a live site (or even a copy on a test system) I use the Firefox Firebug plug-in to try what-if changes, local to my browser, by editing the (browser’s cached copy of the) .css file directly. I don’t worry about making mistakes because only I can see them. After testing the what-if tweaks locally, I make the same changes on my test site in the real .css file. Only after testing that, to ensure all the changes were copied correctly, then do I deploy the changes to the production site.
The technique you describe helps when tweaking appearance for browsers other than Firefox (if the browser doesn’t have a Firebug-like extension).
@Mike, That’s a nice little trick! I didn’t know Firebug had that functionality. I’ll have to try that out.
I like it!
I smell a screencast lurking, in the near future…
Comments on this entry are closed.