What are the down falls to using Box Shadows

Well unfortunately like most of the new techniques that are created everyday some browsers don’t support this. Well what browser do support this. Pretty much all of the popular browsers new versions. The Box Shadow is supported with IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. As most people know Safari uses a little bit different coding style you will have to create this with the -webkit. You can also use the -moz setting for Mozilla but you don’t have to.

How to implement Box Shadows

Like all other CSS you first have to determine the container that you want to place this on. Whether it is a div, class, id, or any other element. This property has 6 parts. The first part is the h-shadow or horizontal shadow. The next part is the v-shadow or vertical shadow. The third part is the blur, which is optional. The fourth is the spread and this is also optional. The fifth is the color and this can handle all the types whether it is hex or rgb. Now the sixth part I am going to save for a little later.

What Box Shadow should look like.

So as stated above you have 6 parts to this that you can fill out. There are 3 that are optional. So lets see what this looks like.

.yourclass {
   -moz-box-shadow: 3px 3px 3px 3px #000000;
   -webkit-box-shadow: 3px 3px 3px 3px #000000;
   box-shadow: 3px 3px 3px 3px #000000;
}

OK so now you can see what it looks like. As you can see the first value is the h-shadow, the second is the v-shadow, the third is the blur (optional), the fourth is the spread (optional), and the fifth is the color. Now what about this fifth part.

The sixth part

The sixth part is one that you may never use and it is one that you could find yourself using a lot. The sixth element is a inset. What this does is exactly as it sounds it puts the shadow inwards. Now below is how you add this to the property.

.yourclass {
   -moz-box-shadow: 3px 3px 3px 3px #000000 inset;
   -webkit-box-shadow: 3px 3px 3px 3px #000000 inset;
   box-shadow: 3px 3px 3px 3px #000000 inset;
}

If you would like to see examples and learn more about this I would recommend going over to CSS Tricks.

Spread and Share

• 

Step One – Create You HTML Template

One of the first things you will need for your html template is the jquery library script or an equivalent script. The google hosted jquery script or the jquery hosted latest script would work. I prefer to use the latest jquery script. The next thing that you will need to add is the css popup file and the js popup file. These will look like this in your head area.

   <link rel="stylesheet" href="PathToFile/popup.css" type="text/css" />
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   <script type="text/javascript" src="PathToFile/popup.js"></script>

After you add these all that you will have to do is add the code to create the popup. Well you will have to first decide if you want to use a button or a link. Both of these will work all that you have to do is add the class button to them. Then you will have to create the popup container and the contents of the popup. This should look something link this:

   <div class="button"><input type="submit" value="Press This" /></div>
   <div class="popupContent">
      <a class="popupClose">x</a>
      <h1>This is a title for a popup!</h1>
      <p>What you want in the popup</p>
   </div>
   <div class="backgroundPopup"></div>

That is all for the html part. Now you will have to style the popup with the popup.css file.

Step Two – Design Your Popup With CSS

Inside of the popup.css file there are all of the classes that you will need to have setup. Hear is a list of the classes that you will need (popupContent, popupClose, and backgroundPopup). These classes will have to be coded like below:

   .backgroundPopup{
	display:none;
	position:fixed;
	_position:absolute; /* hack for internet explorer 6*/
	height:100%;
	width:100%;
	top:0;
	left:0;
	background:#000000;
	z-index:9998;
   }
   //You can style the background, border, width, and height of this how you want
   .popupContent{
	display:none;
	position:fixed;
	_position:absolute; /* hack for internet explorer 6*/
	height:auto;
	width:35em;
	background:#fff;
	z-index:9999;
	padding:2em;
	font-size:1.3em;
   }
   //Style this how you want
   .popupClose{
	font-size:1.4em;
	right:0.5em;
	top:0.2em;
	position:absolute;
	color:#000000;
	font-weight:700;
	display:block;
   }
   .popupClose:hover { cursor: pointer; }

Step Three – Build The jQuery Popup

Now that you hopefully have a sweet designed look for your popup we have to add the script to control the popup. All that you have to do for this is all the code below to your popup.js file.

var popupStatus = 0;
 
function loadPopup(){
   //Will only be loaded if the status is 0
   if(popupStatus==0){
      $(".backgroundPopup").css({"opacity": "0.8"});
      $(".backgroundPopup").fadeIn("slow");
      $(".popupContent").fadeIn("slow");
      popupStatus = 1;
   }
}
 
