Category: Themes

Blog theme development

Posted on

Earthy WordPress Theme Launched!

Yeah! It’s done! Well, is a web site ever done? Don’t answer that!  🙂

It’s live, anyway. I’m pleased with the general look, though a few of my visitors may feel lost for a while! The design was focused on creating something new & unique that would be identifiable with this site, as well as functional. I dropped a few items on my earlier to-do lists after review, and have delayed others. In the coming weeks I will point out how certain things were accomplished, the plug-ins used, and all the details.  For now, I’m just going to sit back and relax a bit, and focus on why were all right blogs–the content!

I invite feedback on the new look & feel of the site. Please leave comments and share what you think. I know there are some little glitches that showed up in the launch, like that Technorati Rank graphic not wanting to center… it is on my server at home! That’s strange. But, now that I can sit back and take it all in, I can focus on fine-tuning as we go. Thanks for being patient while I got this completed. I look forward to hearing everyone’s comments.

Posted on

Tab Delay and a Successful University Site Launch

Well, I thought I was going to make it tonight, but I guess not. Most work is done, but I decided to change the approach I was using on the CSS tabs… So, it’s taking me a wee more time than I planned to get that just right. Everything else is ready, except the last minute things like dropping in the stats tracking codes. I want to save a copy of the theme without the codes, so it could be distributed if someone actually liked it… 🙂

While my own site isn’t ready, we did have a successful switch over to our new site design at work, so at least something went right today! Look forward to finishing tomorrow…

Posted on

Redesign Status Update

I’ve made good progress on the latest to-do list:

  • Review plugin use and confirm all are setup
  • Make notes of configuration changes that need to be done inside WordPress admin tool after installation of the template
  • Setup tabs with rounded borders using graphics
  • Check pages for IE support code & GIF graphics for rounded corners
  • Add Latest Posts to sidebar
  • Widen sidebar
  • Finalize color choice in post metadata
  • Consider post date ‘calendar’ format graphic or color change
  • Expand About page content
  • Posts by Category page needs format still
  • Posts by Date page needs format
  • Custom Category Templates for each of standard categories (Tools & Techniques) with header lead-in to content
  • Update blogroll and breakdown by category, perhaps using built-in link management system?
  • Add RSS Feed icon & links near top & remove from footer
  • Confirm RSS auto-discovery code is in header
  • About section in sidebar, with photo?
  • Ranking links (Alexa & Technorati)
  • Blogflux links (uptime, directory, mapstats)
  • Feedburner chiclet
  • Stats link codes
  • SEO code
  • Review online version for customizations to back-port to new design
  • Affiliate links (Sedo) others? HitsLink?
  • Last 50 entries on Archive page
  • Mullet Home page?
  • Review for standards compliance

I’ve made good progress, so I should be able to launch the new design tomorrow night. Funny, we are also launching a new site at the university tomorrow night–luckily I’ve scripted that so it should only take a few seconds to cut-over to the new design. We are just planning on doing it Sunday night so it will be up Monday morning when people come in as was announced. I guess you can consider this blog the same way! Weekends are normally a slower time for views of the blog, especially on Saturday, though this weeks stats are looking pretty good! Hopefully my visitors on Monday will have time to leave comments on the new design. I’ll do a launch post when it goes live tomorrow to celebrate the launch, then Monday I’ll post a specific request for feedback. I’ll really be glad to be able to get back to thinking about content, than about the design and structure of  the blog, though that’s some of what I will be doing! Keep watching…

Posted on

Final To Do List for Site Redesign

Here’s where we are so far in our progress on the earlier established to-do list:

  • 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

I’ve accomplished all the items on the initial plan! Until I was writing this, I hadn’t realized that all the original goals had been accomplished. That’s nice to realize! Goes to show that putting your plans and goals in writing and monitoring them can sometimes lead you to see progress in areas you didn’t realize you were making. That’s a subject for a whole other post. Too much philosophy for this one!

While I have accomplished the original goals, it does not mean that I haven’t changed and/or expanded on them while in progress. Or there may be some minor implementation issues left to finalize.

