Love it! FireScope: A FireBug Addon for FireFox

firescope-logo 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)

FireScope1

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)

FireScope2

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!

Clearing Up The Confusion

confusion 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 :)

DIY Themes – Part 5: The Sidebar

DIY Themes Part 5 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.

DIY Themes – Part 4: The Top Menu Bar

DIY Themes Part4 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.

I Can Has LOLCODE!

LOLCODE 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! :)