//This will disable the popup when needed
function disablePopup(){
   //Will only disable if status is 1
   if(popupStatus==1){
      $(".backgroundPopup").fadeOut("slow");
      $(".popupContent").fadeOut("slow");
      popupStatus = 0;
   }
}
 
//Centers the popup to your window size 
function centerPopup(){
   var windowWidth = document.documentElement.clientWidth;
   var windowHeight = document.documentElement.clientHeight;
   var popupHeight = $(".popupContent").height();
   var popupWidth = $(".popupContent").width();
   $(".popupContent").css({
      "position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
   });
   //this is needed for ie6
   $(".backgroundPopup").css({ "height": windowHeight });
}
 
//Click event controller
$(document).ready(function(){
   //Open the popup and center
   $(".button").click(function(){
      centerPopup();
      loadPopup();
   });
   //Close popup by clicking the x
   $(".popupClose").click(function(){ disablePopup(); });
   //Close popup by clicking outside the box
   $(".backgroundPopup").click(function(){ disablePopup(); });
   //Close popup by clicking escape
   $(document).keypress(function(e){
      if(e.keyCode==27 && popupStatus==1){
         disablePopup();
      }
   });
});

Now if you copy that code and add it to your popup.js file everything will work. This script declares the width of your browser and determines where to put the popup automatically. It also declares the closing abilities. There are three of these you can click the x, push escape, or click outside the popup. There is nothing left your popup should be working great. Now this is a really simple jQuery popup. There are tons of popups out there and tons of ways to do these but most aren’t this easy and light weight on your browser. If you would like to see a demo of this in action you can click here or you can download this demo and mess around with this your self.

Anyone that might use this and find some changes that make it better I would love to see these changes and put them up on the site with you getting credit. Please contact us.

Spread and Share

• 

Position Static

This type of position as said before is set by default. This is the most basic positioning and the simplest to explain. Position static is simply all that it does is follows the flow of the page. Now this might sound weird and you might wonder why it is even a position. This is because it does not get affected by the top, bottom, right, and left properties. This is written like this:

.yourclass {
    position: static;
}

Position Fixed

This position is the next easiest and not really used much anymore. This position doesn’t take anything from the normal flow of the website but conforms to the browser window. All other elements on the page act like the fixed element doesn’t exist. This is written like this:

.yourclass {
    position: fixed;
}

Position Relative

Relative positioning is positioned relative to its normal position. These elements still hold the same normal flow but are able to be moved and can be overlapped. These elements use the space that they are given. These are written like this:

.yourclass {
    position: relative;
}

Position Absolute

The positioned absolute element is position relative to the parent containing element. All other elements act like the this positioned element doesn’t exist. If you do not have any parent container elements with positions then the position is absolute with the parent container as the html tag. Absolute positioned elements can overlap other elements. This is written like this:

.yourclass {
    position: absolute;
}

Understanding Positions

There are a few things that a lot of people have troubles with when trying to understand positions. The hardest thing to learn is how to control position absolute elements. Say you have a set of code like this:

<div class="container-1">
    <div class="container-2">
        <div class="container-3">
        </div>
    </div>
</div>

Now lets say you would like to see the container-2 and the container-3 to be in different areas. Well all that you would have to do is put a position absolute on them and you can move them where ever you would like. The only issue would be that they will use the html element as their container. So what we would want to do is limit them to only be able to more inside the container-1 element. So we would have to add a position relative to container-1. This means that everything inside container-1 will adopt the container-1′s layout or flow. So say container-1 has a width of 500px and a height of 500px, container-2 and container-3 will work inside of the 500×500 box. Also because container-3 is inside of container-2 it will become the dominant element. Meaning it will be on top.

That brings me to the next part overlapping. How to control what overlaps what. This is done by using a css function called z-index. z-index is like a filing system. Whatever element has the higher z-index ends up being on top of everything else. So lets say that we have a page that looks like this:

<div class="container-1">
    <div class="container-2">
    </div>
    <div class="container-3">
    </div>
</div>

