In this article I would like to tell you where you can buy or order professional design for your website or blog. I propose only two interesting on my opinion variants – purchase ready-made template or order unique design. One of the most important moments in choosing marketplaces  was   simplicity and a wide range of opportunities for the clients.

Purchase ready-made templates.

There are many companies over internet that selling templates and themes for different  website engines.

But today i would like to highlight Envato concept. It is a high quality products marketplace.  I think one of the biggest advantage of Envato is a lots of independent authors. That’s why there are big amount of professional, high quality product. Also it is pretty easy to order customisation for purchased product and discuss a reasonable price with seller. Envato marketplace divided into websites by categories:

• Themes and templates are available at the Themeforest.  WordPress themes are the most.  New category Magento was added recently.
• If you are looking only design for your website, I would like to recommend you to check Graphicriver website.
• Flash work you can find at Activeden.

In advice, when you are choosing product, read description and comments.

Order custom website design.

That would cost you much more, but you can receive absolutely unique design. If you don’t know any good designer, or you can’t find out what you need, then you can create a “best design” contest on related to your needs marketplace.

I believe there is no doubt that 99designs is leader in crowd sourced design. There are a lot of professional designers on website and if you will make a perfect brief you can receive what you need.You can adjust your contest as you want for the best results. This variant also good because you are determining the price for the project. You can also refuse contest if there is no works that you likes. There is even individual category for WordPress themes. Write accurate comments to designers and you will receive you dream design.

P.S.

I only wrote about this two variants, because i believe that it is the most simple ways to get professional design.

I appreciate any comments! I’m very interested in your opinion regarding this review.

List of Problems:

1. Admin login problem in local installation
2. UPS dont show methods titles
3. Using html tags in product description
4. How to remove zoom tool

This problem caused by a strict rule from magento development – “Valid Domain/Base URL should be have 1 or 2 dot on it”

Condition to recreate problem:
1. you should be working in localhost .
2. Your domain/base url in localhost doesnt have one or two “dot”

How to fix it
You need to change your local hostname
for example
you have magento installed in localhost – you should rename/add alias to it – like this magento.localhost
This can be done in:
- for windows users C:\WINDOWS\system32\drivers\etc\hosts
- for linux users: look for your system manual

After go to admin section, do not forget to change the 2 base url on “System > Configuration > Web” section.

If you get only prices and do not see methods descriptions like Ground or UPS Next Day Air on checkout page, we are going to you.

You need to change

$_rate->getMethodDescription()

to

$_rate->getMethodTitle()

in the following templates
/app/design/frontend/PACKAGE/THEME/templates/checkout/cart/shipping.phtml
/app/design/frontend/PACKAGE/THEME/templates/checkout/multishipping/overview.phtml
/app/design/frontend/PACKAGE/THEME/templates/checkout/multishipping/shipping.phtml
/app/design/frontend/PACKAGE/THEME/templates/checkout/onepage/shipping_method/available.phtml
/app/design/frontend/PACKAGE/THEME/templates/paypal/express/review.phtml
/app/design/frontend/PACKAGE/THEME/templates/paypaluk/express/review.phtml

* note: replace PACKAGE and THEME with your package and theme names respectively.

you can use perl to find/replace it

perl -i -p -e 's/getMethodDescription/getMethodTitle/g' `find | grep .phtml`; 

There are several common problems
1. you use ul / ol lists and it displays wrong
- in this case you need to update css , you can find out what to edit by using firebug/other developer tool

2. using tables and get a lot of empty space
- this is hapen cause of nl2br() function , which convert all newline characters to br
you can solve it by writing html in one line
or edit catalog/product/view/description.phtml
change

<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), nl2br($this->getProduct()->getDescription()), 'description') ?> 

to

<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $this->getProduct()->getDescription(), 'description') ?> 

but in this case you are responsible for newline characters

If you want to remove zoom tool edit app/design/frontend/interface/theme/template/catalog/product/view/media.phtml

Comment out this code:

<div class="image-zoom" id="track_outer">
<img id="zoom_out" src="<?php echo $this-/>getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="< ?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
<div id="track">
<div id="handle"></div>
</div>
<img id="zoom_in" src="<?php echo $this-/>getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="< ?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out');
});
</script>

also comment out this line in page.xml

<!--<action method="addJs"><script>scriptaculous/slider.js</script>

