Themes and Plugins

I spent the evening installing and activating the plug-ins I plan to use on the new site. Mostly the same one’s I’m currently using, until better come along, however, since I won’t be using one of the advanced templates which automatically use several plug-ins, like Ultimate Tag Warrior (UTW), I had to develop the pages to take advantage of them myself. Not too difficult, as long as the documentation is sufficient, and that for UTW is fairly extensive, and nicely linked from the admin panel. It took me a bit to get the hang of editing pages based on templates though. The pages that use templates are a type of ‘place holder’ and don’t necessarily contain any content themselves. They only give a name and URL path to the template to be called. That was a tricky thing to get used to!

I did run across two plug-ins that seem incompatible with the newer version of WordPress (2.1.3), that I have on my development server. I will investigate the details on these tomorrow to confirm it is a problem, and see if there are updates, or if I can fix it. I was able to do that with a problem I found with the Technorati Rank plug-in I found the other day, and reported to the author. The two plug-ins I was having problem with, Brians’s Latest Comments (1.5.8) and Smart Update Pinger (2.0) both caused the plugin-page to not display properly when enabled. I will investigate, and report what I find.

I had hoped to launch the new design tonight, but I have a bit more work to do. It will be another day or two before it is complete. But, it is coming along nicely. I basically have to apply the design elements that I have done for the primary template page, to the other specialty pages. I also still have to convert the tab navigation to a cross-browser supported CSS technique.

Rounded Corners and Drop-Shadow Borders

Success! We have a good-looking rounded corner that works for both Firefox & IE (version 7 at least.) In digging for techniques, I found this nice index of possible rounded corner techniques at the CSS-Discuss mailing list site. If you are not already aware, CSS-Discuss is the premier mailing list if you are interested in leading-edge CSS information.

As the list is arranged in order from best to least browser support,  I decided to look through the ones at the top. One site name caught my eye… Roger Johansson’s  456 Berea St! I’ve found a lot of great resources there in the past, so that was my first, and last, stop. While the link on the CSS-Discuss page goes to an older version of the technique, it has been updated in the post, Transparent custom corners and borders, version 2. You may need to go back to the original post, and the one on customizing the graphics to help create your own. Thank you again, Roger!

This technique using JavaScript to adjust the DOM content of the document you want to add the borders to, thus not requiring heavy additional mark-up to the original document. I tried another technique earlier, that required adding additional <div>’s at the top & bottom where I wanted to the add the borders. It worked, but it wasn’t pretty! For this one, I simply have to reference the JavaScript file which is stored externally, add an additional CSS class to the <div> I want to have borders on, and add the CSS. Done! Well, almost. You do need to create the graphic used for the border. I think I spent more time on that than I did anything else! I’m not a graphic designer, so I don’t usually do ‘fancy stuff’ with graphics. So, it took me a couple tries to get what I wanted. I also am using the border technique a little differently than Roger shows.

In Roger’s examples, he is using a light background, so using the drop-shadow boder with transparency works nicely. However, in my case, the background is dark, so the drop-shadow style doesn’t work well, so I switched to an ‘internal shadow’, with a hard external border. This was important, as I had to add the background color to each corner of the graphic, otherwise the light background color would extend outside the box, squaring it off again. If it was a light color internal & external, this would not have been necessary. Here’s the two graphics I used:

The Box

[image no longer available.]

The borders:

[image no longer available.]

After adjusting the CSS for the height and width of the corners of the box, and the width of the left & right sides of the borders, it worked like a charm. In case you are not familiar with it, this uses the ‘sliding doors’ technique–as described by Douglas Bowman at A List Apart (another good site to watch!)–to use only two graphics to get all the pieces you need for the corners, as well as the sides of the box. Here’s the result:

[image no longer available.]

And here it is in IE:

[image no longer available.]

You can only tell them apart by the tabs now. As you may guess, that’s the next place this technique will be applied!

How to Create a WordPress Theme – Part 7, Margins & Font Settings

I discovered the problem with IE was that it was not handling the CSS float on the left column correctly. By supplying explicit top margin settings, it is now usable. Here’s what the design looks like in IE:

[image no longer available.]

As you can see, the corners are square since it doesn’t understand CSS3 border-radius. I may go back later and do the graphic based rounding, but it’s so much more trouble than CSS. At least the tabs are accessible now. You may note if you look closely, that the top of the first post is no ligned up with the top of the sidebar… I’m going to have to fix that. I just noticed it as I took this screen shot. Here’s how it should look in Firefox:

[image no longer available.]

Much nicer if I do say so myself! I decided to change the background to the entire page to the dark green rather than the light green with dark borders. The light green seemed to be giving the tan background a greenish cast visually. I know it’s just my eyes due to the colors being adjacent, but I didn’t like it. I’m still not quite happy with the shade of the tan I’m using, but I’m working on it. My target is something I would call ‘sand’. Mary Carter at eFuse has written a nice description of the adjacent color phenomenon.

I’ve also made a change in how the <code>blocks will appear:

[image no longer available.]