Now with this setup we would like to see container-2 on top of container-3 and in the middle of it. We would first have to give container-1 a position relative. Then give container-2 a z-index of say 2 and container-3 would get a z-index of 1. Now with z-index you can use negative numbers and go as high as 2147483647 in most browsers. Now you won’t find anyone using that high of a z-index. Most people stick with a 9999. Meaning that 9999 is the highest that they will go. That give you the ability to have 9999 elements that are on different levels and you can go negatively also. I try to stick to something like 50. Most website are not going to see 50 elements that need to be positioned on top of everything else. Back to our containers. With giving container-2 and 3 a z-index that means that they start creating a pile/stack/order whatever you would like to call it. Because container 2 has a higher z-index it will be on top. So say you want to put a image on top of another image, this would work.

Using positions can get tricky but as I said in the beginning if you don’t need them I wouldn’t use them. They are however a great thing to learn and mess around with. If you would like to try out each kind of position you can go over to W3Schools, they have a Positioning page that you can try out all the types and change the code.

Spread and Share

• 

Other Options

Well I know personally I don’t want my users to have this ability. So I want to have this not display for everyone not just myself. This is not as easy as the other two options but is not that hard also. What you need to do is get access to your functions.php file in your theme folder. Now you need to edit that file and add the following lines of code:

//Disables Admin Bar
add_filter( 'show_admin_bar', '__return_false' );

Now this will disable the admin bar for all users but all users will still see the option if they edit there account. So we also need to hide the option from the user and that will take adding this code to your functions.php file:

//Hide Admin Bar Options
add_action( 'admin_print_scripts-profile.php', 'hide_admin_bar_prefs' );
function hide_admin_bar_prefs() { ?>
<style type="text/css">
    .show-admin-bar { display: none; }
</style>
< ?php
}

Now this will disable the admin bar option and the admin bar for all users. Hope this helped everyone.

Sponsors

To get the best deals in online printing try PsPrint Commercial Printing!

Spread and Share

• 

How To Implement Cool Corners

First of all you must pull in jQuery into your website. The best way of doing this is by linking to http://code.jquery.com/jquery-svn.js in your header or footer link this:

//jQuery SVN Updated Version
<script src="http://code.jquery.com/jquery-svn.js" type="text/javascript"></script>

The next thing that you have to do is pull in Dave Methvin corners script. This can be done by downloading the script from Here. This also needs to be added to the header or the footer like this.

//Dave Methvin's
<script src="Location Of File On Your Server" type="text/javascript"></script>

Adding Final Code

In order to get these amazing different corners to work on your web page all you need to do is call out the classes of the spots you want to activate the corners. Also you need to decide which of the many types of corners you would like to use. Yes I said MANY TYPES. Dave Methvin created this script with many different kinds of corners you can choose from. For Instance Rounded, Beveled, Notched, Bite, Dog-ear, Sculpt, Sharp and many more. You can find all of the corner types at jQuery Corner Demo. Now back to the code, once you have decide on the type you need to add this after the Methvin’s script.

//Some Different Examples
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".YOUR CLASS").corner("10px");
		$(".YOUR CLASS").corner("bevel 10px");
		$(".YOUR CLASS").corner("notch 10px");
		$(".YOUR CLASS").corner("cool 10px");
		$(".YOUR CLASS").corner("curl 10px");
		$(".YOUR CLASS").corner("sculpt 10px");
	});
</script>

Here is a download able and viewable demo of the script in action that I have created. This demo involves all of the above examples.

jQuery Cool Corners: Cool Corners Demo

Download: jQuery Cool Corners (12)

For even more about this great script I would read up on Methvin’s Gallery and also on Methvin’s Demo.

Development And Consulting

Contact Shane Strong for any of your web development, WordPress theme development, Magento development, PHP, and jQuery needs. You can view my portfolio for some of my work.

Spread and Share

• 

Creating The Template File

In you are new to Magento then this will be kind of fun for you. First you need to create your .phtml file. In order to do that you need to navigate to your themes template pages folder. How to find that? Well if you are using the default Magento theme then you would first go to app -> frontend -> default -> default -> template -> page inside of there you will need to create you template file. So let say we want to create a 4coulmn template. You would just add a 4columns.phtml or whatever you would like to call it. Now you may be thinking you are all done. Nope if you go into your Magento Admin Panel or Dashboard and go under cms pages. You will see that you can not select your new template as a layout. Well this is because you need to first tell the Magento xml file to use the template.

Editing The XML

