Wordpreneur.com

As a working example, let’s actually try to modify a WordPress theme a bit and see if we can tweak it to look more to our satisfaction.

If you’ll remember, my favorite WordPress theme is Kubrick, but its justified bodies of text is not to my liking. So, let’s change that and make those bodies left-justified.

As I mentioned in part 1, I’m not up (nor do I really want to be up) on all the technicalities and specifics of today’s programming code; I just look up what I need to know when I need to. But this much I do know: WordPress uses something called Cascading Style Sheets to control much (if not all) of your site’s look-and-feel properties. And these Cascading Style Sheet properties are often stored in a separate file with a .CSS filename extension.

1. OK, let’s say that in our sample WordPress installation, the current theme is already the default theme, which happens to be Kubrick. By poking around, we learn that navigating to Presentation | Theme Editor gets us to the part where we can actually start messing around with the WordPress theme’s source files.

2. Chances are, the CSS file we want (STYLE.CSS) is already active for editing. If it isn’t, just click on the Stylesheet file link on the right of the screen.

3. Click anywhere within the editing box, then press the CTRL+A key combination to select all of the text. Press CTRL+C to copy the selected text to your Clipboard.

4. Launch Notepad.

5. Press CTRL+V to paste the contents of your Clipboard into your Notepad document.

6. Save the document to your hard disk; name it STYLE.CSS.

7. Save the document again, this time naming it someting like STYLE 2.CSS or whatever, as long as it communicates to you that it’s a later (2nd) version of your original. Now you can begin working on modifications, since a copy of the original is safely stored on your disk and no longer the active file being edited.

8. Here’s where we can now try to impress lesser mortals and fake knowing something about CSS. Heck if we know how to specify text justification in CSS files, let alone where in the file we can actually make body text left justified. But since we’ve got nothing better to do, we just scroll and browse through the file… and there it is: We notice in some lines, we see the word justify.

Hmmm. What if we change every instance of the word justify to left? It’s not like computers are big on essay-type questions in specs, so the word “justify” isn’t really used for any other purpose than text alignment, we reason.

So we do just that, change every instance of justify to left (which, for Kubrick, should only be twice).

9. Save the file, CTRL+A to select all and CTRL+C to copy all of it to the Clipboard.

10. Go back to WordPress and edit STYLE.CSS (steps 1 & 2). Essentially, you want to replace all the old STYLE.CSS content by pasting in the new edited version that’s currently stored in your Clipboard. The way I usually do it is press CTRL+A while in the edit window to select all the text, then CTRL+V to paste the Clipboard’s contents over whatever was selected (everything).

11. Near the bottom of the screen, click on the Update File button. That’s it.

Time to test. Call up your blog on your browser. Just to be on the safe side, you’ll want to refresh (F5) your browser at least once (twice better, I think) to make sure you’re viewing files that have your changes incorporated, not an earlier version that your browser stored in its cache.

Voila! Our change worked. The body text is now left-justified.

Is this the safest way to make these mods? Heck no. Obviously, knowing exactly what you’re doing is infinitely more desirable. But for those of us in either the “Who’s got the time?” or the “Who the hell cares?” camp (or both), the guessing game we just did is the next best thing.

If things went kablooey, just copy and paste and restore the previously saved version of STYLE.CSS. That’s all there is to getting things back to working again.

You may be even curious enough to fiddle around with the other look-and-feel settings you see in STYLE.CSS (things like fonts and sizes and colors and underscore styles and hover behavior, etc. etc. etc.). Knock yourself out. Just remember to make those backups!

I also recommend you only make one change at a time for every saved version of a file. Besides making it easier to determine what change may be causing a problem, this will help you backtrack precisely to a specific point if needed.

NOTE: Although not quite as simple as CSS files, it’s this very same technique that you can use to fiddle with actual program source code files, if you’re so inclined. But one caveat: Mess around with your source code files at your own risk.

Share This

Popularity: 36% [?]