Wednesday, March 5, 2008

"Rounders+ Green"

I just finished making the majority of template changes to this blog.  After working with the Blogger template system, I'm satisfied that it will continue to meet my needs, because it is so flexible.

I call my new template "Rounders+ Green".  It is a mutation (or intelligent design change, if you prefer) of the Rounders 2 theme here on Blogger.

  • I expanded the width by 200px from around 800px to around 1000px.  (I would call this "optimized for 1024x768")
  • This broke the rounded corners, so I came up with a (arguably better) way to do rounded corners, using 6 stacked <div>s.  The bottom div provides the properly sized rectangle of the chosen theme color.  The next four <div>s each add a corner "mask" image, rounding off the bottom <div>'s shape.  The final <div> sets up padding for the internal layout of that particular section.  All 6 <div>s occupy the same space; after the first, each fills the entirety of the parent.  All of the layout is done in CSS, using background-color and background:url.  This approach could probably be reduced to 4 <div>s by placing two of the corners with the bottom and top <div>s.
  • I added icons for RSS and tags, using CSS of course.
  • I added formatting to the blog footer, to better match the header.
  • I aligned all of the left-side text (at least on the front page).  (This was mostly done already)
  • I fixed the post-header-line-1 section, which lacked any formatting.  I decided to float it right, and moved it before the post title, so that it would occupy space within the title block.
  • I added <pre> tag formatting for any code blocks that I insert.  This may need to be expanded, depending on what I post.  (A command-line style might be nice)

I'd like to publish the template, but first I have to figure out if I can "attach" items (like the xml file) to a post.  If not, I'll likely use my Google Pages site, or Sky Drive.


There are a few things left to be done with the template.  This list is mostly just a reminder for me.

  • Look at cleaning up the comments section on the individual post pages.  Create icons for the comments section header, and the add comment link.  (Word-bubble and plus, 12x12 on rounded orange)
  • Add tags icon to listing on left.  Maybe re-think use of orange for this icon.
  • Add icon for archive section, if seems missing after adding tags icon.
  • Move all images to my google pages site, to make things more uniform.
  • Use new corner technique for all rounded sections.
  • I'd still really like to attempt a stretch version of the template for bigger/smaller screens.
  • Try to add syntaxhighlighter to the mix.  (See this post for details)

3 comments:

Red M@ said...

Test comment from known blogger.

Anonymous said...

Test comment from person that offered information.

Anonymous said...

Test comment from Annonymous Howard.