Lets locate those xml files. If you are still in the template -> page directory then all you have to do is go out one directory to layout. If you are not in the directory anymore you will have to navigate to app -> frountend -> default -> default -> layout. Inside this directory you are going to be looking for the page.xml file. Open it and navigate to the bottom. You should find some code like this

    <!-- Custom page layout handles -->
    <page_empty translate="label">
        <label>All Empty Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/empty.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_empty>
    <page_one_column translate="label">
        <label>All One-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_one_column>
    <page_two_columns_left translate="label">
        <label>All Two-Column Layout Pages (Left Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_left>
    <page_two_columns_right translate="label">
        <label>All Two-Column Layout Pages (Right Column)</label>
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_two_columns_right>
    <page_three_columns translate="label">
        <label>All Three-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/3columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_three_columns>

Now you need to add your page template to the end of the page.xml file. So you would do something like this.

    <page_four_column translate="label">
        <label>Four Column Page Layout</label>
        <reference name="root">
            <action method="setTemplate"><template>page/4columns.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_four_column>

Once you have added that you should be good to go. If you do not see the layout in the drop down in the cms page area, you may need to refresh your Magento cache. To do this go the Magento Admin Panel or Dashboard and go to System->Cache Management. Refresh all the cache. If that does not work then you need to go back and make sure you have named everything correct.

Website Design , Development, and SEO Marketing

If by chance you are in need of any web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with the biggest web companies in the Lansing Area and some all the way out to California. We would love to hear from you.

Sponsors

Looking for rental properties try Alameda real estate agent.

Spread and Share

• 

The first thing you have to do is find out what is making your site slow in the first place. If you have no clue on how to do this, find tools that will tell you your issues. For instance if I was going to make my site faster for instance, I use Firefox as my main browser and it has many different tools/plugins that you can tell needs to be changed. So, open up your browser and download the Firefox plugins Firebug and YSlow. Firebug really doesn’t help with making your site faster but it is a great tool if you are trying to learn things about coding. With YSlow you can test your site and see what is making your site so slow. It grades everything involved with your site. The only problem with this is if you dont understand what it is telling you then it really won’t help you. That is why it is sometimes better to get someone else, who knows what they are doing, to make your site faster for you.

What I Would Do

The first thing would be to go into YSlow and see what is causing your site to be so sluggish. If you aren’t using Firefox there is a lot of different tools all over the internet that you can use. Here is a good place to start Faster Web Page.

How Old Is Your JavaScript Files

If it was a javascript issue then I would minimize the amount of javascript that is being used and compress it so that the browser can read it faster. Having multiple javascript and/or old javascript files will make your site load much slower than having them up to date and compressed into one file or maybe two.

What About My Stylesheets

If it is a stylesheet issue then I would combine as many stylesheets into one as I could and compress them also. I find that the best thing to do is to have a compressed file and another copy of the file that is not compressed. That way if you need to make changes it is easy to change. Then you just make a new compressed file.

How Many Images Do I Have

If there is an image issue then I will take a look at what images are on the site and how large they are. Some persons don’t know that if you are making an image for the internet, and you don’t have a auto compression system in place then your image is going to be huge, most of the times. This will slow down the browser a ton. The best thing to do is to save the images ready for web. If you dont know how to do that then we can go back to YSlow and they have a great tool that will do it for you. If you go under tools at the bottom you will see All Smush.it. This compresses your images down to there compression rating and then lets you save them to your computer and all that you have to do next is upload them to your site.

Who Is My Host

My last and most important issue for most sites is who you have hosting your site. If your site is slow because of the company that is hosting it then you need to go somewhere else. For instance some really good companies to buy a server from are Hostmonster, Bluehost, Hostgator and many more. But some persons are getting hosted from neighbors, friends or uncles. What kind of hosting do you think that is. If you are not looking to spend the money to buy a server for your self you can find companies that can host your site for you at reasonable prices. For instance my company Chosen has different hosting packages. Our lowest is $25 a month which includes support and up to 3 emails. We have servers from Hostmonster. They are in my opinion the best hosting company out there. They have the best support and they have very little to none down time.

Final Thoughts

So that were a few different things that you should check into if you have a slow site. If none of these work for you 9 times out of 10 your site is too large, and, you need to think about a remake or paying someone to go through and tell you what need to be done to make the site faster. Your site should be updated about every couple of years if not every year. This doesn’t mean a new design to the site. No this means having someone go into the code of the site and optimize whatever they can to bring your site up-to-date.

Website Design , Development, and SEO Marketing

If you need assistance with web design, web development, search engine optimization, editing, content creation or marketing done to one of your sites please feel free to contact me or Chosen. Chosen is a small, but growing Lansing-based firm offering Web Development, Web Design, Web Hosting, Web Editing, and Web Marketing skills. We have done work for clients and companies, by preference, but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Website Design , Development, and SEO Marketing

If you need assistance with web design, web development, search engine optimization, editing, content creation or marketing done to one of your sites please feel free to contact me or Chosen. Chosen is a small, but growing Lansing-based firm offering Web Development, Web Design, Web Hosting, Web Editing, and Web Marketing skills. We have done work for clients and companies, by preference, but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Top Ten SEO Tool List

Search Engine Genie
Website Grader
Google Adwords
Google Analytics
SEO Quake
SiteExplorer
Google Trends
Search Status
seomoz.org
Word Tracker

What The SEO Tool Does

Search Engine Genie – This site is not well known but it has quite a few really nice SEO tools that are free to use and they have a ton of really helpful articles.
Website Grader by HubSpot – I use this site to get a good idea of where a site is and where it might need to be and get to. HubSpot has a paid version of this that has a ton of really great SEO tools. They have a free week trial of the system if I were you I would jump at the trial and see if you like it.
Google Adwords – This is a great way to find out how heavily a keyword is being targeted. I use this when ever i am looking for the really good keyword to get a site going.
Google Analytics – Great tool if you are not using it you are loosing out. My main use for this is to see what is bringing traffic into my site or my client sites. With the name Google behind this you know that you are going to 1 get it for free and 2 get something that is great.
SEO Quake – This is a plugin for Firefox that gives you a ton of really useful info that you need for SEO. I know a few different people that this is the only tool that they use for SEO.
Site Explorer by Yahoo – This is a useful tool for the yahoo search engine. I prefer Google’s Analytics over this because it has more to it.
Google Trand – Great tool by Google this lets you find the trends of the time so that you can find the really good keywords and SEO articles to write for traffic purposes.
Search Status – I really enjoy using Search Status because of its simplicity. I am a Firefox user and this is a Firefox plugin.
seomoz.org – These people really know what they are doing with SEO. They have a ton of free tools and they also have some really great paid tools.
Word tracker – I personally have not used this service but i have heard from a ton of people that they are great. It is a paid service but they do have a free trial.

SEO Packages

If you are in need of any Search Engine Optimization I do have packages and I can teach people how to do SEO. My monthly packages for SEO all depend on how much you want done. I charge $25US an hour. With that my recommended package would be 20 hours a month this will give you the best outcome. Of course the more hours you do the better outcome you will get but at 20 hours a month I can really get enough done to your site that it will show improvement a lot quicker and will make you more money faster. I also have a bunch more different packages and prices for web based projects, you can go to Work Prices.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Practical

Now for a little practical look at SEO. If someone came to me and said I want to be number one for the word Google I would look at you and tell you to talk to this company called Google. Some things are not able to happen. One of the biggest things with SEO is that it takes time. Look at my site for instance I live in Michigan around the Lansing Area. Now I am trying to get to the top for Lansing Web Design, Lansing Web Development, Michigan Web Design, Michigan Web Development, and a ton of other Michigan and Lansing combination’s. Well I am finally getting there after 5 months of hard work. One thing that most people don’t understand is that in order to get to the top for a certain word or phrase you have to beat out the competition. That means you have to do research on what other people do, how they do it, where there flaws are, and how can you beat them.

SEO Consists

SEO and SEM are two totally different things people think that one goes with the other. Well they are kind of right in the fact that they both assist each other. SEM is Search Engine Marketing, this consists of stuff like Google Adsence, Post Writing, Building Backlinks, and a bunch of other things. SEO is mainly focused around Meta tags and search engine submissions. Meta tags are not a really big thing for SEO. That is what people say. Well I feel that they are still a very big thing. Meta tags direct search engines on what to index on your site. There are a ton’s of different Meta tag that you can use in SEO but the most important ones are Keywords, Descriptions, and Titles. The last thing that I will leave you with is that everyone can do SEO and SEM. SEM is a little easier for people because of all the social media places out there. SEO is really hard and takes a lot of planning. I would recommend everyone to leave SEO to the people that consider them self experts. I am not saying don’t try to learn SEO or teach your self SEO because you could become one of those experts.

SEO Packages

If you are in need of any Search Engine Optimization I do have packages and I can teach people how to do SEO. My monthly packages for SEO all depend on how much you want done. I charge $25US an hour. With that my recommended package would be 20 hours a month this will give you the best outcome. Of course the more hours you do the better outcome you will get but at 20 hours a month I can really get enough done to your site that it will show improvement a lot quicker and will make you more money faster. I also have a bunch more different packages and prices for web based projects, you can go to Work Prices.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

jQuery Hover State

So to show you how to do this I am going to use my site under my main post on the homepage I have some of my recent post. Now I want to have the full post area to have a jQuery hover state that changes the background. So I would do this.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing when 
    //going outside the object area
    function out(event) {
	    $(this).css("background", "");
	}
});

