How to Set an Apple Touch Icon
January 7th, 2010
As iPhones and other Apple decives are becoming increasingly popular, it’s time to start paying attention to detail when building a website and adding in those little extra touches makes all the difference.
For pc browsers, websites can have a favourite icon, which is used when users bookmark your website. For Apple devices you can create a similar icon called the “Apple Touch Icon”, which when users add your website to their home screen.
This is done when the user:
- visits your website
- taps the + icon
- selects “Add to Home Screen”
Hopefully if done correctly, your icon is displayed (see below we’ve added ours). The good news is that it’s simple to do and easy to add as a new feature to your website.
![]()
The Code
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
How to do it
- Simply create a 57 x 57 pixel icon in your favourite graphic editing software.
- Save your website iPhone icon as PNG and name it “apple-touch-icon.png”
- Upload to your websites root folder, e.g. where the index.html file is
- Then enter the code (shown above) into your websites head tag
- Job done!
Posted in iPhone, Other, website design | No Comments »
Transparent background in CSS
October 26th, 2009
Transparent boxes are becoming a common element to many new designs, as you will see our latest design is build around the design of 2 transparent boxes however this was done using png’s.
There are a number of ways to achieve this effect but today i will show a simple example of how to achieve this using CSS. I am not certain to what extent this code will work on all browsers but any feedback that you might have please let me know as i will include it in this post.
The below example will show a box using the background colour of white and an alpha of 50%.
Transparent Box CSS
#mydiv {
width: 300px;
height: 50px;
margin: 20px 0;
background-color: #ffff00;
/* Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
Here’s what it looks like
50%
30%
10%
Advantages
The only real advantage, but a good one, is that you no longer need to use images (e.g. pngs) for your backgrounds which could result in faster loading times for your web page.
Disadvantages
This may not work on all browsers, it certainly does for the most recent versions but how far back this technique goes back I’m not too sure. Using the code above you will also need to keep the width set, in IE it seems to break without it. But im sure there is a work around for this.
Posted in CSS Tips & Tricks, website design | No Comments »
Follow us on Twitter!
October 18th, 2009

So its official you can now follow us on twitter to see what we’re up to!
At the moment I cant see there being much tweeting going on due to the vast amount of website design work going on here, be stay tuned! We’ll be posting regular updates, such as:
- New website design ideas
- New website launches
- Sneak peaks
- Tips and Tricks
- Other random stuff we come across!
- And much much more.
Furthermore we’d love to hear your comments and feedback on our work!
You can follow us at: twitter.com/zenduo
Posted in Other | No Comments »
Zenduo Loves JQuery!
September 29th, 2009

Over the past few months we’ve really got into JQuery at Zenduo Studios. Not only has it reduced development time, JQuery has enhanced the way in which we build our websites, improving functionality and the overall aesthetics and user experience.
For any of you that haven’t used JQuery before:
jQuery is a new kind of JavaScript Library.
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.Source: jquery.com
So why not head over to the JQuery website>> http://www.jquery.com
Posted in JQuery & Java | No Comments »
PHP For Loop
September 29th, 2009
for ( $count = 5; $count <= 5; $counter ++) {
echo $counter;
echo " <br />";
}
Posted in PHP Scripts | No Comments »
Excluding Posts from the Index Page on WordPress
September 29th, 2009
If you have ever wanted to exclude posts from your homepage on wordpress keep reading…..
Excluding posts on the index page of the blog was one of those things that i knew was possible but never really got around to actually doing it!
I thought i would share the solution to the problem as i managed to find a quick and easy way of excluding the posts.
Here’s how you do it
Step 1
Locate the index.php file in your current active theme. This is usually situated in the ‘wp-content/themes/’ folder of your server. Once you have located this folder pick your current theme and look inside to find the index.php file. You will then need to download this file and open in your default editor.
Step 2
Once you’ve managed to open the file do a search for the following line of code:
<?php while (have_posts()) : the_post(); ?>
You will then need to insert the following code so you have something that looks like this:
<?php while (have_posts()) : the_post(); ?>
<?php if (in_category('79')) continue; ?>
Step 3
Notice that the category 79 has been used in this example.
To find the id of the category that you want to exclude from the homepage simply login to your admin page and head over to the manage > categories section. Once there simply mouse over the category name that you wish to exclude and notice in the url there will be an id number (this normally displayed to the bottom of your browser).
Extra Steps
If you want to exclude multiple categories simply duplicate the same line of code as shown above changing the id number. See the example below:
<?php while (have_posts()) : the_post(); ?>
<?php if (in_category('79')) continue; ?>
<?php if (in_category('29')) continue; ?>
<?php if (in_category('30')) continue; ?>
<?php if (in_category('12')) continue; ?>
This is its as simple as that!
Posted in PHP Scripts | No Comments »
PHP Include function
September 29th, 2009
Using the php include(); statment can be a handy way to speed up your development time , making it easier to amend or add features to a set template or snippet of code.
Example Code
<?php include("includes/filename.php"); ?>
Posted in PHP Scripts | No Comments »
Returning the Current Page URL
September 29th, 2009
Using PHP you can return the current url of the page by simply using :
$pageURL = 'http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
echo $pageURL;
By using string manipulation you can also us this function to return the end characters of the url request.
For the following url: http://zenduo.co.uk/folder/page.php?g2_itemId=89 we can return the end numbers using the following code:
$pageURL = 'http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
$pageURL = substr($pageURL,strrpos($pageURL,"=")+1);
echo $pageURL;
The result of this would be 89.
Posted in PHP Scripts | No Comments »
PHP capitalising the first letters of each word in a sentance
September 29th, 2009
I recently wanted a contact form to convert a form element, in this case someones name to uppercase. For example ‘tom peters’ decided to enter his name without any capitals. The desired result would ideally be ‘Tom Peters’.
Using PHP we can convert the form field variable by doing the following:
$personsname= "tom peters";
$PersonsName = ucwords($personsname);
echo "<p> The old string - $personsname <br />";
echo "The new string - $PersonsName </p>";
There are a few more examples that you could experiment with for example:
- strtolower(); will convert a string to lowercase.
- strtoupper(); will convert a string to uppercase.
Posted in PHP Scripts | No Comments »
Vertical / Horizontal Scrolling in Flash
September 28th, 2009
The following examples below show how to make a movie clip in flash dragable either horizontally or vertically with set positions stopping the movie clip being dragged to far.
In these examples we will use 50 as the lowest position the object can be moved and 200 as the highest value that the object can be moved.
Verticle Scrolling (up and down):
on (press) {
startDrag(this, 0, this._x, 50, this._x, 200);
}
The opposite effect can be applied when you switch the variables and number around to this._y
Horizontal Scrolling (left and right):
on (press) {
startDrag(this, 0, this._x, 50, this._x, 200);
}
Posted in ActionScript & Flash | No Comments »