Out With the Old, In With the New

As you might have noticed – I took a week off from blogging in order to focus on something else – cleaning up Jappler.com. Over the past few months I have learned so much more about WordPress, web site optimization, and what I really used this web site for – so I decided I needed to take some time to redo this site.

From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.

From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.

From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.

From an optimization perspective, this site uses far less javascript, CSS, and images and will load much faster than the previous site. I also increased the use of title tags, alt tags, and other easy tricks to help with search engine optimization.

All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.

Quick CSS for WordPress Images (Updated)

A week or so ago, I posted some information on how to quickly style your WordPress images. After recently updating my company’s web site (SDAC Inc. – I noticed if you used captions, my custom CSS would not work. Here is some CSS that will work with and without image captions:

.alignright, .aligncenter, .alignleft {padding:4px;background:#ecece2;border:1px solid #c7c7bb;}
.alignright {float:right;margin-left:5px;}
.alignleft, .alignnone {float:left;margin-right:5px;}
.aligncenter {display: block;margin-left: auto;margin-right: auto;}

The difference? I used img.align.. which worked if you did not use captions, but if you use caption, there is an outer div class called align… The more generic CSS posted here takes care of both issues.

jQuery + CSS + XHTML = Jappler Menus v2

Previously – I introduced a nice way to create drop down menus using HTML (lists), Javascript (drop down), and CSS (styling of menu). I put all of this together and called it: Jappler Menus. (See previous post about Jappler Menus).

Since writing that post – I have found a better, faster, cleaner way to work with drop down menus. I had originally seen some nice menus: http://help-developer.com and decided with some changes – that would be a much nicer way to work with menus. For this – I give you Jappler Menus version 2.

Here is an example of Jappler Menus in action: http://jappler.com/downloads/jappler-menus_v2/

There are 3 main components to the Jappler menus: HTML, Javascript (jQuery), and CSS.

  1. The HTML to generate the menu contents. All you need to use to create the menu is create a simple HTML list:
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a>
    			<li><a href="#">Our Story</a></li>
    			<li><a href="#">Our Clients</a></li>
    			<li><a href="#">Our Philosophy</a></li>
    	<li><a href="#">Our Products</a>
    		       <li><a href="#">WordPress Themes</a></li>
    		       <li><a href="#">WordPress Plugins</a></li>
    		       <li><a href="#">WordPress Consultation</a></li>
    	<li><a href="#">HOWTOs</a>
    			<li><a href="#">bbPress</a></li>
    		        <li><a href="#">WordPress</a></li>
    		        <li><a href="#">General</a>
    					<li><a href="#">CSS</a></li>
    					<li><a href="#">XHTML</a></li>
    					<li><a href="#">Javascript</a></li>
    	<li><a href="#">Archives</a></li>
    	<li><a href="#">RSS Feed</a></li>
  2. The javascript that makes the drop downs fade in and out. This uses jQuery and then some custom JS that takes care of our menu:
    function japplerMenu(){
    $(" #navigation ul ").css({display: "none"}); // Opera Fix
    $(" #navigation li").hover(function(){
    		$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(200);
    		$(this).find('ul:first').css({visibility: "hidden"});


  3. The CSS to make things look pretty.Here is the custom CSS that is needed:
    #mainNav {height:30px;background: url('images/mainNav_bg.gif') repeat-x;width:623px;}
    #navigation, #navigation ul{position:relative;z-index:1000;list-style-type:none;list-style-position:outside;margin:0;padding:0;}
    #navigation a {display:block;padding:0 20px 0 20px;font-size:1.1em;font-weight:bold;color:#fff;text-decoration:none;line-height:30px;}
    #navigation li:hover {background: url('images/mainNav_bg-over.gif') repeat-x;}
    #navigation li:hover a {color:#fff;}
    #navigation li{float:left;position:relative;}
    #navigation ul {width:165px;position:absolute;left:-1px;top:29px;display:none;background:#f1f4f2;border:1px solid #4b4d5b;border-bottom:none;}
    #navigation li:hover li a {color:#333;}
    #navigation li ul a {float:left;width:155px;line-height:normal;font-weight:normal;font-size:.95em;text-align:left;border-bottom:1px solid #4b4d5b;background:#f1f4f2;height:auto;padding:5px;}
    #navigation li ul a:hover {background:#a4a5a9;color:#000;}
    #navigation ul ul{top:auto;}
    #navigation li ul ul {left:160px;margin:0;}
    #navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li:hover ul ul ul ul{display:none;}
    #navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul{display:block;}

    There is also some additional CSS for IE 6. (See IE 6 specific CSS). You can add some conditional logic to include this for only IE 6 (See the example source above – look in the header for the conditional code.)

These menus are compatible with IE 6+, Safari 2+, Opera 9+, and FF 2+. If you want it to work in IE 6 – I have a start on some CSS that will make it work.

Quick CSS for WordPress Images

If you install WordPress and use the media uploader to manage your images in your posts – you can easily style your images quickly by adding the following code to your theme’s stylesheet.

img.alignright, img.aligncenter, img.alignleft {padding:4px;background:#efefef;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;}
img.alignright {float:right;margin-left:5px;}
img.alignleft, img.alignnone {float:left;margin-right:5px;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;}

This code will set up your images to float appropriately, as well as give a nice border as seen below.

Christmas in DC

Note* This information is now updated: Updated CSS

Using !important With CSS

I am not a “quick fix” or “work around” type of person. When a CSS debugging project comes my way I look first at fixing the problem systemically vs. applying the quick fix. Recently though I was brought into a project with an insane amount of CSS and conflicting styles all over the place. Since I did not have ample time to fix the issues systemically (this was a super stat job) I was forced to use something that would take precedence over the problematic styles already in place to quickly fix the issues.

If you have worked with CSS before I am sure you have seen “!important” used but probably were not really sure what it was. I ended up using a “fixes.css” style sheet which was called in after all the other style sheets and then using “!important” with the styles I needed to correct (override). This was very helpful and if you ever run into a similar situation or have a certain style that you cannot seem to figure out why something is not showing up (“I set this to have a margin-bottom:20px; but there is no margin at all”) try putting in the !important (margin-bottom:20px !important;) and see if that helps.

More information on !important: http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

Always Use a Doctype

After spending an hour on something that should have taken me 20 minutes – I wanted to pass on something I should have caught right away. The problem: you use CSS to lay something out and it looks great in Firefox and Safari – but not in IE. At this point I validate the CSS to make sure I did not forget a bracket or something stupid. Next step – validate the XHTML. This is where I would have solved my problem, but I failed to take this step. At that point I would have seen that the script I was working with did not have a doctype defined. Once I added in the doctype – everything loaded as expected and I could not believe I missed something so basic. Lesson learned – and hopefully you will know now as well to make sure a doctype is always set.

Add a "Pseudo" Pseudo Class Hover in Inline CSS.

I have been busy this week with a few really cool projects – one of them to create a widget for any site that will show the latest news items from a RSS feed – while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style…until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

<a href="file.html">Title&lt;/a