What about our client sites?

As a client of avato studios you have the decision whether to support IE6 or not. We advise accordingly to your user base and the type of industry you are in. For example – if the main user of your website is tech savy computer phoebes – then there will be no need to support it as the majority will have the latest browsers.

Still using IE6 – Then upgrade!

It’s not only us that are dropping support for this browser, the majority of sites on the web are slowly dropping support too. So find a browser which suits you best and upgrade to it, You can do that by visiting – http://whichbrowserforme.org/

Thanks for following us here at avato and remember to subscribe, follow us on twitter and check back on the 26th April for our launch of new sector – www.avatoonline.co.uk.

The Back of the book

David not only shares his experiences working with clients, including sketches and final results of his successful designs, but also uses the work of many well-known designers to explain why well crafted brand identity systems are important, how to create iconic logos, and how to work with clients to achieve success as a designer.

Why I Recommend this book

For anyone who is interested, involved or just nosey – in creating visual identities this book covers everything. Not only his own work but other well known agencies and individuals too, looking at do’s, dont’s, success stories and failures. All in a beautifully designed book which makes reading a delight.

Sections it Covers

• 1. The Importance of Brand Identity
• 2. The process of design
• 3. Keeping the fires Burning

This book is highly recommended by me (as you can tell) and many others, you can find out more information about the book and where you can buy it at http://www.logodesignlovebook.com/reviews, where theres also a great blog you should subscribe too.

The next book i’ll be picking up is Steve Krugs – Don’t make me think. So subscribe to us via our RSS feed or via twitter and enjoy our past and forthcoming articles, thanks – your avato studios team.

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. You can find out more about jQuery at www.jquery.com

Step 1 – Including jQuery into your page

You need to download and include jQuery into your choice you do this by downloading the jQuery library from the jQuery website and enter the amended version of the following code into the head of your site.

1

<script type="text/javascript" src="path/to/jquery-1.4.2.min.js"></script>

Step 2 – jQuery Function

Now it’s time to put jQuery to work by calling on the functions needed to trigger the display of our chosen element. First we’ll take a look at the code then break it down and explain.

1
2
3
4
5
6
7

<script type="text/javascript">
$(document).ready(function(){
       $("#trigger").click(function(){
	       $("#to_be_revealed").slideToggle("slow");
	});
});
</script>

First we must get the pages to acknowledge and load the script which we do by using the .ready() function. This will then contain the functions needed. First we are going to define the trigger of our function which in our case is the element with an id of “trigger”, using the jquery function .click we tell the browser that when the element “trigger” is clicked to proceed on, contained within the click function is the next function needed which will show our needed element, in this case the “to_be_revealed” element. Using the jquery function “slideToggle” we then tell the browser to toggle the “display” css property with a slide effect at the speed of slow.

Step 3 -The HTML

Now we need to simple add the trigger and to be revealed elements to our html document, this is done simple and can be done using the majority of the HTML elements.

1
2
3
4
5

<div id="trigger">Click me</div>
<ul id="to_be_revealed">
       <li>This cool list will then be revealed</li>
       <li>And when you re click the trigger, it will go again.</li>
</ul>

Step 4 – Finally, the CSS

Now it’s time to style the trigger and to be revealed element, the only css declaration required is to set the “to_be_revealed” element to “display:none;”.

1
2
3
4
5
6
7
8
9
10
11

#trigger {
      font-size: 12px;
      text-decoration: underline;
      font-weight: bold;
      color: #000000;
}
ul#to_be_revealed {
     display: none !important;
     background: #FFFFFF;
     border: 1px solid #666666
}

That’s all it takes to add some functionality to your elements which may or may need to be shown. jQuery makes life allot easier and that’s one of the reasons avato studios developers love it so much! Combined with your imagination, simple actions like the one we’ve looked at today can become a great asset to your website.

Remember to subscribe to our RSS feed or follow us on twitter for more tutorials, news and educational resources. Thanks for reading, your avato studios team!

Articles

Why Wordpress? – Take an initial look at what wordpress is and why hundreds of thousands of people use wordpress everyday.

A Collection of Wordpress Resources – We give you a number of the best places to continue your education of wordpress past our site.

Wordpress Functions Part#1 – Some great tricks you can do straight from your functions.php file.

Customising your Wordpress Panel – The ability to adapt wordpress to you’re working mannerisms plays a great factor in making wordpress great, find out how to customise yours.

Screencast Series

Screencast: Installing and logging into wordpress – Our first part into our series of screen casts looking into wordpress from installing to making your own plugin.

Remember to revist this page to keep updated on our latest wordpress articles or even bookmark, subscribe to our RSS feed or follow us on twitter. Happy wordpressing!

Watching the video

We’re currently trying out new screen casting programmes and hosts, to view the above video clearly you will have to enter full screen mode which you can do by hovering over the video then clicking the screen icon in the rear bar.

So we have made a start with our wordpress crash course. Whether you have been using wordpress for years or just starting out. Subscribe or follow us on twitter and follow the series and expand your wordpress skills.

Screen Options

The wordpress screen options tab is found on almost every page within your panel and enables you to remove and add elements from within. This option is great as it allows you to free up space and remove certain elements that you have no use for. For example on our blog we do not use post tags, therefore we have removed it from our panel.

