Torn Elements

As much as I’m trying to get away from FireFox, addons like this keep me coming back!

This morning I woke to an email from SitePoint announcing they have released a great little tool for FireFox’s FireBug addon.

FireScope integrates code referencing to Firebug.  (Click for larger view)

Besides the search box, there’s some handy information here. The above shows information on the BODY tag, including it’s W3C status and browser compatibility. This allows you to instantly know if special consideration for certain browsers may be in order. 

It’s funny… I’ve only seen the ‘buggy’ reference applied to IE in all the code I’ve looked at so far.

FireScope also offers code examples for elements. (Click for larger view)

Likely not a big deal for the pros, but I can see something like this being very handy to the newcomer to coding. Personally, I find myself doing a fair bit of referencing. This will make that aspect of my job much easier.

There are more features I haven’t played with yet. You can read about those on the FireScope page at SitePoint.

Great job guys!

Software Web Browsers

It appears I’ve created some confusion in regard to my DIY series of posts on the custom theme I’ve been working on for this site. I’ve been contacted several times now regarding the “Thesis” theme by DIYThemes.Com.

“I am in no way affiliated with DIYThemes.Com. Support and questions regarding the Thesis theme should be directed to them.”

So far I’ve been contacted for Support, Coupon Codes, and even an offer to do an interview about the Thesis theme. In all cases I’ve responded and directed people to the proper web site.

Had I been aware of the potential confusion, I would have named my theme series differently.

I would also like to take this opportunity to apologize to the fine people at DIYThemes.Com. It was not my intention to misdirect anyone in their searches for your product.

If it makes you guys feel any better, my bounce rate has increased by 25% due to this.

Signed,
Larry “I-didn’t-mean-to-do-it!” Monte

Themes Asides, Themes

I figured I would’ve had more to say about the sidebar, but after adding one image and adjusting some typographic styles I was able to come close to what I was looking for.

Click screen shot to view.

Certainly nothing overly fancy going on here but that was my intention. I simply wanted a bit of separation from the content. Besides, this is just ‘roughed’ in for the moment.

By right-aligning a y-repeated graphic in the #container style I was able to shade my sidebar:

#container {
    width: 970px; 
    margin: 0 auto;
    padding: 0px;
    background:#fff url(http://static.tornelements.com/torn_images/sidebarBg.jpg) repeat-y right; /* Sidebar Background Image */
    color:#333;
    border: 1px solid #555;
    }

Now all I had to do was adjust some typography to set the styles for headings and lists.

My main concern to this point has been the layout. I may fine tune (or overhaul completely) the graphics in use before installing the theme on the main site. But once the layout is sound, graphics are no big deal to work on later.

I’ll likely only be making one or two more posts in this series. I fear that I may be boring the crap out of people with my simplistic approach to coding the theme.

What can I say? It’s really all I’ve had time to focus on to this point.

Themes Coding, Themes, WordPress

Today I finally found the time to work on the theme.

One thing I like to see on a site is a Search Box that you don’t actually have to search for. Right up top works for me every time. I find they tuck nicely into the menu bar which is demonstrated if you click on the screen shot.

I also made a couple of cosmetic changes today.

But first, let’s get that Search Box in place:

From header.php

<div id="topBar">   
    <div id="menu">
        <ul>
            <li class="<?php if (is_home()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo(‘url’); ?>" title="Home">Home</a></li>
            <?php wp_list_pages(‘title_li=&depth=1′); ?>
        </ul>
    </div> <!–end menu –>
    <div id="searchbox">
    <form action="<?php bloginfo(‘home’); ?>" method="get">
        <input type="text" class="textfield" name="s" size="24" value="" />
        <div class="icon"></div>
    </form>
    </div> <!– end search –>
</div> <!– end topbar –>

(I also added a search icon)

From style.css

input.textfield,
textarea {
    background:#FFF;
    border:1px solid #A6A6A6;
    padding:2px 1px;
}

#topBar {
    background:url(http://static.tornelements.com/torn_images/topBg.jpg) repeat-x;
    width: 100%;
}

#searchbox {
    margin-top: -30px;
    float:right;
    padding:4px 10px;
}

#searchbox .textfield {
    line-height:16px;
    width:180px;
    float:right;
}

#searchbox .icon {
    background:url(http://static.tornelements.com/torn_images/search.gif) no-repeat;
    float:right;
    width:29px;
    height:29px;
}

The 1px x 30px graphic in the #topBar background provides the gradient for the top menu.

I inverted the gradient graphic and used that for the rollover by adding this:

#menu ul li a:hover {
    background:url(http://static.tornelements.com/torn_images/topBgRO.jpg) repeat-x;
    color:#fff;
}

I also changed the body background. I’ll work on that more later. I just want to visualize it with a darker background for a while.

Up next… The Sidebar.

Themes Coding, Themes, WordPress

I’m likely the last person on the Net to discover this but I thought I would throw a post together on the topic anyway. If you aren’t a programmer, you might not see the humour in this. I for one, found it quite amusing.