That removes the zoom tool and displays the base image, however it will still be constrained to a box based on the CSS styles. You’ll need to adjust your CSS styles in the boxes.css for the following style definitions:

.product-img-box
.main-product-img

Albook extended 764 icons

Pure icons

iPhone style sidebar icons

Rinoa icon set

Smashingmagazine icon set

Coquette Icons

They divided into 2 groups: uploaders not using flash & uploaders using flash

Solutions without flash

1. Ajax upload

Very nice tool, flash-free. You can customize it as you want, also you can use drag&drop files on input
Works in: IE6/7, FF2/3, Safari, Chrome, Opera.
Has different versions for jQuery, Prototype, plus has independent version.
demo

2. jQuery Multiple File Upload Plugin

Has many features, like using different validations, limit max files for upload, use different icons for different file types
demo

3. Ext.ux.FileTreePanel (Ext.JS extension)

demo

4. noswfupload

Multiple files upload without SWF objects, applets Java, or other third parts plug-ins, 100% browser and W3 compatibility thanks to graceful enhancement, no extra libraries dependency

demo

Solutions using flash

1. SWF Upload

Popular solution, allows to customize all upload elements using XHTML & CSS, shows only file types you choose, has js callback function to every event.
demo

2. uploadify

Has not so many features, as SWFUpload, but it uses jQuery :)
demo

3. FancyUpload

FancyUpload – fully customizable uploader with progress bar. Require MooTools.
demo

4. Yahoo File Upload

demo

Cult-f.net

In this case we are going to you :)

To accomplish this task we need only one thing – well-known HTML element property – border. This property has one unique ability – borders of the joint angles is divided in equal shares.

For example to get square divided on 4 parts with 45 degrees angle like this one:

you need only one line of code

<div style="
border-top:25px solid gray;
border-left:25px solid red;
border-bottom:25px solid black;
border-right:25px solid green;
width:0;
height:0">
</div>

More examples:

a piramyd

css

border-left:30px solid #FFF;
border-right:30px solid #FFF;
border-bottom:50px solid #FF8400;
width:0;
margin-bottom:30px;

a bow tie

css

width:0;
height:0;
border:30px solid yellow;
border-top:15px solid white;
border-bottom:15px solid white

an arrow

css

.right_arrow {
width:150px
height:50px;
position:relative;
}
.right_arrow .body {
width:100px;
text-align:center;
height:50px;
line-height:50px;
background:yellow;
}

.right_arrow .arrow {
position:absolute;
left:100px;
height:0;
top:0;
border:25px solid #fff;
border-left:10px solid yellow;
}

an another arrow

css

left_arrow {
height:50px;
width:150px;
position:relative;
}
.left_arrow .arrow {
border:25px solid #FFF;
border-right:25px solid #CC0000;
width:0; height:0;
overflow:hidden;
margin-left:-25px;
}
.left_arrow .body {
margin:-35px 0 0 25px;
top:15px; left:25px;
height:20px;
background:#CC0000;
color:white;
text-align:center;
}

More and more people start using Wordpress. Last month a couple of my
client asked me to help him migrate from Wordpress.com to their own
hosting. Here is short instruction on how to get it done easily.

The essence of migration is redirect old links to new domain.

1. I assume that you already buy hosting package and domain name,
download latest version from Wordpress.org and install it on your
server.

2. Now we need to move content to new blog:

- login to your wordress.com dashboard , and go to Tools -> Export,
make export;

- login to your new blog admin, go to Tools -> Import, choose import
from wordpress. Choose your imported.xml, choose ‘author mapping‘,
check ‘attach import‘ checkbox.

3. Now lets make redirects:

- first you need to change nameserver on new domain to
NS1.WORDPRESS.COM ( there could be more nameservers, change all to new
). This way you can point new domain to your old blog. Don’t forget to
save old NS records, we will need them soon.

- login to your wordress.com dashboard , and go to Upgrade ->
Domains, add new domain there. There should be no errors if you change
NS records as described above. This service costs $10/year

- now redirect links from old blog to new. Click on ‘Put blog here‘
link opposite to your domain.

- Now we switch back NS records to our hosting. We have powerful
blogging tool on new domain + old links point to new domain.

4. Useful advices:

- Wordpress.com permalink structure is
blogname.wordpress.com/year/month/day/postname, and you need to set
such structure to get redirects to appropriate posts;