Here’s what I see still needs to be complete before launch of this redesign:

  • Review plugin use and confirm all are setup
  • Make notes of configuration changes that need to be done inside WordPress admin tool after installation of the template
  • Setup tabs with rounded borders using graphics
  • Check pages for IE support code & GIF graphics for rounded corners
  • Add Latest Posts to sidebar
  • Widen sidebar
  • Finalize color choice in post metadata
  • Consider post date ‘calendar’ format graphic or color change
  •  Expand About page content
  • Posts by Category page needs format still
  • Posts by Date page needs format
  •  Custom Category Templates for each of standard categories (Tools & Techniques) with header lead-in to content
  • Update blogroll and breakdown by category, perhaps using built-in link management system?
  • Add RSS Feed icon & links near top & remove from footer
  • Confirm RSS auto-discovery code is in header
  • About section in sidebar, with photo?
  • Ranking links (Alexa & Technorati)
  • Blogflux links (uptime, directory, mapstats)
  • Feedburner chiclet
  • Stats link codes
  • SEO code
  • Review online version for customizations to back-port to new design
  • Affiliate links (Sedo) others? HitsLink?
  • Last 50 entries on Archive page
  • Mullet Home page?
  • Review for standards compliance

As you can see, even though I have accomplished a lot, there is still much to do. But, most of it is little stuff in general, the details you don’t see or think of, until you get farther along in any project. This is one of the reasons project planning is not an exact science. While an architect can design a house, the carpenter that builds it still have to make a lot of decisions on how to implement the design. Here, I’m the designer and the carpenter.

Posted on

Redesign Update

I’ve been working on finalizing the new template tonight. I’ve got all the secondary pages (archives, blogroll, about) updated to use the new design. Simple really, just add a new CSS class where it belongs, and all is done naturally! That is the way CSS should be used. Of course, I created some new template pages, one as a customized archives page with a few tweaks, and I decided to move the blogroll to it’s own page. It was just too long for the sidebar. I do plan on shortening it… I can’t keep up with them all now!

This leaves me more room in the sidebar for other ‘toys’, or affiliate marketing links. I might make a ‘top 5 of the week’ selection of blogs that make the slot with extra promotion. Lots of opportunity now that I have the space.I’m not sure everyone will like my color palette choice, as it is a departure from most sites I see with lighter palettes or midrange brighter colors. I know I didn’t want black, but I wanted something ‘earthy’ to go with the header photo. I was also considering a deep blue theme.

This pass was more about getting into the architecture of WordPress and seeing what is possible at the simple level. Once I have it live, I can describe some of the details on how things were done. With the primary arrangement complete, I can tweak as I find it necessary. Us techies can’t keep our hands off the engine…  But, this is my ‘daily driver’ too, so I don’t want to wreck it! Came close earlier tonight on the development box… my screen went solid green! More about that when we get back to the program. Hope to take this live over the weekend.

Posted on

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.

Posted on

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!

Posted on

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!

Posted on

K2 Theme Updated to SVN

I figured out that the last released version of the K2 theme I’m using, doesn’t support WordPress 2.1.2 very well. Little things here and there weren’t quite right. I downloaded r323 from the K2 subversion repository, and it fixes the obvious problems. I’m also getting reacquainted with configuring K2’s options. However, at the moment, I can’t get the side bar category module to show the blogroll. I know it’s just a matter of selecting the ‘blogroll’ category, but I can’t find it. Hmmm, OK, that’s true. However, I just realized while typing this that I’ve been confusing that function with the ‘category list’ module. That’s obviously not the right module to customize! Blogroll is a category! I guess the module for a blogroll hasn’t been developed. I’ll do a little more hunting, then maybe I’ll make my own…

If you are not familiar with using Subversion to get the most up-to-date code, I’ll be doing a follow-up entry describing the process. Right now, I’m focusing on getting all the options in place, and developing the design for the site. Then I can get into more detail on the how-to!

Update: After the above realization, went back and look at the blogroll management in WordPress and realized while there is a relationship to categories, they actually call them ‘links’. In the K2 modules, there is one for ‘link list’… so, adding that did the job!