I was upgrading a Mambo installation yesterday and found myself searching code snippets for a problem I was having. One of the search results led to a web site for an esoteric programming language called LOLCODE.

Did it have anything to do with what I was searching for? No. Did I click it? Yes!

There I sat chuckling while my client’s site remained broken. It was worth it as it relieved the mounting stress I was feeling during a failed upgrade. It cleared my head enough to finish the job at hand. (Hours later)

I think LOLCODE can pretty much explain itself…

HAI
CAN HAS STDIO?
PLZ OPEN FILE "LOLCATS.TXT"?
    AWSUM THX
        VISIBLE FILE
    O NOES
        INVISIBLE "ERROR!"
KTHXBYE

The above code initializes (HAI), opens a file for display (PLZ OPEN FILE) with error checking, then closes (KTHXBYE).

HAI
CAN HAS STDIO?
I HAS A VAR
IM IN YR LOOP
   UP VAR!!1
   IZ VAR BIGGER THAN 10? KTHX
   VISIBLE VAR
IM OUTTA YR LOOP
KTHXBYE

Don’t tell me you didn’t chuckle just a little bit while reading those!

[Pic from LOLCATS]

[Code snippets from Wikipedia]

Special thanks to Adam Lindsay – creator of LOLCODE. It made my day!

Odds N Ends Asides, Coding

No, that’s not a typo. It’s actually my dig at MicroSoft’s failed attempt at symbolism.

To the right you can see the picture of the fish which is proudly displayed in Windows 7 Beta. The fish is called a Betta (Beh-Ta) or Betta splendens to be accurate.

Earlier today someone in Twitter asked if the fish was related to PETA’s ‘Sea Kitten’ drive. Possibly, but I don’t think so.

The common mispronunciation is to call this fish a ‘Beta’.

I can’t say if MicroSoft was thinking the fish was indeed called a ‘Beta’, or if it was just a cool pic to ship with their Betta (ha!) version of Windows 7.

After all, they’re programmers, not nature enthusiasts.

Software Asides

When it comes to graphics, nothing can slow down your page load like high resolution photos. My goal here is to make the theme as light weight as possible. By keeping the theme itself light, we can allow more load time for content and sidebars.

After several days of wrestling with graphics I finally settled on a text effect header. (Click the pic) It’s nothing flashy, but it’s simple and reflects what I’m doing here. It’ll settle in better once I start working on the rest of the page. The stylized ‘E’ I’ve used is potentially going to be carried throughout the theme. (Just a vision at this point)

Because I’ve used graphics in the header instead of the default text and image background, we’ll handle things a bit differently from what was originally coded. Since this theme is not being developed for distribution there’s no need for flexible code.

For instance. The Blank Theme contained 58 lines of code to produce the header. Most of this was for providing flexibility for the masses. Since I’m the only one to use this theme we can ditch the overhead.

By direct use of images (not CSS backgrounds) for the header I’ve trimmed this down to 17 lines of code:

From ‘style.css’

#header {
    width: 100%; 
    }

#headerLogo { 
    height: 85px;
    width: 850px;
    padding: 0;
}
#headerRight { 
    float:right;
    margin: 0;
    padding-right: 18px;
}

From ‘header.php’

<div id="header">
    <div id="headerRight"><a href="<?php bloginfo(‘rss2_url’); ?>"><img src="http://static.tornelements.com/torn_images/rssIcon.jpg" alt="Torn Elements RSS Feed" /></a></div>
    <div id="headerLogo"><a href="<?php bloginfo(‘siteurl’); ?>"><img src="http://static.tornelements.com/torn_images/tornHeader.jpg" alt="Torn Elements – Larry Monte regaining lost passion for design" /></a></div>
</div>

By using images and not CSS backgrounds I get to assign ‘alt’ tag information which is good for SEO. Since we aren’t using text for the header it’s good to give Search Engines a bit of information about the site via images.

Take note of the sub-domain source for the image files. As I mentioned previously I’m using another domain to store my theme images:

The second sub-domain will house the theme images. Most browsers can only load 2-4 images simultaneously from any single domain. By keeping theme images on a sub-domain and content images on the main domain, I can increase the load speed of the site dramatically by allowing an additional 2-4 images to be loaded at the same time. (A preliminary step in page optimization)

I like to use images in my posts. Since many will appear within the length of my homepage it’s good to have some kind of optimization going on.

Themes Coding, Themes, WordPress

After a huge falling out with FireFox over memory usage, I was once again in the market to try another browser. I’ve been around the net for some time now and have found that all the other major market share browsers have ticked me off in one way or another.

Be it page rendering problems, high memory usage, processor bog downs, or just PITA interfaces, they’ve all let me down.

I’d looked at Chrome briefly during it’s very short Beta period. As impressed as I was I simply dismissed it as too early for full time use.

Out of Beta now, it was time to give this browser another look.

It’s really very good! After 2 solid days of running Chrome, I don’t see any of the issues which always seem to plague me with other browsers. Normally by now I would have had to shut down and restart other browsers for one reason or another. It appears that when you close a tab in Chrome, you actually get ALL the memory it was using back. Amazing!