Another great control within screen options is the ability to control the number of columns your layout has. Dependent on what you’re controlling (page) you can break your pages up with up to four columns.

When looking at post listings, media listings, link listings, page listings and comment listings, you are presented with the control to remove what details are found on the screen and the quantity of each found on each page.

Drag and Drop

After you’ve removed the unwanted elements you can get positioning them to your needs! This function enables you to work much more efficiently and overall save time. By simply clicking and dragging elements you can position them within your wanted columns. For example we had a client who for each post had to enter a number of details which was done through custom fields, therefore they would scroll down away from the originally positioned publish button, by dragging it down to the bottom it enables them to publish straight after they enter the additional details. Saving time and being more user friendly.

Size of Post Box

This little feature is one of my favourite and I never thought such a small feature could make this system that much better. The ability to choose how many lines your text box will have takes the stress out of having a text box to small and if your anything like me, that is a nightmare.

Your Wordpress Menu

The main wordpress menu is found on the left hand side and varies in two styles, the icon and text styled traditional expanding menu or the smaller, more compact icon based menu with an overlapping sub menu. The compact version increases your work space.

So we’ve had a quick look at my favourite customisation features, so open up wordpress and make wordpress your own. Slim line your production process and overall make using wordpress that much enjoyable.

Remember to subscribe and keep up to date with all our latest articles and follow us on twitter. All the best, your Avato team.

New to wordpress?

If your new to wordpress then you might be thinking what is functions.php? it’s a file within your wordpress theme that basically acts like a plug-in and is automatically called upon in both your theme and admin panel. Read more?

Add A New Gravatar to Default Gravatars

Paste this code into your functions file and replace the image paths with the appropriate. Thanks to WP Engineers for this great tip!

1
2
3
4
5
6
7
8
9
10
11
12

if ( !function_exists('fb_addgravatar') ) {
	function fb_addgravatar( $avatar_defaults ) {
		$myavatar = get_bloginfo('template_directory').'/images/avatar.gif';
                //default avatar
		$avatar_defaults[$myavatar] = 'people';
		$myavatar2 = get_bloginfo('template_directory').'/images/myavatar.png';
                //Avatar for user "admin"
		$avatar_defaults[$myavatar2] = 'admin';
		return $avatar_defaults;
	}
	add_filter( 'avatar_defaults', 'fb_addgravatar' );
}

Change your wordpress Login Logo

Add google analytics to your wp_footer function, enabling you to add google analytics without editing your theme.

1
2
3
4
5

<?php
add_action('wp_footer', 'ga');
function ga() { ?>
    // Paste your Google Analytics code here
<?php } ?>

Add a paypal donation link

Many blogs are community run through donations from loyal users, this script enables you to add a paypal donate button after every article.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function donate_shortcode( $atts ) {
   			 extract(shortcode_atts(array(
       			 'text' => 'Make a donation',
       			 'account' => 'REPLACE ME',
       			 'for' => '',
  			  ), $atts));
 
   			 global $post;
 
    		if (!$for) $for = str_replace(" ","+",$post->post_title);
 
   			return '<a class="donateLink" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation+for+'.$for.'">'.$text.'</a>';
 
}
add_shortcode('donate', 'donate_shortcode');

Display the last attached image to post

Display the latest image you’ve attached to your post. Simply add the below code to your functions page then the short code within your posts where you want the image to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

The Short Code

1

[postimage]

Highlight Search Terms

Highlight the searched terms when searching your wordpress site. Simply add this to the functions.php file and change the #content to the element which surrounds your search content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

function highlight_search() {
		if (preg_match_all('/([^\s"\']+)|"([^"]*)"|\'([^\']*)\'/', get_search_query(), $terms)) {
			$terms = $terms[0];
		} else {
			return;
		}
 
		if(count($terms) > 0){
			$filtered_terms = array();
 
			foreach($terms as $term){
				//$term = attribute_escape(trim($this->remove_quotes($term)));
				if ( !empty($term) ){
					$filtered_terms[] = '"'.$term.'"';
				}
			}
 
			if (count($filtered_terms) > 0) {
				echo '
				  <script type="text/javascript">
				    var hls_terms  = new Array('.implode(', ', $filtered_terms).');
 
				  </script>
				';
			}
		}
?>
<style type="text/css" media="screen">
  .hls { background: #eeeee7; } /* <- Change the CSS style of */
                                /*    highlighted texts here. */
</style>
<script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, css_class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<span class=\""+ css_class +"\">" + c + "</span>";
      }));
    }
  });
  jQuery(document).ready(function($){
  	if (window.hls_terms != undefined){
  		for (i in hls_terms){
    		$("#content").highlight(hls_terms[i], 1, "hls");
    	}
    }
  });
</script>
<?php
}
 
add_filter('wp_head', 'highlight_search');

There’s a few wordpress functions to get you on your way. We have another collection in the making and are hunting down sources to provide you with resources and other functions that will hopefully make your theme that much better.

Thanks for reading, we hope to have you another article sooner that this one come around, subscribe, follow us and again, thanks for reading the avato studios blog.