jQuery Hover with a click event

If you want jQuery to do a hover state only then that will work for you but if you want to get the a tags href, so that when you click on the object area it will take you to that page. You would have to add this after your jQuery hover code. So now your jQuery code should be.

$(document).ready(function() {
    //call the jQuery Hover Over and Out
    $('#YOURID').hover(over, out);
    //Tell the browser to change the background when hovered over
    function over(event) {
        $(this).css("background", "url('Path To Your Image')");
	$(this).css("cursor", "pointer");
    }
    //tell the browser to change the background to nothing 
    //when going outside the object area
    function out(event) {
	$(this).css("background", "");
    }
    //This adds the click event to your object and tells it where to go
    $('#YOURID').click(function() {
	window.location=$(this).find("a").attr("href");
    });
});

This is very useful to get around the IE problem and if someone checks your site they can see that you know jQuery. If you need any help with this just let me know. I would be more than willing to help.

Website Design , Development, and SEO Marketing

If you by chance need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Sponsors

Get your charm bracelets in time for the new year. LusterForever.com features a complete collection of such bracelets.

Spread and Share

• 

First off you have to go out and find a Magento theme. Some of these are quite expensive but come with much more than just your typical free one. The first place I would check for themes is ecommerce-themes they have quite a few really nice looking themes for you to download. After getting your theme, it should come in a zip file extract those on your computer. Inside the extracted folder you should get two folder called app and skin.
The next thing you have to do is add those folders to your Magento installation. This requires you to ftp into your site. The app and skin folders go in different places. The app folder needs to be uploaded to your magento/app/design/frontend/default directory and your skin folder needs to be uploaded in your magento/skin/frontend/default directory.

