September 15, 2010

4 tips for debugging CSS

Filed under: Web Design — webtechbc @ 2:30 pm

There’s no doubt about it, CSS is your friend

However every web designer know’s CSS can also be a bit of a nightmare to debug. Here’s how I go about debugging CSS.

#1) Turn boarders on. border: 1px solid red; or border: 1px dotted red;
Either way you slice it a boarder can be your best friend. Border’s help you see where your elements are on a page. If they are positioned wrong a boarder can determine this.

#2) Use Web Developer toolbar. This could be number one, but I usually start with turning on boarders and am able to figure out whats wrong. When that fails I use Web Developer tool Bar, CSS, View Style Information. This helps me outline and see where elements are sitting. It also gives me the names and styling of each element. From the image below I can tell the high-lighted area is part of p, li, feedback class.
Web Developer tool bar has a lot more great features for debugging code. If your not using this toolbar or firebug, you should re-think the tools you use.

#3) Use Firebug. If you can’t find what you need with Web Developer toolbar, which I usually do, I use firebug. Firebug allows for local document editing which can be handy for debugging. The nice thing about firebug is you just have to hover over a css element and it show’s you where your element is by outlining it.

.

#4) Validate your CSS & HTML. Validating is a great way to debug. Once your code is valid it should appear properly. Don’t be afraid to get down and dirty. Remember the cleaner the code, the happier search engines are. If you run into problems with certain browsers like IE. Validation can help you find new ways of building your CSS so it is cross-browser friendly.

Share on Twitter, Facebook, Delicious, Digg, Reddit

September 9, 2010

5 Free Magento Ecommerce Themes

Filed under: magento — webtechbc @ 9:45 am

5 Free Magento Ecommerce Themes worth looking at

Here’s a list of 5 Free Magento E commerce Store themes compatible with version 1.4 and above.

1. Magento Classic Free theme, 10 Colours

* Magento 1.4 compatable
* CSS3 Powered!
* Easy color changes
* Easy to upgrade, easy to customise
* Supports all main browsers (IE6,IE7,IE8,FF2,FF3,Opera,Safari
* Free updates included

Magento Ecommerce Classic Free Theme

Magento Ecommerce Classic Free Theme

2. Hello Wired Free Theme

* Front Page Slider
* Cart order tracking
* jQuery, Lightblox and slider throughout store
* Multilanguage
* Supports alll browsers

Hello Wired Free Theme

Hello Wired Free Theme

3. mApple Free Magento Theme

* Compatible with all major browsers(IE6, IE7, IE8, FireFox, Safari, Chrome)
* Optimized for fast loading
* SEO (Search Engine Optimization) compliant
* W3C HTML & CSS validated
* Support Magento Version 1.4.x

mApple Free Magento Theme

mApple Free Magento Theme

4. HM Modern Theme

* Compatible with all major browsers(IE6, IE7, IE8, FireFox, Safari, Chrome)
* Optimized for fast loading
* Easily customize with PSD files (included in the package)
* SEO (Search Engine Optimization) compliant
* W3C HTML & CSS validated
* Support Magento Version 1.3 and 1.4

HM Modern Free Theme

HM Modern Free Theme


5. Seonitik – Free Magento Theme

* Compatible with all major browsers(IE6, IE7, IE8, FireFox, Safari, Chrome)
* Optimized for fast loading
* Easily customize with PSD files (included in the package)
* SEO (Search Engine Optimization) compliant
* W3C HTML & CSS validated
* Support Magento Version 1.3.x and above

Seonitik Free Theme

Seonitik Free Theme


Share on Twitter, Facebook, Delicious, Digg, Reddit

July 14, 2010

Magento 1.4.1 Stable Released

Filed under: Web Design,magento — webtechbc @ 12:47 pm

Magento CE Version 1.4.1.0 Stable – Now Available.

If you work with Magento you should already know that 1.4.1 stable is now availble. The new version of the Community edition is vastly superior to 1.3.

The new versions WYSIWYG is far better then previous versions. In addition you can now include widgets in your shopping carts. Magento integrates easily into Twitter, Facebook, WordPress, & and has improvedSEO features.

Some of the features include

Enhanced PayPal integration (more info to follow), Change of Database structure of the Sales module to no longer use EAV, and much more.

Magento is an easy to use & skin shopping cart application. Its very similar to wordpress in terms of skinning features. It uses an xml & php back end which is very easy to learn.

Share on Twitter, Facebook, Delicious, Digg, Reddit

 

Powered by WordPress

Switch to our mobile site