Using CSS the property overflow: auto, I’m able to let wide sections scroll, while the narrower ones don’t have scroll bars. If you use overflow: visible, it will show scroll bars even when they are not needed. Auto works much nicer. I’ve changed the background color as well as set the font to monospace for <code> as well.

Finally, I customized the footer, giving myself credit for the theme! I’m calling it ‘Earthy’. Tweaked the spacing at the bottom as well to not waste so much space.

[image no longer available.]

Behind the scenes, I also tweaked the Feeds to exclusively use my FeedBurner account so my statistics stay correct, as well as offering all three kinds of major feeds, RSS, RSS2 & Atom. Plus a Comments Feed.

Next step is replicating any specifics to the auxiliary pages, like the single post display & archives. Then the selection of plugins & configuration should be all that is left!

CSS Issues Firefox vs. IE

After reading Eric Meyer’s post, Reworked Reset, and it’s predecessor, Reset Styles, and his follow-up explanation of some of his choices, Reset Reasoning, I thought I may have a clue as to my troubles with the new template design. I should have known all this, but having been rusty in doing original design work, I had forgotten this basic practice. Learn it now! It will save your sanity someday.

However, my problem remains with the IE weirdness. The reset CSS made a few things more consistent, but the strange desire for IE to want to position itself differently is still unexplained. The post overlaps the tabs, and the sidebar seems to be intermittent.

I think I just found a clue! In looking at IE, I realized it’s default page looked strange… the graphics were all jaggy, like they had been enlarged improperly. I thought about it a minute, and decided to check my screen resolution settings. While the screen is normally at 1600×1200 (it’s a 20″ flat panel), the dpi resolution was set at 125% or 120dpi for larger fonts! I’m suspecting that the jaggy images was being caused by this. I’ve reset it, but it needs a system restart to enable, so I’m going to pause here and do that so I can report my findings… hang on!

Oh, well. Restart didn’t help… the fonts were already more normal sized before the restart, but the graphic problem was fixed at least. My overlap problem remains:

[image no longer available.]

Must be something else in IE that is effecting it. This will be one of those battles I don’t want to fight, but can’t ignore. It’s just too obvious, and my target audience is expecting perfection. Or at least nothing as obviously wrong as this. I can live without the rounded corners, but not this. It is a functionality issue also, as it is difficult to get to the tab links. We’ll dig into this first thing in the morning with a fresh cup of coffee in hand!

Creating a WordPress Theme – Part 6, CSS3 Rounded Borders

CSS3 Rounded Borders was a success! Well, for Firefox users anyway! Luckily, I checked my stats and find that 65% of my visitors are Firefox users… mostly v2.0, but a few v1.5 users are still out there. Time to upgrade Firefox folks!

The rounded corners technique using CSS3 method is very easy compared to what I went though to create the graphics for each corner yesterday. Well, creating the graphics wasn’t so bad as getting all the pieces in place to position them properly–and then I still wasn’t satisfied. So, I’m glad I remember this technique existed. After reviewing the sample at CSS3.Info using border-radius for Mozilla & Webkit, I came up with the following:

[image no longer available.]

Note the rounded corners on the post background, the sidebar, and even the tabs. I thought I was going to have to reduce the radius for the tabs, but actually they look good with the same 25px radius the other corners are using. I’ve also got a shot of the middle of the page to show you how I’m separating the posts with the background and a little separation:

[image no longer available.]

OK, OK! You want to know how to do it!

First the rounded corners. Pretty much straight from the page at CSS3.Info:

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: #003712;
border: 1px solid #CCCCCC;

Works very nicely. The border is just barely visible gray to help blend the edge a little.

The tabs are similar, however I used the specific CSS3 properties for just the bottom-left & bottom-right corners.

-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomright: 25px;
background-color: #003712;
border: 0 1px 1px solid #CCCCCC;

Note, the border being applied only to the left, right & bottom.

I’m still tweaking the size & font on the tabs, as it doesn’t feel quite right. I also took a quick look at it in IE7 to see what it would do with the rounded corners… not pretty! Besides not handling the border-radius property, it also didn’t seem to be handling some of the top margins or something. The first post was shifted up & overlapping the tabs. I’ll have to look into that… though I would rather ignore it! It might be a simple validation issue–I have not been able to validate the page yet since it’s on an internal server. The CSS has been validated by TopStyle, and it doesn’t like the Mozilla- & Webkit-specific properties, but that should not be too much of an issue. They should be just ignored. I hope!

Rounded Corners with CSS3

After a few hours sleep, I remembered that CSS3 was supposed to support rounded borders! That’s the way this should be done! Amazing what sleep can do for your memory. I found an example of the technique at 24 Ways by Andy Budd, in his post: Rounded Corner Boxes the CSS3 Way. The official documentation from the W3C for CSS3 Backgrounds and Borders Module is also available.

I found several sites with demos of the CSS3 technique, but they seem a little old. Of course that may be because the W3C seems to take it’s sweet time with some proposals: Cascading Style Sheets Current Work. If you follow the link for the CSS Backgrounds and Borders module you will find it was stated in September 2001!

