Friday, May 7, 2010

What are the non-technical Partners doing?

Okay, so I had a few notes (always having expected a recording of at least one of the sessions of customizing  WordPress), and knew that the hero shot problem was a custom field... but what did he tell us?

So finally, the techy kicks in and I says to myself, "Self, where's the code?" I opened on browser window with the screenshot that my page  is meant to look like. Opened another tab in that window with the current page and checked the code. No URL for the image.

Okay, if I were coding this by hand... in the other browser where my WordPress administration is open,  go into the theme editor and check the template. Okay, there's the tag, oh, look, there's the custom field it's meant to call.

Open another tab in that browser to the post and add the custom field. Save. Whadya mean value for the field? Oh, I'll bet that's the URL. What did he say about Media? Try uploading the heroshot, even though it's on the server, can't figure out how to "attach" it, and by now a few neurons are connecting. The template includes the correct path to the images folder, so I just need the file name. Enter the file name in the value box for the custom field heroshot. Refresh other browser window... whalla, that one down.

Now my text is a dark gray on an almost black background. The screenshot is of black text on a light gray background. In the browser with the admin panel open, edit the post AGAIN, looking for background color in the WP text formatting area... (meanwhile already coding it in my head... oh, wait). If I were coding this in DreamWeaver, I'd just tweek the CSS file. Hmmm, the CSS that is called in the page template is not available in the termplate editor.

Open CSS file in my FTP client (could have used DW also), find the right div tag from the browser window with the current page open, and check out the code. Paste current CSS code into a temporary text note JIC, Switch the background and color, and sure enough, the CSS had been wrong. Now I've got the lighter background and darker text, but the lighter background is still darker than the screenshot.

Fire up Photoshop Elements (still in 3.0 so it isn't quite right in Windows 7, need to upgrade), open the screenshot, color pick that background color, copy and paste the hex code into the right CSS file, save, upload via FTP, reload the browser window.... finally at least that's right.

Meanwhile I notice the heroshot takes a bit to load, so I open it in  PSE to check the size... 154 kb. Dudes, I've been coding web pages since 1999 on dialup, optimizing graphics should be a habit. So I use PSE\s nice little utility "Save for Web", and even at 50% quality it's down to 29kb. Save as heroshot-lite, upload, change value in the custom field, reload, sigh of relief.

While PSE is open... open the logo, crop to the image, save as a jpeg for a favicon. Open up irFanView, size to 16x16 pixels, save as favicon.ico, upload to home directory. As someone who appreciates the visual cues on the browser tabs of favicons and favorites way too many pages all the time, I like to have a favicon for any site I'm working on.

I have miles to go figuring out the other templates I'd planned on using for review pages and product pages, and I can read CSS, HTML, optimize my own graphics, and use my FTP client to do on the spot editing of text files. I have no idea how lost someone might be if they have no real tech skills in this field.

Meanwhile I really, really need to be finishing up the content, which is meant to be my main task.

No comments:

Post a Comment