Magento CMS Manage Pages

Now that you have these folder in your Magento site we have to go through the admin to tell the site to use the new theme. First log in to your admin and go to the CMS tab and them manage pages.

Custom Design Pages

Inside there you will have to change every pages custom design to your new theme name you installed.

System Configure Design

Next you will have to go to the System tab and then Configure. Inside the Configuration section go under Design and change all of the relevant fields to your new theme name. Make sure you save everything and your theme should be up and ready to go.

Magento And Hosting

Something that I would recommend would be getting a server from peer1 hosting. They have managed private cloud servers with vm ware hosting. This will make it easy to work with multiple operating systems and have a great IT support team on call 24/7/365. For more information check out peer1.com private cloud documentation and pricing.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Lets do the easy toggles first

Top To Bottom

I am doing this for the comments section of most WordPress sites. First you have to give the identify what the outer most container is of your comments section. Mine is id comments. So just to the top of my comments section I need to create a button but you don’t have to use a button it is just the easiest to explain. So you should have something that looks like this.

<button id="comments_bottom">This Is A Toggle Button</button>
<div id="comment">
//Your Comment Code
</div>

You will notice that I gave the button a id that is so that jQuery can find it. Next you have to create your js file. I would name it something like toggle.js. It should look like this depending on which way you want your content to toggle.

//Top To Bottom
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({height: "toggle"}, 1000);
	});
});
//Left To Right Or Right To Left
//In order to do either you must float your #comment 
//the direction you want your content to come from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle"}, 1000);
	});
});
//Upper Left To Lower Right Or Upper Right To Lower Left
//These ones you also have to float from the direction 
//they are coming from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle", 
                    height: "toggle"}, 1000);
	});
});