The only essential thing keeping me from switching to Chrome full time is it’s lack of developer tools. I’m talking about tools like FireBug for FireFox and the like. Until Chrome sees tools like this I will be forever tied to using FireFox for development. However, I’m hoping good things will come from Chrome V2 in regard to this.

I realize there’s a console in the Developer options of Chrome but it lacks FireBug’s ability to edit CSS and other elements on-the-fly. I rely on FireBug heavily as it’s fantastic for fine tuning layouts, styles or just quickly inspecting how other sites achieve effects. (Yeah, I’m a big ol’ snoop! )

Chrome seems to be light and efficient which is perfect for ol’ FrankenPuter here. Hopefully that will remain in version 2.

If you’re running a slower system like me, then definitely have a look at Google Chrome. Your computer will thank you.

Software Google, Web Browsers

Before anyone bitches, that’s indeed yesterday’s screen shot to the right. Most of the changes made were done ‘under the hood’ so not much changed to the look. (Plus I was too lazy to take a new screenshot )

The main thing I want to cover today is the topic of Source Ordering. By making a small change in page rendering we can ensure that our content gets displayed before all the sidebar crap.

For instance, our blank template did things in this order:
(From archive.php, index.php, page.php, single.php)

<?php get_header(); ?> /*Get header and top menu*/
<?php get_sidebar(); ?>/*Display all the distracting sidebar crap*/
Content items here
<?php get_footer(); ?>/*Display Footer*/

If you CLICK HERE and view the source from yesterday’s theme, you’ll see that all the sidebar items are listed BEFORE our content. If you run a heavy sidebar then your content is miles down that page.

So let’s change things around a bit:

<?php get_header(); ?>/*Get header and top menu*/
Content is now much higher up in the source code
<?php get_sidebar(); ?>/*NOW lets do the sidebar crap*/
<?php get_footer(); ?>/*Display footer*/

Now, if you CLICK HERE and view the source from today’s theme, you’ll see the content is MUCH higher on the page. Your content is now more accessible to Search Engines. They don’t have to crawl their way through all the ads and other things which usually populate sidebars.

Speaking of putting important things first, let’s have a quick look at how titles are handled.

(From header.php)

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

As you can see by the screen shot the site name is first and our important article title is second. (Third actually, after the useless ‘Blog Archive’ label)

We can fix that by replacing the above line with:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Much better! Now our article title is first and mention of the site is second. I also removed the code which displayed ‘Blog Archive’ in the title for single pages. Not really necessary, I find. If I were to leave it in I would have put it after the title and not before as it had been originally coded.

Other than adding my name to the footer (for ego purposes) the theme appears exactly as it did yesterday. The only difference now is the information displayed has better accessibility.

Themes Coding, Themes, WordPress

I ditched my original idea of stripping down the default WordPress theme in favour of a pre-made blank theme. What can I say? Several hours of code ripping just didn’t appeal to me at all. I’m more interested in building than reverse engineering at this point.

I’d rather spend my time with graphics and layout than basic typography. With a blank theme you’re given all the required basics. A perfect starting point.

So I hit Google and came across Refueled.Net offering a few styles of blank themes. I’m a big fan of the right sidebar so I grabbed the appropriate layout.

Since I want to optimize for a 1024px layout I had to make a few changes. The theme and header image were optimized for 800px layout so I simply removed the image for now. We’ll put it back later.

Changes to style.css:

• Made some changes to optimize for 1024px width.
• Adjusted the width of the top menu as well as the sidebar to reflect the above change.
• Decreased the height of the header from 160px to 100px. Too big for what I have in mind.

Below are the code snippets of the changes:

#container {
    width: 970px; /*[Changed from 760px]*/
    margin: 0 auto;
    padding: 6px;
    background:#fff;
    color:#333;
    border: 1px solid #0B1224;
    }

#header {
    background: #DDD;
    width: 100%; /*[Changed from 760px]*/
    color: #fff;
    height: 100px; /*[Changed from 160px]*/
    }

#header h1{
    font-family: palatino linotype, georgia, arial, times;
    font-size: 16pt;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;   
    padding: 40px 0 0 16px;   /*[Changed from 120]*/
    }

#menu {
    background: #0B1224;
    font-family: verdana, arial, times, serif;
    font-size: 8pt;
    width:100%; /*[Changed from 760]*/
    height:25px;
    border-top: 1px solid #fff;
}

#content {
    float: left;
    width: 680px; /*[Changed from 72%]*/
    overflow: hidden;
    }   

#sidebar {
    font-family: verdana, arial, tahoma;
    font-size:8pt;
    width: 280px; /*[Changed from 200px]*/
    float:right;
    margin: 12px 0 24px 0;
    padding: 0;
    border-left: 1px dotted #A2A2A2;
    }

You can click the images to see both in action.

Now that I have my desired width and a general layout I can start envisioning some graphics. I’m not the best graphic artist in the world so it might be a few days before I post on this topic again. Remember, I also work for a living.

Themes Coding, Themes, WordPress