CSS3.Info seems to be the current resource on the status of CSS3 if you would like more information. I’m going to experiment with it tonight in my new template design, and you will see how it goes!

Creating a WordPress Theme – Part 5

Just a quick update on the template progress… I’m working on using CSS to create rounded corner effects on backgrounds that will be used for the sidebar & posts. I got the basic concept from many places, but Adam Kalsey has a good post on the Rounded Corners in CSS technique. Here’s an in-progress snapshot of what I’ve got so far:

[image no longer available.]

Notice the rounded corners on the sidebar background. It looks pretty good here in a low-res snapshot, but I’m tweaking a single pixel border that doesn’t want to cooperate in the right combination with the graphics. It has to be positioned to appear along the top border, between the graphics (there are individual graphics for each of the rounded corners), but not extend out the full width of the enclosing div. I’m trying to avoid using a full-width image to accomplish this.

There is a similar setup at the bottom of the column, however, while I was working on the top, the bottom disappeared! I think it is being covered up by the background of the sidebar, though it shouldn’t be doing that. I’m focusing on one end at a time, and learning more about editing graphics at the pixel level as I go! I plan on using something similar for the separation of the tabs too.

CSS Editing Trials, Tribulations & Tools

While working on the new template this weekend, I was having problems with getting the sidebar to do what I asked. Come to find out, there was another section of the CSS file that contained additional information for the #sidebar style. Argh! While I generally liked the concept of separating the different sections of the stock WordPress CSS file for editing, I’ve decided after this, that I really don’t like it. My general policy is to keep related items close together as possible, with all the applicable sections in one definition when I can.

When I complete the design, I am planning on removing all unused definitions for clarity. I thought the idea of starting with the base CSS was a good idea, but, I’ve clearly had second thoughts on that! It’s probably a case where if you wrote it yourself, it might make sense, because you would know it well. However, when using someone else’s code as a starting point, it doesn’t work as well. We all have our own ways of doing things, no one way is right and the other wrong–just different.

While I’m here, I wanted to point you to one of my favorite tools for editing & validating CSS: TopStyle by Stefan van As, formerly BradSoft & NewsGator Technologies. Sorry, it’s for Windows users only. The y are also the creators of the NewsGator & FeedDemon news readers & RSS aggregators.

How to Create a WordPress Theme – Part 4

I made good progress on the To Do list last night:

  • Install copy of WordPress on development box
  • Import backup of live site content to provide some content for the development site
  • Create a bare-bones set of template files
  • Review the default CSS before beginning development of custom CSS for new template
  • Setup CSS for basic layout
    • 2-Column wide left, narrow right, approximately 75% – 25% split
    • Site width: 1024px (current width ~800px)
    • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
    • Header will be short, ~ 5% +/- of screen height
    • Footer will be one or two text lines
  • Select color scheme
  • Select photo / graphic / logo for header and develop site-wide navigation in header

Pretty good work!

I want to show you a screen capture of the default starting point for the template, which is the supplied Kubrick template:

[image no longer available.]

Look familiar? That’s what you get after an initial install of WordPress if you don’t make any changes.

To show you just how much work is being done by that default template, here is what it looks like if you remove all the CSS that is being applied:

[image no longer available.]

Not very pretty, would you say? Well, after considering the two, I decided to start with the default template, and then tweak the settings from there.

Here’s a sneak-peak at what I’ve come up with so far:

[image no longer available.]

What do you think? You can see the result of a lot of the design decisions I’m making:

  • Width 1024px
  • Header graphic gives mountain scene
  • Leads to a blue, green, brown earthy palette for colors
  • Drop down tabs from header for page-level navigation (still more work to be done here)

I’m still working on getting the column widths where I would like, so you see the sidebar out of place still. Fonts have not been adjusted at all yet, for color, family or size.

Pretty good start for a few hours work. I think I will make my target launch of May 1 with no problem!

Creating a WordPress Theme – Part 3

I’ve made the decision this morning to target a launch date for the new theme for May 1, 2007. With that in mind, I’ve got 10 days to get it done. To that end, I’ve created a To Do list of items to be completed:

To Do

  • Install copy of WordPress on development box
  • Import backup of live site content to provide some content for the development site
  • Create a bare-bones set of template files
  • Review the default CSS before beginning development of custom CSS for new template
  • Setup CSS for basic layout
    • 2-Column wide left, narrow right, approximately 75% – 25% split
    • Site width: 1024px (current width ~800px)
    • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
    • Header will be short, ~ 5% +/- of screen height
    • Footer will be one or two text lines
  • Select color scheme
  • Select photo / graphic / logo for header and develop site-wide navigation in header
  • Select items to be included in sidebar:
    • About – Should I include picture of me?
    • Search
    • Feeds
    • Email subscription option?
    • Archives – Perhaps better in header site-wide navigation?
    • Categories and/or tag cloud?
    • Blogroll – Move to separate page?
    • Space for affiliate ads
    • Space for site support links (Blogflux currently)
  • Setup footer with statistic tracking codes, etc.
  • Plan post layout and post-related plug-in use.

I’m sure I’ll come up with other details, but that will be the basic flow.