Now all you have to do is call your jQuery script and a jQuery library and your toggle up to down should work. I use the Google library because of how quick it is. You can find more info about the Google library here jQuery Library

Other Ways To Toggle

There are a few other ways to do a toggle like from bottom to top and bottom corners to top corners. There is also some other things that you can do with toggle like fading. jQuery has a lot of really easy and light things that you can do to your site to make it just that much better. If I were you I would take a look at their site jQuery.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

Traffic Meta Breakdown

Back in the day all traffic came from your meta tags and your keywords. Don’t get me wrong these are still very useful but they don’t build you as much traffic because of the millions of website out there. To give you an example I would love to be the number 1 site on Google for web design well that really isn’t practical it is possible but when you search web design you get 343,000,000 that is how many pages are being crawled with the words web design. Now I am not saying don’t try to get to the top of the list. Defiantly try but try for something a little smaller like for instance I am from Michigan and so I am trying to get top for Lansing Web Design and Michigan Web Design. If you search Lansing Web Design I am close to the top. Now if I use keywords like that and try to focus on a smaller scale my site will rise on the bigger scale.
Your keyword meta tag is important but you have two other tags that are even more important your title meta tag and description meta tag. Your title meta tag is different from your normal title tag because it is what the browsers look at first and way a lot of their decisions on. The regular title tag is also very important it should be used everywhere that it is possible.

Best Ways To Produce Traffic

Here is a list of some really good ways to build traffic to your site.
1) Submitting – You must submit your site to search engines.
2) Use a favicon.ico
3) Depending on what your site is about submit it to other sites with that kind of material.
4) Have a lot of content. This still has to be good content. Pictures really bring in lots of traffic.
5) Use your META tags effectively. META help
6) Advertise with google or other advertising companies.
7) Use Social Media by talking about your site.

Probably the fastest way to get traffic to your site is pay per click. Yes it is going to cost you but in the long run of things it will be worth it. Some people think that after doing these things your site will just magically appear at the top of Google or Yahoo but it won’t. Building a vast amount of traffic takes time and some times money.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Spread and Share

• 

With the new release of WordPress 2.8 the developers really took in what people had to say and made some vast changes to the content management system. One of the biggest changes that the team made that the end user and really the admin won’t really see is the database changes. The WordPress team made the database much more efficient and much faster that allows for faster page load in the admin and load for the site. WordPress added some much needed functionality that helps the developer perform much faster. Some of those changes include.

Functionality Changes

• Theme and Plugin Editor
• Theme Installer
• Plugin Management

WordPress Changes

These are just some of the changes that WordPress implemented in the 2.8 release. All three of these changes speed up the development process on creating a theme for a site. I will be the first one to say that I use previously developed themes and recreate off of them because it is much faster just to use already created code. With using a already created theme it used to be a pain to have to ftp into your site and add the theme into the theme directory for your site. With the implementation of the Theme Installer you can upload a theme in its zip file or you can search the WordPress database for a theme. Much faster than having to go out and download the theme and then upload it to the theme folder. Now I have always been against using the theme/plugin editor that was built into the content management system but now that it is changed I have been using it for little changes but I still use a outside code editor. They made some great changes with it like the ability for line numbers and the function dropdown at the bottom of it. The new creation of how you manage plugins is great with the ability to deactivate each plugin individually and delete each one without having to go to the top of the page and click the dropdown and select delete. Probably the best thing with the plugin managment upgrade is the update feature that allows you to update each plugin right there.

Stuff Not Really Noticed

WordPress has implemented quite a few thing that the end user will not really notice but will be really affective like the ability to automatically update time when it is daylight savings time. Also the ability to control the columns on the dashboard page is also a plus for the admin so they can stay updated with whatever it is they have on the dashboard. Another little change that helps the admin users is the recreation of the widget panel. Now with more intuitive activity, it makes it easier to add widgets to the sidebars. One of my favorite things that WordPress implemented is a popup banner to inform the admin that they have not changed the auto generated password.

Your Questions

The only question about this new installation of WordPress is what could they possibly do to the platform next to make it even better? If you have any ideas and don’t want to submit them please leave a comment on the post and I will submit them for you.

Spread and Share

•