- Want to change permalink structure and keep old link redirects ?
Use “Dean’s Permalinks Migration” plugin;

- Use Youtube movies in your blog? to avoid editing all posts you can
use “Youtube Brackets” plugin.

I hope you will find this article useful. If you have something to
add, write in comments.

A couple of days ago i’ve finished my first template for Magento. It is new e-commerce platform with a lot of features. But it takes time to learn how it is working. So here is a couple of advices for whose who will work on creating a template for Magento.

I assume that you use fresh install of Magento.

1. To start you need to create two dirs. Basicly you can just copy them from default theme.
   • copy /app/design/frontend/default/default to /app/design/frontend/default/your_theme (contain layout and html files)
   • copy /skin/frontend/default/default to /skin/frontend/default/your_theme ( contain pics, css, js )
2. To assign theme to a store
   • go to System -> Configuration -> Design tab
   • choose website or store-view level
   • in Current package name, enter the name of the interface in which your new theme resides ( i.e. default)
   • in Default (under Themes heading), enter the name of the new theme ( i.e. your_theme )
3. Disable caching to see changes you make in System -> Cache Management
4. To make your life a bit easier you could enable template path hints to see which modules you need to edit
   • System -> Configuration
   • in the very bottom click on Advanced tab
   • choose your store ( i.e. English ) and turn on hints
5. To edit home page go to CMS -> Manage Pages -> Home page
6. Skeleton templates are in app/design/frontend/your_interface/your_theme/template/page/. Basic skeletons are
   • 1-column
   • 3-column
   • 2-column-right
   • 2-column-left
7. Easy way to display products of your choosing on the home page.
   • Create a category to contain the featured products. Call it e.g. Featured & Set ‘Is Active’ to ‘No’. That way, it won’t display in the catalog menu.
   • After saving the category, please note what ID it gets. You can see it in the last part of the URL. If the URL ends with catalog_category/edit/id/8/, the ID is 8.
   • Add products for the home page to the new category.
   • Edit the Home Page (CMS -> Manage Pages -> Home Page) and add the following content, where 8 should be replaced by your category ID:
     {{block type=”catalog/product_list” category_id=”8″ template=”catalog/product/list.phtml”}}

UPDATE: second part is here

1. Basics

- mootools.net – official mootools site
- docs.mootools.net – detailed documentation
- mootools.net/download – here you can download latest version of mootools

Ok, i assume you already download js source. Now you need to add it to your pages. Best place to add it is head tag

<html>
  <head>
    ...
	<script type="text/javascript" src="mootools.js"></script>
    ...
  </head>
  ...
</html>

As soon as the DOM is ready mootools fires ‘domready’ event, and that means “it’s time to run our code”

window.addEvent('domready', function() {
...
});

To get an element with id=’someID’ use

$('someID')

To get collection of elements, for example links inside some div, use

$$('#someID a'))

If you want to execute your function on some event, for example on click, use

$('someID').addEvent('click', function(e) {})

That’s all you need to know to start using mootools

Show/hide panel
Demo

We have 2 divs – one with id=”top” – contain panel, second – with id=”top2″ – contain link that toggle panel.
Panel will be toggled with help of “Slide” effect.

window.addEvent('domready', function() {
	var myHeight = new Fx.Slide('top').hide();
	$$('#top2 a').addEvent('click', function(e) {
		e.stop();
		myHeight.toggle();
	});
});

e.stop(); – use it if you want to prevent default event behaviour, we use it to make link only open/close panel and nothing else

Smooth scroll to some place on page
Demo

We have many paragraphs on page and some sort of content table in the top. By clicking on link you scroll page to corresponding paragraph. Code to do it is very simple.

window.addEvent('domready', function() {
	var mySmoothScroll = new SmoothScroll();
});

Delete some block from webpage
Demo

To delete some block ( p, div, etc ) we add a link with class=”delete” inside it. When you click on link block will be faded and then removed from DOM after 1 sec delay.

window.addEvent('domready', function() {
	$$('a.delete').addEvent('click', function(e) {
		e.stop()
		var p = this.getParent();
		p.fade(0);
		(function(){ p.destroy(); }).delay(1000);
	});
});

Add/remove field(s) to form
Demo

Imagine you have form to upload files. You don’t know how many files you wish to upload, so you want to have ability to add/remove additional fields.
To accomplish this we add two buttons
- button with name “plus” – to add field
- button with name “minus” – to remove field

Block that we will clone

<div id="uploadBlock">
    <label for="upload">
      File to upload:
      <br />
    </label>
    <input name="upload[]"/>
    <br />
</div>

We mark block we will clone with id=”uploadBlock”

window.addEvent('domready', function() {
	$('uploadForm').getElement('input[name=plus]').addEvent('click', function(){
		var clone = $('uploadBlock').clone().injectAfter('uploadBlock');
	});
	$('uploadForm').getElement('input[name=minus]').addEvent('click', function(){
		if ( $('uploadForm').getElements('input[name^=upload]').length == 1 )
			return false
		else
			$('uploadBlock').getNext().destroy();
	});
});

When you click on ‘+’, block with input is cloned and injected after first input
After clicking on ‘-’ we check if we have more than one input and delete one input

Tips
Demo

Tips is nice solutions when you want to show additional info about some element, but you cant find place for it on page.
Tip is showed on rollover event. Mootools has native plug-in for Tips. Here you can see standard example, example using custom css and example with fixed tip.

window.addEvent('domready', function() {
	var tip_img = new Tips($$('.img'));
	var tip_link = new Tips($$('.link'), {
		className: 'custom'
	});
	var tip_link_fixed = new Tips($$('.link_fixed'), {
		className: 'custom',
		fixed:true
	});
});

Accordion
Demo

Accordion contain sections, each of them has such structure:

<h3 class="title">Title</h3>
<div class="content">
	Content
</div>

window.addEvent('domready', function() {
	var myAccordion = new Accordion($('accordion'), 'h3.title', 'div.content');
});

Morph
Demo

Morph is one of Effects. It allows to transition any number of CSS properties for an element.
You can specify css properties in class and pass it to morph function.

window.addEvent('domready', function() {
	$('morphForm').addEvent('submit', function(e) {
		e.stop();
		if ( $('username').get('value') == 'elpaso' && $('password').get('value') == 'password' )
			$('loginMsg').set('text','Successful login').morph('.success');
		else
			$('loginMsg').set('text','Wrong Data').morph('.error');
	});
});

Make all links external
Demo

Links on page can be internal ( they linked to some page on your site ) or external ( go away from your site ). In this example we add “rel=’nofollow’” to all external links and make them open in new window

window.addEvent('domready', function() {
	$$('a').each( function(item, index){
		if ( !( (/^http://(?:www.)?cult-f.net/i).test(item.href) ) )
			item.setProperties({
				rel: 'nofollow',
				target: '_blank'
			});
	});
});

Image gallery
Demo

We have two divs – ‘frame’ – to which we load big photo & ‘photos’ – contain small previews.
First we load images using Asset plugin, you can see progress in frame where big photo will appear
After all loaded, we assign click events to thumbs and show first photo

window.addEvent('domready', function() {

	var images = [];

	var img_paths = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
	var loader = new Asset.images(img_paths, {
		onProgress: function(counter,index) {
			$('frame').set('html','loaded '+ (counter + 1) * (100 / img_paths.length) + '%');
		},
		onComplete: function() {
			//fill our img array
			img_paths.each(function(im) {
				images[im] = new Element('img', {
				    'src': im,
				    'styles': {
						'visibility': 'hidden',
						'opacity': '0',
						'border': 'none'
				    }
				});
			});
			//assign click events
			$$('#photos a').addEvent('click', function(e) {
				e.stop();
				$('frame').empty();
				images[this.rel].set('opacity','0').inject($('frame')).fade(1);
			});
			//show first img in frame
			$('frame').empty();
			images[ img_paths[0] ].set('opacity','0').inject($('frame')).fade(1);
		}
	});

});

Here are 15 excellent sites with funny cartoon characters and other cute details.
People like cartoons because its simple and funny and they make us smile :)
I love it, and I am sure, that you will like them too.
So, lets start.

http://www.pojeta.cz/ (scroll up and down )

http://www.wpcoder.com/

http://www.mailchimp.com/power_features/

http://www.garethdickey.com/

http://blog.torondel.net/

http://doggiedaycareonline.com/

http://www.piflar.si/

http://www.nanoda.com/en/

http://www.roome.co.uk/

http://www.icff.co.uk/

http://wedomarkup.com/

http://www.photoshoplady.com/

http://www.iwit.nl/

http://www.indeepop.com/

http://www.schneeballschl8.de/